diff --git a/src/LocationProvider.tsx b/src/LocationProvider.tsx index 84816bc..4b8fd92 100644 --- a/src/LocationProvider.tsx +++ b/src/LocationProvider.tsx @@ -1,9 +1,14 @@ import { WindowLocation } from "@reach/router" import React, { FC, PropsWithChildren, useMemo } from "react" +function appendSlashToPath(path: string): string { + return path.endsWith("/") ? path : `${path}/` +} + export interface ILocationContextInterface { location: WindowLocation | void isHome: boolean + isMatchingPath: (path: string) => boolean } interface ILocationProviderProps { @@ -21,6 +26,11 @@ export const LocationProvider: FC< () => ({ location, isHome: location ? location.pathname === "/" : false, + isMatchingPath: (path: string) => { + return location + ? appendSlashToPath(location.pathname).startsWith(path) + : false + }, }), [location] ) diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx index 001451d..76c6953 100644 --- a/src/components/ResourcesSidebar/index.tsx +++ b/src/components/ResourcesSidebar/index.tsx @@ -10,6 +10,7 @@ import { ThemeToggler } from "../ThemeToggler" import useSidebar from "./../../hooks/useSidebar" import * as SC from "./styles" import useBuildTree from "./useBuildTree" +import useMatchingPath from "./useMatchingPath" const ALL_RESOURCES = graphql` query { @@ -49,6 +50,10 @@ function plantTree(item: IFileOrFolder, index?: number, firstLevel?: boolean) { function Folder({ item }: { item: IFolder }) { const [collapsed, setCollapse] = useState(true) + useMatchingPath(item.path, () => { + setCollapse(false) + }) + function toggleCollapse() { setCollapse(prevState => !prevState) } @@ -66,6 +71,11 @@ function Folder({ item }: { item: IFolder }) { const FirstLevelFolder = memo( ({ item, index }: { item: IFolder; index: number }) => { const { current, setCurrent } = useSidebar() + + useMatchingPath(item.path, () => { + setCurrent(index) + }) + const collapsed = current !== index return ( diff --git a/src/components/ResourcesSidebar/useMatchingPath.tsx b/src/components/ResourcesSidebar/useMatchingPath.tsx new file mode 100644 index 0000000..a0db98e --- /dev/null +++ b/src/components/ResourcesSidebar/useMatchingPath.tsx @@ -0,0 +1,12 @@ +import { useEffect } from "react" +import useLocation from "../../hooks/useLocation" + +export default function useMatchingPath(path: string, callback: () => void) { + const { isMatchingPath } = useLocation() + + useEffect(() => { + if (isMatchingPath(path)) { + callback() + } + }, []) +}