From af6501300e30097df1882ff5d838c9d83eb15e56 Mon Sep 17 00:00:00 2001
From: Paul Copplestone <pcopplestone@gmail.com>
Date: Mon, 28 Oct 2019 12:09:18 +0000
Subject: [PATCH] Adding a mobile sidebar

---
 packages/web/components/NavbarDocs.js         |  9 +--
 packages/web/components/layouts/DocsLayout.js | 75 ++++++++++++++-----
 packages/web/pages/_document.js               |  2 +-
 packages/web/styles/style.scss                |  3 +-
 4 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/packages/web/components/NavbarDocs.js b/packages/web/components/NavbarDocs.js
index bb588bacafd..80782c510f6 100644
--- a/packages/web/components/NavbarDocs.js
+++ b/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>
diff --git a/packages/web/components/layouts/DocsLayout.js b/packages/web/components/layouts/DocsLayout.js
index e7bd914d9ac..b2593ac74c5 100644
--- a/packages/web/components/layouts/DocsLayout.js
+++ b/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>
-  )
-}
diff --git a/packages/web/pages/_document.js b/packages/web/pages/_document.js
index 1d533656958..b1ed9739670 100644
--- a/packages/web/pages/_document.js
+++ b/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>
diff --git a/packages/web/styles/style.scss b/packages/web/styles/style.scss
index 015064e814e..f9ae2246eb0 100644
--- a/packages/web/styles/style.scss
+++ b/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;
   }