From ea57ea7815a148b42cc4342f61ec90a6219efb52 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Fri, 17 Jan 2020 23:17:05 -0500 Subject: [PATCH 1/2] refact(sidebar): move mobile state to context provider --- src/SidebarProvider.tsx | 7 +++- src/layouts/ColumnLayout/index.tsx | 65 ++++++++++++++++++------------ 2 files changed, 45 insertions(+), 27 deletions(-) diff --git a/src/SidebarProvider.tsx b/src/SidebarProvider.tsx index 02bb1e4..917a635 100644 --- a/src/SidebarProvider.tsx +++ b/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( @@ -11,13 +13,16 @@ export const SidebarContext = React.createContext { const [current, setCurrent] = useState(0) + const [openOnMobile, setOpenOnMobile] = useState(false) const memoizedContextValue = useMemo( () => ({ current, setCurrent, + openOnMobile, + setOpenOnMobile, }), - [current, setCurrent] + [current, setCurrent, openOnMobile, setOpenOnMobile] ) return ( diff --git a/src/layouts/ColumnLayout/index.tsx b/src/layouts/ColumnLayout/index.tsx index 36ca046..3b4c00f 100644 --- a/src/layouts/ColumnLayout/index.tsx +++ b/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 = ({ + title, + sidebar, + content, +}) => { + const { openOnMobile, setOpenOnMobile } = useSidebar() + const { lock, unlock } = useLockBodyScroll() + + function openMenu() { + setOpenOnMobile(true) + lock() + } + + function closeMenu() { + setOpenOnMobile(false) + unlock() + } + + return ( + + + + {title} + {sidebar({ className: openOnMobile ? "is-open" : "" })} + + {content} + + + + + ) +} + export const ColumnLayout: FC = ({ title, sidebar, content, }) => { - const [activeMobileMenu, setActiveMobileMenu] = useState(false) - const { lock, unlock } = useLockBodyScroll() - - function openMenu() { - setActiveMobileMenu(true) - lock() - } - - function closeMenu() { - setActiveMobileMenu(false) - unlock() - } - return ( - - - {title} - {sidebar({ className: activeMobileMenu ? "is-open" : "" })} - - {content} - - - + ) From 3f08458b03372053374881f65a74a9dc6b50e17d Mon Sep 17 00:00:00 2001 From: Jean-Philippe Sirois Date: Fri, 17 Jan 2020 23:38:30 -0500 Subject: [PATCH 2/2] feat(sidebar): close on mobile upon clicking a link --- src/components/ArchivesSidebar/index.tsx | 25 ++++++++++++-- src/components/ResourcesSidebar/index.tsx | 40 ++++++++++++++++++++--- 2 files changed, 57 insertions(+), 8 deletions(-) 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) => ( + + ))} ) }