From 4b223c1e4ce18bebacfb65b3c801aa595ba0e4a2 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 27 Jan 2024 05:27:42 +0800
Subject: [PATCH] chore: update collapse sidebar

---
 web/src/layouts/Root.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
index 399d5270..98f5fbbc 100644
--- a/web/src/layouts/Root.tsx
+++ b/web/src/layouts/Root.tsx
@@ -1,7 +1,9 @@
+import { Button, IconButton, Tooltip } from "@mui/joy";
 import classNames from "classnames";
 import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
 import useLocalStorage from "react-use/lib/useLocalStorage";
+import Icon from "@/components/Icon";
 import Navigation from "@/components/Navigation";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import Loading from "@/pages/Loading";
@@ -21,12 +23,29 @@ function Root() {
         {sm && (
           <div
             className={classNames(
-              "hidden sm:block fixed top-0 left-0 select-none border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2",
+              "group flex flex-col justify-start items-start fixed top-0 left-0 select-none border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2",
               collapsed ? "w-16 px-2" : "w-56 px-4"
             )}
-            onDoubleClick={() => setCollapsed(!collapsed)}
           >
-            <Navigation collapsed={collapsed} />
+            <Navigation className="!h-auto" collapsed={collapsed} />
+            <div className={classNames("w-full grow h-auto flex flex-col justify-end", collapsed ? "items-center" : "items-start")}>
+              <div
+                className={classNames("hidden py-3 group-hover:flex flex-col justify-center items-center")}
+                onClick={() => setCollapsed(!collapsed)}
+              >
+                {!collapsed ? (
+                  <Button variant="plain" color="neutral" startDecorator={<Icon.ChevronLeft className="w-5 h-auto opacity-70" />}>
+                    Collapse
+                  </Button>
+                ) : (
+                  <Tooltip title="Expand" placement="right" arrow>
+                    <IconButton>
+                      <Icon.ChevronRight className="w-5 h-auto opacity-70" />
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </div>
+            </div>
           </div>
         )}
         <main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">