Feat/side nav menu

src/components/Sidebar/index.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react'
+
+import useGlobalData from '@docusaurus/useGlobalData'
+
+const Sidebar: FC = () => {
+  React.useEffect(() => {
+    // remove original sidebar
+    const main = document.getElementById('new-main')
+    const sidebars = main.getElementsByTagName('aside')
+    Array.from(sidebars).map((sidebar) => {
+      if (sidebar.id !== 'new-sidebar') {
+        sidebar.remove()
+      }
+    })
+  }, [])
+
+  const globalData = useGlobalData()
+  console.log('globalData', globalData)
+  return (
+    <aside id="new-sidebar" className="w-sidebar-w">
+      Sidebar
+    </aside>
+  )
+}
+
+export default Sidebar

src/theme/Layout.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from 'react'
+
+import LayoutProvider from '@theme/Layout/Provider'
+import { PageMetadata } from '@docusaurus/theme-common'
+import Navbar from '@theme/Navbar'
+import Footer from '@theme/Footer'
+import type { Props } from '@theme/Layout'
+import Sidebar from '../components/Sidebar'
+
+const Layout: FC<Props> = ({ title, description, children }) => {
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+      <Navbar />
+      <main id="new-main" className="pt-nav-h min-h-screen flex flex-row">
+        <Sidebar />
+        <div className="">{children}</div>
+      </main>
+      <Footer />
+    </LayoutProvider>
+  )
+}
+
+export default Layout

src/theme/Navbar.tsx

@@ -6,36 +6,40 @@ import ThemeSwitch from '../components/ThemeSwitch'
 
 const Navbar: FC = () => {
   return (
-    <nav className="Navbar fixed left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1">
-      <div className="w-full h-nav-h flex flex-row justify-between items-center px-4 py-[1.15625rem] sm:px-[0.9375rem] sm:py-3">
-        <a className="flex flex-row items-center" href="/" target="_self" aria-label="Uniswap Documentation Home">
-          <MiniUnicon className="w-8 h-8 mr-3" />
-          <p className="Navbar__logo-text body-1 text-light-accent-1 dark:text-dark-accent-1 mb-0">Uniswap Docs</p>
-        </a>
-        <div className="flex flex-row items-center">
-          <OriginalSearchbar />
-          <button
-            className="ml-3 flex items-center md:hidden"
-            onClick={() => {
-              console.log('open mobile menu')
-            }}
-          >
-            <Menu />
-          </button>
-        </div>
-        <div className="hidden md:flex flex-row items-center">
-          <ThemeSwitch />
-          <a
-            className="button-label-4 py-2 px-3 bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered hover:dark:bg-dark-accent-2-hovered transition rounded-small ml-2"
-            href="https://docs.google.com/forms/d/e/1FAIpQLSdjSkZam8KiatL9XACRVxCHjDJjaPGbls77PCXDKFn4JwykXg/viewform"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <span className="text-light-accent-1 dark:text-dark-accent-1">Submit Feedback</span>
+    <>
+      {/* docusaurus expects class name "navbar". adding fake div for handling error that is looking for "navbar" class */}
+      <div className="navbar hidden"></div>
+      <nav className="Navbar fixed left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1">
+        <div className="w-full h-nav-h flex flex-row justify-between items-center px-4 py-[1.15625rem] sm:px-[0.9375rem] sm:py-3">
+          <a className="flex flex-row items-center" href="/" target="_self" aria-label="Uniswap Documentation Home">
+            <MiniUnicon className="w-8 h-8 mr-3" />
+            <p className="Navbar__logo-text body-1 text-light-accent-1 dark:text-dark-accent-1 mb-0">Uniswap Docs</p>
           </a>
+          <div className="flex flex-row items-center">
+            <OriginalSearchbar />
+            <button
+              className="ml-3 flex items-center md:hidden"
+              onClick={() => {
+                console.log('open mobile menu')
+              }}
+            >
+              <Menu />
+            </button>
+          </div>
+          <div className="hidden md:flex flex-row items-center">
+            <ThemeSwitch />
+            <a
+              className="button-label-4 py-2 px-3 bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered hover:dark:bg-dark-accent-2-hovered transition rounded-small ml-2"
+              href="https://docs.google.com/forms/d/e/1FAIpQLSdjSkZam8KiatL9XACRVxCHjDJjaPGbls77PCXDKFn4JwykXg/viewform"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <span className="text-light-accent-1 dark:text-dark-accent-1">Submit Feedback</span>
+            </a>
+          </div>
         </div>
-      </div>
-    </nav>
+      </nav>
+    </>
   )
 }
 

tailwind.config.js

@@ -73,6 +73,7 @@ module.exports = {
         'gap-small': rem(8),
         'gap-x-small': rem(4),
         'nav-h': rem(72),
+        'sidebar-w': rem(240),
       },
       boxShadow: {
         'light-short': '0px 1px 6px 2px rgba(0, 0, 0, 0.03), 0px 1px 2px 0px rgba(0, 0, 0, 0.02)',