feat(sidebar): close on mobile upon clicking a link

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>
   )
 }