From ed335b13a5b5fef1bc53dbc69b72bd1dba654cea Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 18 Jan 2023 16:17:38 +0000
Subject: [PATCH] feat: foldable sidebar

---
 src/components/dashboard/DashboardLayout.tsx  | 117 +++++++++---------
 src/components/dashboard/DashboardMain.tsx    |   2 +-
 src/components/dashboard/DashboardSidebar.tsx |  39 +++++-
 3 files changed, 98 insertions(+), 60 deletions(-)

diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx
index 6d89a037..a095b787 100644
--- a/src/components/dashboard/DashboardLayout.tsx
+++ b/src/components/dashboard/DashboardLayout.tsx
@@ -121,68 +121,73 @@ export function DashboardLayout({
           }
         />
       )}
-      <div className="flex">
+      <div className="flex h-screen">
         <DashboardSidebar>
-          {userSite.data?.[0]?.username &&
-            subdomain &&
-            userSite.data[0].username !== subdomain && (
-              <div className="mb-2 px-5 pt-3 pb-2 bg-orange-50 text-center">
-                <div className="mb-2">You are operating</div>
-                <Avatar
-                  images={site.data?.avatars || []}
-                  size={60}
-                  name={site.data?.name}
-                />
-                <span className="flex flex-col justify-center">
-                  <span className="block">{site.data?.name}</span>
-                  <span className="block text-sm text-zinc-400">
-                    @{site.data?.username}
-                  </span>
-                </span>
+          {(isOpen) => (
+            <>
+              {userSite.data?.[0]?.username &&
+                subdomain &&
+                userSite.data[0].username !== subdomain && (
+                  <div className="mb-2 px-5 pt-3 pb-2 bg-orange-50 text-center">
+                    <div className="mb-2">You are operating</div>
+                    <Avatar
+                      images={site.data?.avatars || []}
+                      size={60}
+                      name={site.data?.name}
+                    />
+                    <span className="flex flex-col justify-center">
+                      <span className="block">{site.data?.name}</span>
+                      <span className="block text-sm text-zinc-400">
+                        @{site.data?.username}
+                      </span>
+                    </span>
+                  </div>
+                )}
+              <div className="mb-2 px-5 pt-3 pb-2">
+                <ConnectButton left={true} size="base" />
               </div>
-            )}
-          <div className="mb-2 px-5 pt-3 pb-2">
-            <ConnectButton left={true} size="base" />
-          </div>
 
-          <div className="px-3 space-y-[2px] text-zinc-500">
-            {links.map((link) => {
-              const active =
-                link.href &&
-                link.isActive({
-                  pathname: router.asPath,
-                  href: link.href,
-                })
-              return (
+              <div className="px-3 space-y-[2px] text-zinc-500">
+                {links.map((link) => {
+                  const active =
+                    link.href &&
+                    link.isActive({
+                      pathname: router.asPath,
+                      href: link.href,
+                    })
+                  return (
+                    <UniLink
+                      href={link.href}
+                      key={link.href}
+                      className={clsx(
+                        `flex px-4 h-12 items-center rounded-md space-x-2 w-full transition-colors`,
+                        active
+                          ? `bg-slate-200 font-medium text-slate-800`
+                          : `hover:bg-slate-200 hover:bg-opacity-50`,
+                        !isOpen && "justify-center",
+                      )}
+                      onClick={link.onClick}
+                    >
+                      <span className={clsx(link.icon, "text-lg")}></span>
+                      {isOpen && <span>{link.text}</span>}
+                    </UniLink>
+                  )
+                })}
+              </div>
+
+              <div className="absolute bottom-0 left-0 right-0 h-20 flex items-center px-4">
                 <UniLink
-                  href={link.href}
-                  key={link.href}
-                  className={clsx(
-                    `flex px-4 h-12 items-center rounded-md space-x-2 w-full`,
-                    active
-                      ? `bg-slate-200 font-medium text-slate-800`
-                      : `hover:bg-slate-200 hover:bg-opacity-50`,
-                  )}
-                  onClick={link.onClick}
+                  href={getSiteLink({
+                    subdomain,
+                  })}
+                  className="space-x-2 border rounded-lg bg-slate-100 border-slate-200 text-slate-500 hover:text-accent flex w-full h-12 items-center justify-center transition-colors"
                 >
-                  <span className={clsx(link.icon, "text-lg")}></span>
-                  <span>{link.text}</span>
+                  <span className="i-bi:box-arrow-up-right"></span>
+                  {isOpen && <span>View Site</span>}
                 </UniLink>
-              )
-            })}
-          </div>
-
-          <div className="absolute bottom-0 left-0 right-0 h-20 flex items-center px-4">
-            <UniLink
-              href={getSiteLink({
-                subdomain,
-              })}
-              className="space-x-2 border rounded-lg bg-slate-100 border-slate-200 text-slate-500 hover:text-accent flex w-full h-12 items-center justify-center transition-colors"
-            >
-              <span className="i-bi:box-arrow-up-right"></span>
-              <span>View Site</span>
-            </UniLink>
-          </div>
+              </div>
+            </>
+          )}
         </DashboardSidebar>
         {children}
       </div>
diff --git a/src/components/dashboard/DashboardMain.tsx b/src/components/dashboard/DashboardMain.tsx
index 13c405a3..456a9bcc 100644
--- a/src/components/dashboard/DashboardMain.tsx
+++ b/src/components/dashboard/DashboardMain.tsx
@@ -5,7 +5,7 @@ export const DashboardMain: React.FC<{
   fullWidth?: boolean
 }> = ({ children, fullWidth }) => {
   return (
-    <div className="md:pl-sidebar w-full">
+    <div className="flex-1 overflow-scroll">
       <div
         className={clsx(
           fullWidth
diff --git a/src/components/dashboard/DashboardSidebar.tsx b/src/components/dashboard/DashboardSidebar.tsx
index 70b9e3ac..f3fa55ac 100644
--- a/src/components/dashboard/DashboardSidebar.tsx
+++ b/src/components/dashboard/DashboardSidebar.tsx
@@ -1,10 +1,43 @@
+import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid"
+import { useState, useEffect, useMemo } from "react"
+import { setStorage, getStorage } from "~/lib/storage"
+
 export const DashboardSidebar: React.FC<{
-  children: React.ReactNode
+  children: (isOpen: boolean) => React.ReactNode
 }> = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(true)
+
+  useEffect(() => {
+    const storage = getStorage("sidebar")
+    if (storage) {
+      setIsOpen(storage.isOpen)
+    }
+  }, [])
+
+  useEffect(() => {
+    setStorage("sidebar", {
+      isOpen,
+    })
+  }, [isOpen])
+
   return (
-    <div className="w-sidebar fixed top-0 bottom-0 left-0 bg-slate-50 z-10">
-      {children}
+    <div
+      className={`${
+        isOpen ? `w-sidebar` : "w-20"
+      } relative bg-slate-50 z-10 h-full`}
+    >
+      {children(isOpen)}
       <div className="w-[1px] bg-border absolute top-0 right-0 bottom-0"></div>
+      <div
+        className="absolute top-5 -right-3 bg-accent shadow-button rounded-full cursor-pointer"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {isOpen ? (
+          <ChevronLeftIcon className="w-6 h-6 text-white" />
+        ) : (
+          <ChevronRightIcon className="w-6 h-6 text-white" />
+        )}
+      </div>
     </div>
   )
 }