diff --git a/packages/arch/docs/package.json b/packages/arch/docs/package.json index 0b8a3b405b7..a7ee6813c3e 100644 --- a/packages/arch/docs/package.json +++ b/packages/arch/docs/package.json @@ -26,7 +26,7 @@ "@arch-ui/typography": "^0.0.15", "@emotion/core": "^10.0.27", "@emotion/styled": "^10.0.27", - "@reach/router": "^1.2.1", + "@reach/router": "^1.3.3", "clipboard-copy": "^3.0.0", "gatsby": "^2.13.25", "react": "^16.13.0" diff --git a/website/package.json b/website/package.json index 27772a34f87..d5490ea2631 100644 --- a/website/package.json +++ b/website/package.json @@ -26,6 +26,7 @@ "@mapbox/rehype-prism": "^0.3.1", "@mdx-js/mdx": "^1.0.20", "@mdx-js/react": "^1.0.20", + "@reach/router": "^1.3.3", "@reach/skip-nav": "^0.1.2", "@sindresorhus/slugify": "^0.6.0", "facepaint": "^1.2.1", diff --git a/website/src/components/SidebarNav.js b/website/src/components/SidebarNav.js index 4f205df11c0..4d048ffd847 100644 --- a/website/src/components/SidebarNav.js +++ b/website/src/components/SidebarNav.js @@ -1,55 +1,79 @@ /** @jsx jsx */ -import React, { Fragment } from 'react'; // eslint-disable-line no-unused-vars +import React, { useMemo, Fragment } from 'react'; // eslint-disable-line no-unused-vars import { Link } from 'gatsby'; import { colors, gridSize } from '@arch-ui/theme'; import { jsx } from '@emotion/core'; +import { Location } from '@reach/router'; import { useNavData } from '../utils/hooks'; export const SidebarNav = () => { const navData = useNavData(); return ( - + + {({ location: { pathname } }) => ( + + )} + + ); +}; + +const NavGroup = ({ navGroup, pathname }) => { + const sectionId = `docs-menu-${navGroup.navTitle}`; + + const isPageInGroupActive = useMemo(() => { + let paths = []; + + navGroup.pages.forEach(i => paths.push(i.path)); + + if (navGroup.subNavs.length) { + navGroup.subNavs.forEach(group => group.pages.forEach(i => paths.push(i.path))); + } + + return paths.some(i => i === pathname); + }, [pathname]); + + return ( +
+ + {navGroup.navTitle.replace('-', ' ')} + + + {navGroup.pages.map(node => { + return ( + + {node.context.pageTitle} + + ); + })} + {navGroup.subNavs.length ? ( +
  • + {navGroup.subNavs.map(navGroup => { + return ( + + + {navGroup.navTitle.replace('-', ' ')} + + + {navGroup.pages.map(node => { + return ( + + {node.context.pageTitle} + + ); + })} + + + ); + })} +
    • + ) : null} +     +
    ); }; @@ -114,6 +138,7 @@ const ListItem = props => ( fontWeight: 500, }, }} + activeClassName="docSearch-lvl1" {...props} /> diff --git a/website/src/templates/docs.js b/website/src/templates/docs.js index c24ce5b20b5..09557bae801 100644 --- a/website/src/templates/docs.js +++ b/website/src/templates/docs.js @@ -60,13 +60,11 @@ export default function Template({ {({ sidebarOffset, sidebarIsVisible }) => ( - -
    - - - {body} - -
    + + + + {body} +

    Have you found a mistake, something that is missing, or could be improved on this diff --git a/website/src/templates/index.js b/website/src/templates/index.js index f3a14b9c8f6..63402d35493 100644 --- a/website/src/templates/index.js +++ b/website/src/templates/index.js @@ -78,13 +78,11 @@ export default function Template({ -

    - - - {body} - - {renderNavSection(fields.navGroup)} -
    + + + {body} + + {renderNavSection(fields.navGroup)}     )} diff --git a/website/src/templates/layout.js b/website/src/templates/layout.js index 552717af37b..19a716caeda 100644 --- a/website/src/templates/layout.js +++ b/website/src/templates/layout.js @@ -89,7 +89,7 @@ export const Layout = ({ children }) => { const layoutGutter = gridSize * 4; export const Content = props => ( -
    -
    - - - {body} - - -
    + + + {body} + +     )} diff --git a/yarn.lock b/yarn.lock index 4a1329f5bbf..252851a5996 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2942,7 +2942,7 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA= -"@reach/router@^1.1.1", "@reach/router@^1.2.1": +"@reach/router@^1.1.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e" integrity sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ== @@ -2953,6 +2953,16 @@ react-lifecycles-compat "^3.0.4" warning "^3.0.0" +"@reach/router@^1.3.3": + version "1.3.3" + resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db" + integrity sha512-gOIAiFhWdiVGSVjukKeNKkCRBLmnORoTPyBihI/jLunICPgxdP30DroAvPQuf1eVfQbfGJQDJkwhJXsNPMnVWw== + dependencies: + create-react-context "0.3.0" + invariant "^2.2.3" + prop-types "^15.6.1" + react-lifecycles-compat "^3.0.4" + "@reach/skip-nav@^0.1.2": version "0.1.2" resolved "https://registry.yarnpkg.com/@reach/skip-nav/-/skip-nav-0.1.2.tgz#3a154d834c970577117bf6f56b3acc5492d4b8f2" @@ -7188,6 +7198,14 @@ create-react-class@^15.5.1: loose-envify "^1.3.1" object-assign "^4.1.1" +create-react-context@0.3.0, create-react-context@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c" + integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw== + dependencies: + gud "^1.0.0" + warning "^4.0.3" + create-react-context@^0.1.5: version "0.1.6" resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.1.6.tgz#0f425931d907741127acc6e31acb4f9015dd9fdc" @@ -7201,14 +7219,6 @@ create-react-context@^0.2.1: fbjs "^0.8.0" gud "^1.0.0" -create-react-context@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c" - integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw== - dependencies: - gud "^1.0.0" - warning "^4.0.3" - cross-env@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.0.tgz#5a3b2ddce51ec713ea58f2fb79ce22e65b4f5479"