Docs improvements

- Updates to latest components
- Simplifies layout code
- Improves menu behaviour
  - Separates open/close of menu from navigation
  - Closes panel on navigation when in temporary mode
- Removes redundant commands form theme package.json

Author: stuarthendren

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Committed <opensource@committed.io>",
   "license": "MIT",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@committed/gatsby-theme-docs-workspace",
   "private": true,
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@committed/gatsby-theme-docs",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "author": "Committed <opensource@committed.io>",
   "license": "MIT",
@@ -15,9 +15,6 @@
   "scripts": {
     "format": "prettier --write '**/{*.js,*.ts,*.tsx,*.json,*.md,*.mdx}'",
     "format-check": "prettier --check '**/{**/*.js,*.ts,*.tsx,*.json,*.md,*.mdx}'",
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "start": "npm run develop",
     "deploy": "cp ../README.md .  ; npm publish  --access public"
   },
   "prettier": {
@@ -30,7 +27,7 @@
     "react-dom": "^16.13.1"
   },
   "dependencies": {
-    "@committed/components": "^3.0.2",
+    "@committed/components": "^3.2.0",
     "@committed/layout": "^2.0.1",
     "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.3.0",
     "@material-ui/core": "^4.9.12",

theme/src/components/Header.tsx

@@ -28,13 +28,7 @@ const ThemedLogo = () => {
   return <Logo size={24} className={classes.color} />
 }
 
-export const Header = ({
-  themeChoice,
-  toggleThemeChoice,
-}: {
-  themeChoice: ThemeChoice
-  toggleThemeChoice: () => void
-}) => {
+export const Header = () => {
   const {
     site: {
       siteMetadata: {
@@ -105,11 +99,7 @@ export const Header = ({
           </Button>
         </ClearLink>
       ) : null}
-      <ThemeSwitch
-        themeChoice={themeChoice}
-        toggleThemeChoice={toggleThemeChoice}
-        variant="celestial"
-      />
+      <ThemeSwitch />
       {helpUrl !== '' ? (
         <a href={helpUrl}>
           <Icons.Help />

theme/src/components/Layout.tsx

@@ -3,7 +3,6 @@ import {
   CodeStyle,
   Container,
   ThemeProvider,
-  useThemeChoice,
   fonts,
 } from '@committed/components'
 import { Content, Header as LayoutHeader, Nav, Root } from '@committed/layout'
@@ -43,7 +42,6 @@ export const Layout = ({
   ...props
 }: LayoutProps) => {
   const [collapsed, setCollapsed] = useState((location && location.state) || {})
-  const [themeChoice, toggleThemeChoice, componentMounted] = useThemeChoice()
 
   useHotkeys('shift+home', () => {
     navigate('/')
@@ -58,7 +56,7 @@ export const Layout = ({
     })
   }
 
-  const component = componentMounted ? (
+  return (
     <DocsContext.Provider
       value={{
         pathname: location.pathname,
@@ -68,7 +66,6 @@ export const Layout = ({
       }}
     >
       <ThemeProvider
-        choice={themeChoice}
         createFonts={() => ({
           ...fonts.defaultFonts,
           display: {
@@ -103,10 +100,7 @@ export const Layout = ({
           }}
         >
           <LayoutHeader>
-            <Header
-              themeChoice={themeChoice}
-              toggleThemeChoice={toggleThemeChoice}
-            />
+            <Header />
           </LayoutHeader>
           <Nav>
             <Sidebar location={location} current={id} />
@@ -128,6 +122,5 @@ export const Layout = ({
         </Root>
       </ThemeProvider>
     </DocsContext.Provider>
-  ) : null
-  return component
+  )
 }

theme/src/components/Sidebar.tsx

@@ -2,13 +2,8 @@ import React from 'react'
 import { Tree } from './Tree'
 import { ClearLink } from './Link'
 import { useStaticQuery, graphql } from 'gatsby'
-import {
-  Icons,
-  Divider,
-  List,
-  ListItem,
-  ListItemText
-} from '@committed/components'
+import { Icons, Divider, List } from '@committed/components'
+import { NavListItem } from '@committed/layout'
 
 export interface SidebarProps {
   location: any
@@ -19,8 +14,8 @@ export const Sidebar = ({ location, current }: SidebarProps) => {
   const {
     menu: { data: data },
     site: {
-      siteMetadata: { sidebar: sidebar }
-    }
+      siteMetadata: { sidebar: sidebar },
+    },
   } = useStaticQuery(
     graphql`
       query MenuQuery {
@@ -52,13 +47,13 @@ export const Sidebar = ({ location, current }: SidebarProps) => {
       <Divider />
       <List>
         {sidebar.links
-          .filter(link => link.link !== '' && link.text !== '')
+          .filter((link) => link.link !== '' && link.text !== '')
           .map((link, key) => (
             <ClearLink key={key} href={link.link}>
-              <ListItem button>
-                <ListItemText primary={link.text} />
-                <Icons.ExitToApp color="disabled" />
-              </ListItem>
+              <NavListItem
+                text={link.text}
+                icon={<Icons.ExitToApp color="disabled" />}
+              />
             </ClearLink>
           ))}
       </List>

theme/src/components/TreeNode.tsx

@@ -4,12 +4,15 @@ import {
   List,
   ListItem,
   ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
   Theme,
-  useTheme
+  useTheme,
 } from '@committed/components'
 import React from 'react'
 import { Info, Item } from '../types'
 import { firstUrl } from '../util/tree'
+import { useLayout } from '@committed/layout'
 
 export interface TreeNodeProps extends Item {
   isActive: (id: string) => boolean
@@ -35,38 +38,50 @@ export const TreeNode = React.memo(
     ...rest
   }: TreeNodeProps) => {
     const theme = useTheme<Theme>()
+    const { navVariant, setOpen } = useLayout()
     const url = firstUrl({ id, label, items, info })
     const isCollapsed = collapsed[id] || false
     const hasChildren = items.length !== 0
     const title = info ? info.title : label
     const active = isActive(id)
+
+    const handleClick = () => {
+      if (navVariant === 'temporary') {
+        setOpen(false)
+      }
+      navigate(url)
+    }
+
     return (
       <>
         <ListItem
           style={{
-            paddingLeft: theme.spacing(2) * (level + 1)
+            paddingLeft: theme.spacing(2) * (level + 1),
           }}
           selected={active}
           button
-          onClick={() => {
-            setCollapsed(id)
-            navigate(url)
-          }}
+          onClick={handleClick}
         >
           <ListItemText
             primary={title}
             primaryTypographyProps={{
-              variant: level === 0 ? 'body1' : 'caption'
+              variant: level === 0 ? 'body1' : 'caption',
             }}
           />
           {title && hasChildren ? (
-            <>
-              {!isCollapsed ? (
-                <Icons.KeyboardArrowDown />
-              ) : (
-                <Icons.KeyboardArrowRight />
-              )}
-            </>
+            <ListItemSecondaryAction>
+              <IconButton
+                onClick={() => setCollapsed(id)}
+                edge="end"
+                aria-label={isCollapsed ? 'expand' : 'collapse'}
+              >
+                {!isCollapsed ? (
+                  <Icons.KeyboardArrowDown />
+                ) : (
+                  <Icons.KeyboardArrowRight />
+                )}
+              </IconButton>
+            </ListItemSecondaryAction>
           ) : null}
         </ListItem>
 

yarn.lock

@@ -939,10 +939,10 @@
   resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz#8ff71d51053cd5ee4981e5a501d80a536244f7fd"
   integrity sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg==
 
-"@committed/components@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@committed/components/-/components-3.0.2.tgz#3e7afa360b511443c9bae054bdd75cc8374b6e83"
-  integrity sha512-zT4XN7RwYJb05b7qin87SVneJ6Cx9fR/ci6+oCca4YlAfwxq13wmEn0056OshutZeeA6pZthTJ8e8UUY4h0kIQ==
+"@committed/components@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@committed/components/-/components-3.2.0.tgz#3e2db6d49390148e2bc97bc218131f59cbc12663"
+  integrity sha512-FmMGpkHsuDO3is/kQuVjuj6As7w2VhWcSJBYnWLUHsm4nxb+n95iYvbI5Zwa3cWoV70tck7jor585/mpgjUzaA==
   dependencies:
     clsx "^1.1.0"
     deepmerge "^4.2.2"