feat: support to hide sidebar via page frontmatter (#1504)

* feat: add type * feat: control the display of the sidebar menu feature * docs: update default-theme docs * Update src/client/theme-default/layouts/DocLayout/index.tsx * chore: rename * feat: themeConfig.sidebar support Boolean * Revert "feat: themeConfig.sidebar support Boolean" This reverts commit 7ae61a2.
umijs · Feb 24, 2023 · 09db565 · 09db565
1 parent 2d39c02
commit 09db565
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/docs/theme/default.md b/docs/theme/default.md
@@ -220,4 +220,12 @@ hero:
       link: /getting-started
 ```
 
+### sidebar
+
+- 类型：`Boolean`
+- 默认值：`true`
+- 详细：
+
+控制侧边栏菜单的显示或隐藏。
+
 <!-- md config end -->
diff --git a/src/client/theme-api/types.ts b/src/client/theme-api/types.ts
@@ -86,6 +86,11 @@ export interface IRouteMeta {
     atomId?: string;
     filename?: string;
     debug?: boolean;
+    /**
+     * Control the display of the sidebar menu.
+     * @default true
+     */
+    sidebar?: boolean;
     [key: string]: any;
   };
   // route toc

diff --git a/src/client/theme-default/layouts/DocLayout/index.tsx b/src/client/theme-default/layouts/DocLayout/index.tsx
@@ -25,9 +25,11 @@ const DocLayout: FC = () => {
   const sidebar = useSidebarData();
   const { hash } = useLocation();
   const { loading } = useSiteData();
-  const [showSidebar, setShowSidebar] = useState(false);
+  const [activateSidebar, updateActivateSidebar] = useState(false);
   const { frontmatter: fm } = useRouteMeta();
 
+  const showSidebar = fm.sidebar !== false && sidebar?.length > 0;
+
   // handle hash change or visit page hash after async chunk loaded
   useEffect(() => {
     const id = hash.replace('#', '');
@@ -49,8 +51,8 @@ const DocLayout: FC = () => {
   return (
     <div
       className="dumi-default-doc-layout"
-      data-mobile-sidebar-active={showSidebar || undefined}
-      onClick={() => setShowSidebar(false)}
+      data-mobile-sidebar-active={activateSidebar || undefined}
+      onClick={() => updateActivateSidebar(false)}
     >
       <Helmet>
         <html lang={intl.locale.replace(/-.+$/, '')} />
@@ -70,14 +72,14 @@ const DocLayout: FC = () => {
       <Header />
       <Hero />
       <Features />
-      {sidebar && (
+      {showSidebar && (
         <div className="dumi-default-doc-layout-mobile-bar">
           <button
             type="button"
             className="dumi-default-sidebar-btn"
             onClick={(ev) => {
               ev.stopPropagation();
-              setShowSidebar((v) => !v);
+              updateActivateSidebar((v) => !v);
             }}
           >
             <IconSidebar />
@@ -86,7 +88,7 @@ const DocLayout: FC = () => {
         </div>
       )}
       <main>
-        <Sidebar />
+        {showSidebar && <Sidebar />}
         <Content>
           {outlet}
           <Footer />