style: workspace sidebar (#417)

apps/app/components/ui/avatar.tsx

@@ -15,15 +15,25 @@ import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 type AvatarProps = {
   user?: Partial<IUser> | Partial<IUserLite> | IUser | IUserLite | undefined | null;
   index?: number;
+  height?: string;
+  width?: string;
+  fontSize?: string
 };
 
-export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
+export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", width="20px", fontSize="12px" }) => (
-  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
+  <div className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`} style={{
+    height: height,
+    width: width,
+  }}>
     {user && user.avatar && user.avatar !== "" ? (
       <div
-        className={`h-5 w-5 rounded-full border-2 ${
+        className={`rounded-full border-2 ${
           index ? "border-white bg-white" : "border-transparent"
         }`}
+        style={{
+          height: height,
+          width: width,
+        }}
       >
         <Image
           src={user.avatar}
@@ -34,7 +44,11 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
         />
       </div>
     ) : (
-      <div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white">
+      <div className="grid place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white" style={{
+        height: height,
+        width: width,
+        fontSize: fontSize,
+      }}>
         {user?.first_name && user.first_name !== ""
           ? user.first_name.charAt(0)
           : user?.email?.charAt(0)}

apps/app/components/workspace/sidebar-dropdown.tsx

@@ -12,7 +12,7 @@ import useWorkspaces from "hooks/use-workspaces";
 import userService from "services/user.service";
 import authenticationService from "services/authentication.service";
 // components
-import { Loader } from "components/ui";
+import { Avatar, Loader } from "components/ui";
 
 // types
 import { IWorkspace } from "types";
@@ -72,44 +72,48 @@ export const WorkspaceSidebarDropdown = () => {
 
   return (
     <div className="relative">
-      <Menu as="div" className="col-span-4 inline-block w-full text-left">
+      <Menu as="div" className="col-span-4 inline-block w-full p-5 text-left">
-        <Menu.Button
+        <div className="flex w-full items-center justify-between gap-2.5">
-          className={`inline-flex w-full items-center justify-between rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
+          <Menu.Button
-            !sidebarCollapse
+            className={`inline-flex w-full items-center rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none `}
-              ? "border border-gray-300 shadow-sm hover:bg-gray-50 focus:bg-gray-50"
+          >
-              : ""
+            <div className="flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5">
-          }`}
+              <div className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 uppercase text-white">
-        >
+                {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
-          <div className="mx-auto flex items-center gap-x-1">
+                  <Image
-            <div className="relative flex h-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+                    src={activeWorkspace.logo}
-              {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
+                    alt="Workspace Logo"
-                <Image
+                    layout="fill"
-                  src={activeWorkspace.logo}
+                    objectFit="cover"
-                  alt="Workspace Logo"
+                    className="rounded"
-                  layout="fill"
+                  />
-                  objectFit="cover"
+                ) : (
-                  className="rounded"
+                  activeWorkspace?.name?.charAt(0) ?? "..."
-                />
+                )}
-              ) : (
+              </div>
-                activeWorkspace?.name?.charAt(0) ?? "..."
+
+              {!sidebarCollapse && (
+                <p className="text-base">
+                  {activeWorkspace?.name
+                    ? activeWorkspace.name.length > 17
+                      ? `${activeWorkspace.name.substring(0, 17)}...`
+                      : activeWorkspace.name
+                    : "Loading..."}
+                </p>
               )}
             </div>
-            {!sidebarCollapse && (
+          </Menu.Button>
-              <p className="ml-1 text-left">
+
-                {activeWorkspace?.name
-                  ? activeWorkspace.name.length > 17
-                    ? `${activeWorkspace.name.substring(0, 17)}...`
-                    : activeWorkspace.name
-                  : "Loading..."}
-              </p>
-            )}
-          </div>
           {!sidebarCollapse && (
-            <div className="flex flex-grow justify-end">
+            <Link href={`/${workspaceSlug}/me/profile`}>
-              <ChevronDownIcon className="ml-2 h-3 w-3" aria-hidden="true" />
+              <a>
-            </div>
+                <div className="flex flex-grow justify-end">
+                  <Avatar user={user} height="32px" width="32px" fontSize="14px" />
+                </div>
+              </a>
+            </Link>
           )}
-        </Menu.Button>
+        </div>
 
         <Transition
           as={Fragment}

apps/app/components/workspace/sidebar-menu.tsx

@@ -37,30 +37,28 @@ export const WorkspaceSidebarMenu: React.FC = () => {
   const { collapsed: sidebarCollapse } = useTheme();
 
   return (
-    <div className="px-2">
+    <div className="flex w-full flex-col items-start justify-start gap-2 px-5 py-1">
-      <div className="mt-3 flex-1 space-y-1 bg-white">
+      {workspaceLinks(workspaceSlug as string).map((link, index) => (
-        {workspaceLinks(workspaceSlug as string).map((link, index) => (
+        <Link key={index} href={link.href}>
-          <Link key={index} href={link.href}>
+          <a
-            <a
+            className={`${
+              link.href === router.asPath
+                ? "bg-indigo-50 text-gray-900"
+                : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
+            } group flex w-full items-center gap-3 rounded-md p-2 text-base font-medium outline-none ${
+              sidebarCollapse ? "justify-center" : ""
+            }`}
+          >
+            <link.icon
               className={`${
-                link.href === router.asPath
+                link.href === router.asPath ? "text-gray-900" : "text-gray-600"
-                  ? "bg-indigo-50 text-gray-900"
+              } h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
-                  : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50"
+              aria-hidden="true"
-              } group flex items-center gap-3 rounded-md p-2 text-xs font-medium outline-none ${
+            />
-                sidebarCollapse ? "justify-center" : ""
+            {!sidebarCollapse && link.name}
-              }`}
+          </a>
-            >
+        </Link>
-              <link.icon
+      ))}
-                className={`${
-                  link.href === router.asPath ? "text-gray-900" : "text-gray-600"
-                } h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
-                aria-hidden="true"
-              />
-              {!sidebarCollapse && link.name}
-            </a>
-          </Link>
-        ))}
-      </div>
     </div>
   );
 };

apps/app/layouts/app-layout/app-sidebar.tsx

@@ -25,10 +25,8 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
         } flex h-full flex-col bg-white duration-300 md:relative`}
       >
         <div className="flex h-full flex-1 flex-col border-r">
-          <div className="flex h-full flex-1 flex-col pt-2">
+          <div className="flex h-full flex-1 flex-col">
-            <div className="px-2">
+            <WorkspaceSidebarDropdown />
-              <WorkspaceSidebarDropdown />
-            </div>
             <WorkspaceSidebarMenu />
             <ProjectSidebarList />
             <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />