From b9422bc94a4fd5f3ab4a4cd54751507efcac45ea Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 6 May 2024 02:27:08 +0530
Subject: [PATCH] chore: add dropdown to collapsed admin sidebar.

---
 .../admin-sidebar/sidebar-dropdown.tsx        | 101 +++++++++++-------
 1 file changed, 65 insertions(+), 36 deletions(-)

diff --git a/admin/components/admin-sidebar/sidebar-dropdown.tsx b/admin/components/admin-sidebar/sidebar-dropdown.tsx
index e2328d576..68212464e 100644
--- a/admin/components/admin-sidebar/sidebar-dropdown.tsx
+++ b/admin/components/admin-sidebar/sidebar-dropdown.tsx
@@ -9,7 +9,7 @@ import { Avatar } from "@plane/ui";
 // hooks
 import { useTheme, useUser } from "@/hooks";
 // helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // services
 import { AuthService } from "@/services";
 
@@ -32,6 +32,45 @@ export const SidebarDropdown = observer(() => {
 
   const handleSignOut = () => signOut();
 
+  const getSidebarMenuItems = () => (
+    <Menu.Items
+      className={cn(
+        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
+        {
+          "left-4": isSidebarCollapsed,
+        }
+      )}
+    >
+      <div className="flex flex-col gap-2.5 pb-2">
+        <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+      </div>
+      <div className="py-2">
+        <Menu.Item
+          as="button"
+          type="button"
+          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+          onClick={handleThemeSwitch}
+        >
+          <Palette className="h-4 w-4 stroke-[1.5]" />
+          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
+        </Menu.Item>
+      </div>
+      <div className="py-2">
+        <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+          <Menu.Item
+            as="button"
+            type="submit"
+            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+          >
+            <LogOut className="h-4 w-4 stroke-[1.5]" />
+            Sign out
+          </Menu.Item>
+        </form>
+      </div>
+    </Menu.Items>
+  );
+
   useEffect(() => {
     if (csrfToken === undefined)
       authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
@@ -45,9 +84,30 @@ export const SidebarDropdown = observer(() => {
             isSidebarCollapsed ? "justify-center" : ""
           }`}
         >
-          <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
-            <UserCog2 className="h-5 w-5 text-custom-text-200" />
-          </div>
+          <Menu as="div" className="flex-shrink-0">
+            <Menu.Button
+              className={cn("grid place-items-center outline-none", {
+                "cursor-default": !isSidebarCollapsed,
+              })}
+            >
+              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
+                <UserCog2 className="h-5 w-5 text-custom-text-200" />
+              </div>
+            </Menu.Button>
+            {isSidebarCollapsed && (
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                {getSidebarMenuItems()}
+              </Transition>
+            )}
+          </Menu>
 
           {!isSidebarCollapsed && (
             <div className="flex w-full gap-2">
@@ -78,38 +138,7 @@ export const SidebarDropdown = observer(() => {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items
-              className="absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y
-          divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
-            >
-              <div className="flex flex-col gap-2.5 pb-2">
-                <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
-              </div>
-              <div className="py-2">
-                <Menu.Item
-                  as="button"
-                  type="button"
-                  className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                  onClick={handleThemeSwitch}
-                >
-                  <Palette className="h-4 w-4 stroke-[1.5]" />
-                  Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
-                </Menu.Item>
-              </div>
-              <div className="py-2">
-                <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
-                  <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-                  <Menu.Item
-                    as="button"
-                    type="submit"
-                    className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                  >
-                    <LogOut className="h-4 w-4 stroke-[1.5]" />
-                    Sign out
-                  </Menu.Item>
-                </form>
-              </div>
-            </Menu.Items>
+            {getSidebarMenuItems()}
           </Transition>
         </Menu>
       )}