feat: sidebar hide

docs_src/src/components/documentation/Layout.jsx

@@ -5,23 +5,46 @@ import { BottomNavbar } from '@/components/documentation/BottomNavbar'
 import { Navigation } from '@/components/documentation/Navigation'
 import { Prose } from '@/components/documentation/Prose'
 import { SectionProvider } from '@/components/documentation/SectionProvider'
+import { useState, useEffect } from 'react'
+import { Container } from '../Container'
+import { useIsInsideMobileNavigation } from '@/components/documentation/MobileNavigation'
 
 export function Layout({ children, sections = [] }) {
+  const [showSideBar, setShowSideBar] = useState(true)
+  const [divMargin, setDivMargin] = useState('lg:ml-72 xl:ml-80')
+
+  useEffect(() => {
+    if (showSideBar) {
+      setDivMargin('lg:ml-72 xl:ml-80')
+    } else {
+      setDivMargin('lg:ml-8 xl:ml-8')
+    }
+  }, [showSideBar])
+
+  let isInsideMobileNavigation = useIsInsideMobileNavigation() // TODO: always returns false
+
   return (
     <SectionProvider sections={sections}>
-      <div className="lg:ml-72 xl:ml-80">
-        <motion.header
-          layoutScroll
-          className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
-        >
-          <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-white/10 lg:px-6 lg:pb-8 xl:w-80">
-            <BottomNavbar />
-
-            <Navigation className="hidden lg:mt-32 lg:block" />
-          </div>
-        </motion.header>
+      <div className={divMargin}>
+        {showSideBar && (
+          <motion.header
+            layoutScroll
+            className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
+          >
+            <div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-white/10 lg:px-6 lg:pb-8 xl:w-80">
+              <BottomNavbar />
+
+              { !isInsideMobileNavigation && <Navigation className="lg:mt-8 lg:block" /> }
+            </div>
+          </motion.header>
+        )}
+
         <div className="relative px-4 sm:px-6 lg:px-8">
           <main className="py-16">
+            { !isInsideMobileNavigation && SideBarToggleIcon(showSideBar, () => {
+              setShowSideBar(!showSideBar)
+            })}
+
             <Prose>{children}</Prose>
           </main>
           <Footer />
@@ -30,3 +53,41 @@ export function Layout({ children, sections = [] }) {
     </SectionProvider>
   )
 }
+
+function SideBarToggleIcon(showSideBar, onClick) {
+  return (
+    <div className="bottom-4 left-4 z-40" style={{ position: 'fixed' }}>
+      <div className="flex md:flex-1">
+        <button className="border-1 group rounded-full bg-zinc-800/90 px-2 py-2 backdrop-blur transition hover:ring-white/20 ">
+          {showSideBar ? (
+            <LeftIcon
+              className="h-6 w-6 fill-zinc-700"
+              onClick={() => onClick()}
+            />
+          ) : (
+            <RightIcon
+              className="h-6 w-6 fill-zinc-700"
+              onClick={() => onClick()}
+            />
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function LeftIcon(props) {
+  return (
+    <svg viewBox="0 -960 960 960" {...props}>
+      <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" />
+    </svg>
+  )
+}
+
+function RightIcon(props) {
+  return (
+    <svg viewBox="0 -960 960 960" {...props}>
+      <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
+    </svg>
+  )
+}