Merge pull request #207 from the-programmers-hangout/feat-improve-sidebar

feat: improve sidebar

src/SidebarProvider.tsx

@@ -3,6 +3,8 @@ import React, { FC, useMemo, useState } from "react"
 export interface ISidebarContextInterface {
   current: number
   setCurrent: (index: number) => void
+  openOnMobile: boolean
+  setOpenOnMobile: (active: boolean) => void
 }
 
 export const SidebarContext = React.createContext<ISidebarContextInterface | null>(
@@ -11,13 +13,16 @@ export const SidebarContext = React.createContext<ISidebarContextInterface | nul
 
 export const SidebarProvider: FC = ({ children }) => {
   const [current, setCurrent] = useState(0)
+  const [openOnMobile, setOpenOnMobile] = useState(false)
 
   const memoizedContextValue = useMemo(
     () => ({
       current,
       setCurrent,
+      openOnMobile,
+      setOpenOnMobile,
     }),
-    [current, setCurrent]
+    [current, setCurrent, openOnMobile, setOpenOnMobile]
   )
 
   return (

src/components/ArchivesSidebar/index.tsx

@@ -1,6 +1,8 @@
 import { graphql, useStaticQuery } from "gatsby"
 import { sort } from "ramda"
 import React, { FC, HTMLAttributes } from "react"
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
+import useSidebar from "../../hooks/useSidebar"
 import { IAllArchivesQuery, IFileOrFolder } from "../../types"
 import { humanize } from "../../utils"
 import { Sidebar } from "../Sidebar"
@@ -19,9 +21,20 @@ const ALL_ARCHIVES = graphql`
   }
 `
 
-function plantTree(item: IFileOrFolder) {
+function Tree({ item }: { item: IFileOrFolder }) {
+  const { setOpenOnMobile } = useSidebar()
+  const { unlock } = useLockBodyScroll()
+
   return (
-    <SC.PageLink key={item.title} to={item.path} activeClassName="active">
+    <SC.PageLink
+      key={item.title}
+      to={item.path}
+      activeClassName="active"
+      onClick={() => {
+        setOpenOnMobile(false)
+        unlock()
+      }}
+    >
       {humanize(item.title)}
     </SC.PageLink>
   )
@@ -32,5 +45,11 @@ export const ArchivesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
   const tree = useBuildTree(archives, "/archives")
   const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
 
-  return <Sidebar {...props}>{sortedTree.map(plantTree)}</Sidebar>
+  return (
+    <Sidebar {...props}>
+      {sortedTree.map(node => (
+        <Tree item={node} />
+      ))}
+    </Sidebar>
+  )
 }

src/components/ResourcesSidebar/index.tsx

@@ -9,6 +9,7 @@ import useBuildTree from "./../../hooks/useBuildTree"
 import useSidebar from "./../../hooks/useSidebar"
 import * as SC from "./styles"
 import useMatchingPath from "./useMatchingPath"
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
 
 const ALL_RESOURCES = graphql`
   query {
@@ -43,12 +44,31 @@ const childrenSort = sortWith<IFileOrFolder>([
   }),
 ])
 
-function plantTree(item: IFileOrFolder, index?: number, firstLevel?: boolean) {
+function Tree({
+  item,
+  index,
+  firstLevel,
+}: {
+  item: IFileOrFolder
+  index?: number
+  firstLevel?: boolean
+}) {
+  const { setOpenOnMobile } = useSidebar()
+  const { unlock } = useLockBodyScroll()
+
   if (item.type === "file") {
     const path = getPath(item)
 
     return (
-      <SC.PageLink key={item.title} to={path} activeClassName="active">
+      <SC.PageLink
+        key={item.title}
+        to={path}
+        activeClassName="active"
+        onClick={() => {
+          setOpenOnMobile(false)
+          unlock()
+        }}
+      >
         {humanize(item.title)}
       </SC.PageLink>
     )
@@ -79,7 +99,11 @@ function Folder({ item }: { item: IFolder }) {
       <SC.Label onClick={toggleCollapse}>
         <TriangleDown /> {humanize(item.title)}
       </SC.Label>
-      <SC.Children>{sortedChildren.map(node => plantTree(node))}</SC.Children>
+      <SC.Children>
+        {sortedChildren.map(node => (
+          <Tree item={node} />
+        ))}
+      </SC.Children>
     </SC.TreeWrapper>
   )
 }
@@ -104,7 +128,11 @@ const FirstLevelFolder = memo(
           {humanize(item.title)}
           <SC.CollapseToggler />
         </SC.FirstLabel>
-        <SC.Children>{sortedChildren.map(node => plantTree(node))}</SC.Children>
+        <SC.Children>
+          {sortedChildren.map(node => (
+            <Tree item={node} />
+          ))}
+        </SC.Children>
       </SC.TreeWrapper>
     )
   }
@@ -117,7 +145,9 @@ export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
 
   return (
     <Sidebar {...props}>
-      {sortedTree.map((node, index) => plantTree(node, index, true))}
+      {sortedTree.map((node, index) => (
+        <Tree item={node} index={index} firstLevel={true} />
+      ))}
     </Sidebar>
   )
 }

src/layouts/ColumnLayout/index.tsx

@@ -1,8 +1,9 @@
-import React, { FC, useState } from "react"
+import React, { FC, Fragment } from "react"
 
 import { MobileHeader } from "../../components/MobileHeader"
 import { GlobalStyles } from "../../globalStyles"
 import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
+import useSidebar from "../../hooks/useSidebar"
 import { SidebarProvider } from "../../SidebarProvider"
 import { ThemeProvider } from "../../ThemeProvider"
 import * as SC from "./styles"
@@ -13,39 +14,51 @@ interface IColumnLayoutProps {
   content: React.ReactNode
 }
 
+const InnerColumnLayout: FC<IColumnLayoutProps> = ({
+  title,
+  sidebar,
+  content,
+}) => {
+  const { openOnMobile, setOpenOnMobile } = useSidebar()
+  const { lock, unlock } = useLockBodyScroll()
+
+  function openMenu() {
+    setOpenOnMobile(true)
+    lock()
+  }
+
+  function closeMenu() {
+    setOpenOnMobile(false)
+    unlock()
+  }
+
+  return (
+    <Fragment>
+      <GlobalStyles />
+      <SC.Main>
+        <MobileHeader openMenu={openMenu}>{title}</MobileHeader>
+        {sidebar({ className: openOnMobile ? "is-open" : "" })}
+        <SC.MainContent>
+          <SC.Container>{content}</SC.Container>
+        </SC.MainContent>
+      </SC.Main>
+      <SC.Overlay
+        className={openOnMobile ? "is-open" : ""}
+        onClick={closeMenu}
+      />
+    </Fragment>
+  )
+}
+
 export const ColumnLayout: FC<IColumnLayoutProps> = ({
   title,
   sidebar,
   content,
 }) => {
-  const [activeMobileMenu, setActiveMobileMenu] = useState(false)
-  const { lock, unlock } = useLockBodyScroll()
-
-  function openMenu() {
-    setActiveMobileMenu(true)
-    lock()
-  }
-
-  function closeMenu() {
-    setActiveMobileMenu(false)
-    unlock()
-  }
-
   return (
     <ThemeProvider>
       <SidebarProvider>
-        <GlobalStyles />
-        <SC.Main>
-          <MobileHeader openMenu={openMenu}>{title}</MobileHeader>
-          {sidebar({ className: activeMobileMenu ? "is-open" : "" })}
-          <SC.MainContent>
-            <SC.Container>{content}</SC.Container>
-          </SC.MainContent>
-        </SC.Main>
-        <SC.Overlay
-          className={activeMobileMenu ? "is-open" : ""}
-          onClick={closeMenu}
-        />
+        <InnerColumnLayout title={title} sidebar={sidebar} content={content} />
       </SidebarProvider>
     </ThemeProvider>
   )