chore: update layout ui

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 />

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 && (

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) => {

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;
+}