fix(docz-theme-default): sidebar toggle for links and sub-links

doczjs · Jun 24, 2018 · 9cd6321 · 9cd6321
1 parent 0580a77
commit 9cd6321
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx
@@ -32,9 +32,10 @@ const Icon = styled.div`
 export interface MenuProps {
   menu: string
   docs: Entry[]
+  sidebarToggle: (ev: React.SyntheticEvent<any>) => void
 }
 
-export const Menu: SFC<MenuProps> = ({ menu, docs }) => (
+export const Menu: SFC<MenuProps> = ({ menu, docs, sidebarToggle }) => (
   <Toggle initial={false}>
     {({ on, toggle }: any) => {
       const handleToggle = (ev: React.SyntheticEvent<any>) => {
@@ -54,7 +55,7 @@ export const Menu: SFC<MenuProps> = ({ menu, docs }) => (
             <dl>
               {docs.map(doc => (
                 <dt key={doc.id}>
-                  <Link to={doc.route}>{doc.name}</Link>
+                  <Link onClick={sidebarToggle} to={doc.route}>{doc.name}</Link>
                 </dt>
               ))}
             </dl>

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -185,8 +185,7 @@ const Icon = styled('div')`
 export const Sidebar = () => (
   <Toggle initial={false}>
     {({ on, toggle }: any) => {
-      const handleToggle = (ev: React.SyntheticEvent<any>) => {
-        ev.preventDefault()
+      const handleSidebarToggle = (ev: React.SyntheticEvent<any>) => {
         toggle()
       }
       return (
@@ -199,7 +198,7 @@ export const Sidebar = () => (
             return (
               <React.Fragment>
                 <Wrapper opened={on}>
-                  <ToggleBlock opened={on} onClick={handleToggle}>
+                  <ToggleBlock opened={on} onClick={handleSidebarToggle}>
                     <Icon opened={on}>
                       <span className="icon__line" />
                       <span className="icon__line" />
@@ -221,12 +220,12 @@ export const Sidebar = () => (
                   </ThemeConfig>
                   <Menus>
                     {docsWithoutMenu.map(doc => (
-                      <Link key={doc.id} to={doc.route}>
+                      <Link key={doc.id} to={doc.route} onClick={handleSidebarToggle}>
                         {doc.name}
                       </Link>
                     ))}
                     {menus.map(menu => (
-                      <Menu key={menu} menu={menu} docs={fromMenu(menu)} />
+                      <Menu key={menu} sidebarToggle={handleSidebarToggle} menu={menu} docs={fromMenu(menu)} />
                     ))}
                   </Menus>
                   <Footer>
@@ -236,7 +235,7 @@ export const Sidebar = () => (
                     </a>
                   </Footer>
                 </Wrapper>
-                <ToggleBackground opened={on} onClick={handleToggle} />
+                <ToggleBackground opened={on} onClick={handleSidebarToggle} />
               </React.Fragment>
             )
           }}