From 4fad685ec81c2715ee82c84e12990acfb9e83153 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 10 Mar 2023 12:32:29 +0530
Subject: [PATCH] style: workspace dropdown (#416)

* style: workspace dropdown

* style: workspace dropdown hover fix
---
 .../components/workspace/sidebar-dropdown.tsx | 164 ++++++++++--------
 1 file changed, 88 insertions(+), 76 deletions(-)

diff --git a/apps/app/components/workspace/sidebar-dropdown.tsx b/apps/app/components/workspace/sidebar-dropdown.tsx
index f7392f1d2..5a98ad12e 100644
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@@ -3,7 +3,7 @@ import { Menu, Transition } from "@headlessui/react";
 import { useRouter } from "next/router";
 import Image from "next/image";
 import Link from "next/link";
-import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { CheckIcon, ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
 // hooks
 import useUser from "hooks/use-user";
 import useTheme from "hooks/use-theme";
@@ -20,13 +20,17 @@ import { IWorkspace } from "types";
 // Static Data
 const userLinks = (workspaceSlug: string) => [
   {
-    name: "My Profile",
-    href: `/${workspaceSlug}/me/profile`,
+    name: "Workspace Settings",
+    href: `/${workspaceSlug}/settings`,
   },
   {
     name: "Workspace Invites",
     href: "/invitations",
   },
+  {
+    name: "My Profile",
+    href: `/${workspaceSlug}/me/profile`,
+  },
 ];
 
 export const WorkspaceSidebarDropdown = () => {
@@ -116,28 +120,29 @@ export const WorkspaceSidebarDropdown = () => {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="fixed left-2 z-20 mt-1 w-full max-w-[17rem] origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="divide-y px-1 py-2">
-              <div>
-                <Menu.Item as="div" className="px-2 pb-2 text-xs">
-                  {user?.email}
-                </Menu.Item>
-              </div>
-              <div className="py-2">
-                {workspaces ? (
-                  <>
-                    {workspaces.length > 0 ? (
-                      workspaces.map((workspace) => (
-                        <Menu.Item key={workspace.id}>
-                          {({ active }) => (
-                            <button
-                              type="button"
-                              onClick={() => handleWorkspaceNavigation(workspace)}
-                              className={`${
-                                active ? "bg-gray-100" : ""
-                              } flex w-full items-center gap-2 rounded-md p-2 text-sm text-gray-900`}
-                            >
-                              <div className="relative flex h-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+          <Menu.Items
+            className="fixed left-2 z-20 mt-1  flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
+          bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          >
+            <div className="flex flex-col items-start justify-start gap-3 px-5 py-3">
+              <Menu.Item as="div" className="text-sm text-gray-500">
+                {user?.email}
+              </Menu.Item>
+              <span className="text-sm font-semibold text-gray-500">Workspace</span>
+
+              {workspaces ? (
+                <div className="flex h-full w-full flex-col items-start justify-start gap-3.5">
+                  {workspaces.length > 0 ? (
+                    workspaces.map((workspace) => (
+                      <Menu.Item key={workspace.id}>
+                        {({ active }) => (
+                          <button
+                            type="button"
+                            onClick={() => handleWorkspaceNavigation(workspace)}
+                            className="flex w-full items-center justify-between gap-1 rounded-md text-sm text-gray-900"
+                          >
+                            <div className="flex items-center justify-start gap-2.5">
+                              <span className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 text-xs uppercase text-white">
                                 {workspace?.logo && workspace.logo !== "" ? (
                                   <Image
                                     src={workspace.logo}
@@ -149,61 +154,68 @@ export const WorkspaceSidebarDropdown = () => {
                                 ) : (
                                   activeWorkspace?.name?.charAt(0) ?? "N"
                                 )}
-                              </div>
-                              <div className="text-left">
-                                <h5 className="text-sm">{workspace.name}</h5>
-                                <div className="text-xs text-gray-500">
-                                  {workspace.total_members}{" "}
-                                  {workspace.total_members > 1 ? "members" : "member"}
-                                </div>
-                              </div>
-                            </button>
-                          )}
-                        </Menu.Item>
-                      ))
-                    ) : (
-                      <p>No workspace found!</p>
-                    )}
-                    <Menu.Item
-                      as="button"
-                      type="button"
-                      onClick={() => {
-                        router.push("/create-workspace");
-                      }}
-                      className="flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs hover:bg-gray-100"
-                    >
-                      <PlusIcon className="h-3 w-3" />
-                      Create Workspace
-                    </Menu.Item>
-                  </>
-                ) : (
-                  <div className="w-full">
-                    <Loader className="space-y-2">
-                      <Loader.Item height="30px" />
-                      <Loader.Item height="30px" />
-                    </Loader>
-                  </div>
-                )}
-              </div>
-              <div className="space-y-1 pt-2 text-xs">
-                {userLinks(workspaceSlug as string).map((link, index) => (
-                  <Menu.Item key={index} as="div">
-                    <Link href={link.href}>
-                      <a className="block rounded px-2 py-1 text-left hover:bg-gray-100">
-                        {link.name}
-                      </a>
-                    </Link>
+                              </span>
+                              <h5 className="text-sm">{workspace.name}</h5>
+                            </div>
+                            <span className="p-1">
+                              <CheckIcon
+                                className={`h-3 w-3.5 text-gray-600 ${
+                                  active || workspace.id === activeWorkspace?.id
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                }`}
+                              />
+                            </span>
+                          </button>
+                        )}
+                      </Menu.Item>
+                    ))
+                  ) : (
+                    <p>No workspace found!</p>
+                  )}
+                  <Menu.Item
+                    as="button"
+                    type="button"
+                    onClick={() => {
+                      router.push("/create-workspace");
+                    }}
+                    className="flex w-full items-center gap-1 text-sm text-gray-600"
+                  >
+                    <PlusIcon className="h-3 w-3 text-gray-600" />
+                    Create Workspace
                   </Menu.Item>
-                ))}
+                </div>
+              ) : (
+                <div className="w-full">
+                  <Loader className="space-y-2">
+                    <Loader.Item height="30px" />
+                    <Loader.Item height="30px" />
+                  </Loader>
+                </div>
+              )}
+            </div>
+            <div className="flex w-full flex-col items-start justify-start gap-2 border-t border-t-gray-200 px-3 py-2 text-sm">
+              {userLinks(workspaceSlug as string).map((link, index) => (
                 <Menu.Item
-                  as="button"
-                  type="button"
-                  className="w-full rounded px-2 py-1 text-left hover:bg-gray-100"
-                  onClick={handleSignOut}
+                  key={index}
+                  as="div"
+                  className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-gray-600 hover:bg-gray-100"
                 >
-                  Sign out
+                  <Link href={link.href}>
+                    <a>{link.name}</a>
+                  </Link>
                 </Menu.Item>
-              </div>
+              ))}
+            </div>
+            <div className="w-full border-t border-t-gray-200 px-3 py-2">
+              <Menu.Item
+                as="button"
+                type="button"
+                className="flex w-full items-center justify-start rounded px-2 py-1 text-sm text-red-600 hover:bg-gray-100"
+                onClick={handleSignOut}
+              >
+                Sign out
+              </Menu.Item>
             </div>
           </Menu.Items>
         </Transition>