diff --git a/src/components/ArchivesSidebar/index.tsx b/src/components/ArchivesSidebar/index.tsx index 10559a8..07e5d32 100644 --- a/src/components/ArchivesSidebar/index.tsx +++ b/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 ( - + { + setOpenOnMobile(false) + unlock() + }} + > {humanize(item.title)} ) @@ -32,5 +45,11 @@ export const ArchivesSidebar: FC> = props => { const tree = useBuildTree(archives, "/archives") const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree) - return {sortedTree.map(plantTree)} + return ( + + {sortedTree.map(node => ( + + ))} + + ) } diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx index 03fea4a..f40d111 100644 --- a/src/components/ResourcesSidebar/index.tsx +++ b/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([ }), ]) -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 ( - + { + setOpenOnMobile(false) + unlock() + }} + > {humanize(item.title)} ) @@ -79,7 +99,11 @@ function Folder({ item }: { item: IFolder }) { {humanize(item.title)} - {sortedChildren.map(node => plantTree(node))} + + {sortedChildren.map(node => ( + + ))} + ) } @@ -104,7 +128,11 @@ const FirstLevelFolder = memo( {humanize(item.title)} - {sortedChildren.map(node => plantTree(node))} + + {sortedChildren.map(node => ( + + ))} + ) } @@ -117,7 +145,9 @@ export const ResourcesSidebar: FC> = props => { return ( - {sortedTree.map((node, index) => plantTree(node, index, true))} + {sortedTree.map((node, index) => ( + + ))} ) }