From 5fac82c20d34571ecb769bb2047ff928977c06d8 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <70828596+Isaiah-Hamilton@users.noreply.github.com>
Date: Tue, 31 May 2022 23:51:40 -0400
Subject: [PATCH] chore: update layout ui

---
 apps/temp-docs/components/layouts/Layout.tsx | 36 +++++++++++---------
 apps/temp-docs/components/nav/NavBar.tsx     |  2 +-
 apps/temp-docs/components/nav/SideBar.tsx    |  2 +-
 apps/temp-docs/styles/main.css               | 30 ++++++++++++++++
 4 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/apps/temp-docs/components/layouts/Layout.tsx b/apps/temp-docs/components/layouts/Layout.tsx
index 4ff31541aac..851373ce352 100644
--- a/apps/temp-docs/components/layouts/Layout.tsx
+++ b/apps/temp-docs/components/layouts/Layout.tsx
@@ -40,24 +40,28 @@ const DocsLayout = ({
 
       <main>
         <NavBar currentPage={currentPage} />
-        <div className="flex flex-row">
+        <div className="flex w-full flex-row">
           <SideBar menuItems={menuItems} />
-          <div className="mx-auto grid w-full max-w-7xl grid-cols-12">
-            <article className="prose dark:prose-dark dark:bg-scale-200 col-span-8 max-w-none p-8">
-              {children}
-            </article>
-            <div className="prose dark:bg-scale-200 col-span-4 max-w-none p-8">
-              <h5>On this page</h5>
-              {toc
-                ? toc.json.map((item: any) => {
-                    return (
-                      <li>
-                        <a href={`#${item.slug}`}>{item.content}</a>
-                      </li>
-                    )
-                  })
-                : 'Please note: No TOC on this page'}
+          <div className="docs-width flex w-full grid-cols-12 justify-between p-4 pb-8">
+            <div className="w-full p-4">
+              <article className="prose dark:prose-dark dark:bg-scale-200 width-full">
+                {children}
+              </article>
             </div>
+            {toc && (
+              <div className="prose border-scale-400 dark:bg-scale-200 thin-scrollbar table-of-contents-height w-1/4 border-l px-4">
+                <h5>On this page</h5>
+                <ul className='list-none pl-2 text-[0.8rem]'>
+                {toc.json.map((item: any, i: number) => {
+                  return (
+                    <li key={i}>
+                      <a href={`#${item.slug}`}>{item.content}</a>
+                    </li>
+                  )
+                })}
+                </ul>
+              </div>
+            )}
           </div>
         </div>
         <Footer />
diff --git a/apps/temp-docs/components/nav/NavBar.tsx b/apps/temp-docs/components/nav/NavBar.tsx
index 1e22048f779..35c40ab640d 100644
--- a/apps/temp-docs/components/nav/NavBar.tsx
+++ b/apps/temp-docs/components/nav/NavBar.tsx
@@ -34,7 +34,7 @@ const NavBar = ({ currentPage }: { currentPage: string }) => {
   return (
     <nav className="dark:border-scale-400 dark:bg-scale-200 sticky top-0 z-10 flex h-[72px] items-center justify-between border-b bg-white p-4 backdrop-blur backdrop-filter">
       <div className="flex items-center">
-        <button className="mr-4 block lg:hidden stroke-2">
+        <button className="mr-4 block stroke-2 lg:hidden">
           <IconMenu className="text-scale-1100" />
         </button>
         {mounted && (
diff --git a/apps/temp-docs/components/nav/SideBar.tsx b/apps/temp-docs/components/nav/SideBar.tsx
index 4a6622409ad..7ef6b517034 100644
--- a/apps/temp-docs/components/nav/SideBar.tsx
+++ b/apps/temp-docs/components/nav/SideBar.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
 const SideBar = ({ menuItems }: { menuItems: any }) => {
   const { asPath } = useRouter()
   return (
-    <div className="dark:bg-scale-200 dark:border-scale-400 thin-scrollbar sticky top-0 flex h-screen w-[400px] overflow-y-scroll border-r py-4">
+    <div className="dark:bg-scale-200 dark:border-scale-400 thin-scrollbar sidebar-width sticky top-0 flex h-screen overflow-y-scroll border-r py-4">
       <Menu>
         <div>
           {Object.keys(menuItems).map((key) => {
diff --git a/apps/temp-docs/styles/main.css b/apps/temp-docs/styles/main.css
index e9228cb9acf..37765d87dd6 100644
--- a/apps/temp-docs/styles/main.css
+++ b/apps/temp-docs/styles/main.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --sidebar-width: 300px;
+}
+
 body {
   @apply bg-white dark:bg-[#1c1c1c] !important;
 }
@@ -15,6 +19,32 @@ a {
   text-decoration: none !important;
 }
 
+article h1 {
+  margin-bottom: 3rem !important;
+  font-size: 3rem !important;
+  font-weight: 400 !important;
+}
+
 .thin-scrollbar {
   scrollbar-width: thin;
 }
+
+.sidebar-width {
+  width: var(--sidebar-width);
+}
+
+.docs-width {
+  max-width: calc(100% - var(--sidebar-width));
+}
+
+.table-of-contents-height {
+  max-height: calc(100vh - 3.75rem - 2rem);
+  overflow-y: auto;
+  position: sticky;
+  top: calc(3.75rem + 1rem);
+}
+
+.width-full {
+  width: 100% !important;
+  max-width: max-content !important;
+}