Adding a mobile sidebar

packages/web/components/NavbarDocs.js

@@ -2,19 +2,12 @@ import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-export default function Navbar({}) {
+export default function Navbar({ }) {
   const router = useRouter()
   let { category } = router.query
   return (
     <nav className="tabs m-none">
       <ul>
-        <li className="is-hidden-tablet">
-          <a>
-            <span className="icon">
-              <i className="fas fa-bars"></i>
-            </span>
-          </a>
-        </li>
         <li className={category == '-' ? 'is-active' : ''}>
           <Link href={`/docs/[category]/[slug]`} as={`/docs/-/about`}>
             <a className="">Supabase</a>

packages/web/components/layouts/DocsLayout.js

@@ -5,8 +5,10 @@ import Footer from '../Footer'
 import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import React, { useState, useEffect } from 'react'
 
 export default function DocsLayout(props) {
+  const [sidebarVisible, toggleSidebar] = useState(false)
   const { sidebar } = props
   return (
     <>
@@ -17,37 +19,76 @@ export default function DocsLayout(props) {
         <Navbar isFullwidth={true} />
         <NavbarDocs />
         <div className="columns m-none is-gapless">
-          <div className="DocsMenuColumn column is-narrow is-hidden-mobile" style={{ width: 250 }}>
-            {Sidebar(sidebar)}
+          <div
+            className="DocsMenuColumn docs-subnav column is-narrow is-hidden-mobile"
+            style={{ width: 250 }}
+          >
+            {Sidebar(sidebar, () => toggleSidebar(false))}
           </div>
           <div className="column">{props.children}</div>
         </div>
-
         <Footer isFullwidth={true} />
+
+        <nav
+          className="navbar is-fixed-bottom has-background-dark is-hidden-tablet"
+          role="navigation"
+          aria-label="sub navigation"
+        >
+          <a className="navbar-brand" onClick={() => toggleSidebar(!sidebarVisible)}>
+            <div className="navbar-item">
+              <h5 className="title is-5">Menu</h5>
+            </div>
+
+            <span
+              role="button"
+              className={sidebarVisible ? 'navbar-burger is-active' : 'navbar-burger'}
+              aria-label="menu"
+              aria-expanded="false"
+            >
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+              <span aria-hidden="true"></span>
+            </span>
+          </a>
+
+          <div className={sidebarVisible ? 'navbar-menu is-active' : 'navbar-menu'}>
+            <div className="navbar-end docs-subnav">
+              {Sidebar(sidebar, () => toggleSidebar(false))}
+              <div className="p-md">
+                <a className="button is-fullwidth" onClick={() => toggleSidebar(!sidebarVisible)}>
+                  Hide
+                </a>
+              </div>
+            </div>
+          </div>
+        </nav>
       </div>
     </>
   )
 }
 
-const Sidebar = sidebar => {
+const Sidebar = (sidebar, onMenuItemClicked) => {
+  const router = useRouter()
+  let { category, slug } = router.query
   return Object.entries(sidebar || []).map(([heading, pages]) => {
     return (
       <div key={heading}>
         <p className="menu-label">{heading}</p>
-        <ul className="menu-list">{pages.map(x => SidebarLink(x))}</ul>
+        <ul className="menu-list">
+          {pages.map(page => (
+            <li key={page.slug}>
+              <Link href={`/docs/[category]/[slug]`} as={`/docs/${category}/${page.slug}`}>
+                <a
+                  className={slug == page.slug ? 'is-active' : ''}
+                  onClick={() => onMenuItemClicked(page)}
+                >
+                  {page.title}
+                </a>
+              </Link>
+            </li>
+          ))}
+        </ul>
       </div>
     )
   })
 }
-
-const SidebarLink = page => {
-  const router = useRouter()
-  let { category, slug } = router.query
-  return (
-    <li key={page.slug}>
-      <Link href={`/docs/[category]/[slug]`} as={`/docs/${category}/${page.slug}`}>
-        <a className={slug == page.slug ? 'is-active' : ''}>{page.title}</a>
-      </Link>
-    </li>
-  )
-}

packages/web/pages/_document.js

@@ -11,7 +11,7 @@ export default class MyDocument extends Document {
           <title>Supabase</title>
         </head>
         <Head />
-        <body>
+        <body className="has-navbar-fixed-bottom ">
           <Main />
           <NextScript />
         </body>

packages/web/styles/style.scss

@@ -289,7 +289,8 @@ h3.has-underline {
 }
 .DocsMenuColumn {
   border-right: 1px solid $border-color !important;
-
+}
+.docs-subnav {
   .menu-label {
     padding: 1rem 1rem 0 1rem;
   }