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,16 +72,13 @@ 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">
+        <div className="flex w-full items-center justify-between gap-2.5">
           <Menu.Button
-          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 ${
+            className={`inline-flex w-full items-center rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none `}
-            !sidebarCollapse
-              ? "border border-gray-300 shadow-sm hover:bg-gray-50 focus:bg-gray-50"
-              : ""
-          }`}
           >
-          <div className="mx-auto flex items-center gap-x-1">
+            <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-5 w-5 items-center justify-center rounded bg-gray-700 p-4 uppercase text-white">
+              <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 !== "" ? (
                   <Image
                     src={activeWorkspace.logo}
@@ -94,8 +91,9 @@ export const WorkspaceSidebarDropdown = () => {
                   activeWorkspace?.name?.charAt(0) ?? "..."
                 )}
               </div>
+
               {!sidebarCollapse && (
-              <p className="ml-1 text-left">
+                <p className="text-base">
                   {activeWorkspace?.name
                     ? activeWorkspace.name.length > 17
                       ? `${activeWorkspace.name.substring(0, 17)}...`
@@ -104,13 +102,19 @@ export const WorkspaceSidebarDropdown = () => {
                 </p>
               )}
             </div>
-          {!sidebarCollapse && (
-            <div className="flex flex-grow justify-end">
-              <ChevronDownIcon className="ml-2 h-3 w-3" aria-hidden="true" />
-            </div>
-          )}
           </Menu.Button>
 
+          {!sidebarCollapse && (
+            <Link href={`/${workspaceSlug}/me/profile`}>
+              <a>
+                <div className="flex flex-grow justify-end">
+                  <Avatar user={user} height="32px" width="32px" fontSize="14px" />
+                </div>
+              </a>
+            </Link>
+          )}
+        </div>
+
         <Transition
           as={Fragment}
           enter="transition ease-out duration-100"

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

@@ -37,8 +37,7 @@ 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) => (
         <Link key={index} href={link.href}>
           <a
@@ -46,7 +45,7 @@ export const WorkspaceSidebarMenu: React.FC = () => {
               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 items-center gap-3 rounded-md p-2 text-xs font-medium outline-none ${
+            } group flex w-full items-center gap-3 rounded-md p-2 text-base font-medium outline-none ${
               sidebarCollapse ? "justify-center" : ""
             }`}
           >
@@ -61,6 +60,5 @@ export const WorkspaceSidebarMenu: React.FC = () => {
         </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 />
-            </div>
             <WorkspaceSidebarMenu />
             <ProjectSidebarList />
             <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />