From 66324b3a890cdda07e0932e35b005bdf5ba8d8b8 Mon Sep 17 00:00:00 2001
From: Sohee Lim <limsohee1002@gmail.com>
Date: Wed, 13 Nov 2024 16:29:13 -0500
Subject: [PATCH] feat: add layout and get sidebar data

---
 src/components/Sidebar/index.tsx | 31 +++++++++++++++++
 src/theme/DocSidebarItem.tsx     | 29 ---------------
 src/theme/Layout.tsx             | 24 +++++++++++++
 src/theme/Navbar.tsx             | 60 +++++++++++++++++---------------
 tailwind.config.js               |  1 +
 5 files changed, 88 insertions(+), 57 deletions(-)
 create mode 100644 src/components/Sidebar/index.tsx
 delete mode 100644 src/theme/DocSidebarItem.tsx
 create mode 100644 src/theme/Layout.tsx

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
new file mode 100644
index 0000000000..a1e97908ab
--- /dev/null
+++ b/src/components/Sidebar/index.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react'
+
+import { useDocsData } from '@docusaurus/plugin-content-docs/client'
+
+const Sidebar: FC = () => {
+  React.useEffect(() => {
+    const main = document.getElementById('new-main')
+    const sidebars = main.getElementsByTagName('aside')
+    Array.from(sidebars).map((sidebar) => {
+      if (sidebar.id !== 'new-sidebar') {
+        sidebar.remove()
+      }
+    })
+  }, [])
+  const visibleItems = useDocsData(undefined)
+  console.log('!!!', visibleItems)
+  return (
+    <aside id="new-sidebar" className="w-sidebar-w">
+      <div>new sidebar</div>
+      <div>new sidebar</div>
+      <div>new sidebar</div>
+      <div>new sidebar</div>
+      <div>new sidebar</div>
+      <div>new sidebar</div>
+      <div>new sidebar</div>
+      <div>new sidebar</div>
+    </aside>
+  )
+}
+
+export default Sidebar
diff --git a/src/theme/DocSidebarItem.tsx b/src/theme/DocSidebarItem.tsx
deleted file mode 100644
index bb5c2d096e..0000000000
--- a/src/theme/DocSidebarItem.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import OriginalDocSidebarItem from '@theme-original/DocSidebarItem'
-import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, SharedEventName } from '@uniswap/analytics-events'
-import React from 'react'
-
-const DOCUSAURUS_LINK_ITEM_TYPE = 'link'
-
-export default function DocSidebarItem(props: { item }) {
-  return (
-    <>
-      <TraceEvent
-        events={[BrowserEvent.onClick]}
-        element={props.item.href}
-        name={SharedEventName.MENU_CLICKED}
-        shouldLogImpression={props.item.type === DOCUSAURUS_LINK_ITEM_TYPE}
-      >
-        {/* Required for onClick to register */}
-        <div
-          onClick={(event) => {
-            //  Prevents the analytics event from being fired for encapsulating menu items, limiting to only the most granular element
-            event.stopPropagation()
-          }}
-        >
-          <OriginalDocSidebarItem {...props} />
-        </div>
-      </TraceEvent>
-    </>
-  )
-}
diff --git a/src/theme/Layout.tsx b/src/theme/Layout.tsx
new file mode 100644
index 0000000000..e5e0052174
--- /dev/null
+++ b/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
diff --git a/src/theme/Navbar.tsx b/src/theme/Navbar.tsx
index 0a6ec905b4..b8fd3daa08 100644
--- a/src/theme/Navbar.tsx
+++ b/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 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 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>
+    </>
   )
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index c02a64054d..0e4fd4bdf1 100644
--- a/tailwind.config.js
+++ b/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)',