Update styling for the side nav

package.json

@@ -51,6 +51,7 @@
     "@hello-pangea/dnd": "^17.0.0",
     "@pnotify/core": "^5.2.0",
     "@pnotify/mobile": "^5.2.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",

src/Components/Common/Breadcrumbs.tsx

@@ -63,7 +63,7 @@ export default function Breadcrumbs({
     return (
       <li
         key={crumb.name}
-        className={classNames("text-sm font-light", crumb.style)}
+        className={classNames("text-sm font-normal", crumb.style)}
       >
         <div className="flex items-center">
           <CareIcon icon="l-angle-right" className="h-4 text-gray-400" />
@@ -90,7 +90,7 @@ export default function Breadcrumbs({
           <li className="mr-1 flex items-center">
             <Button
               variant="link"
-              className="px-1 text-sm font-light text-gray-500 underline underline-offset-2"
+              className="px-1 text-sm font-normal text-gray-500 underline underline-offset-2"
               size="xs"
               onClick={() => {
                 if (onBackClick && onBackClick() === false) return;

src/Components/Common/Sidebar/Sidebar.tsx

@@ -58,23 +58,21 @@ const StatelessSidebar = ({
   const updateIndicator = () => {
     if (!indicatorRef.current) return;
     const index = NavItems.findIndex((item) => item.to === activeLink);
-    const navItemCount = NavItems.length + (careConfig.urls.dashboard ? 2 : 1); // +2 for notification and dashboard
+    const navItemCount = NavItems.length + (careConfig.urls.dashboard ? 2 : 1);
     if (index !== -1) {
-      // Haha math go brrrrrrrrr
-
       const e = indicatorRef.current;
       const itemHeight = activeLinkRef.current?.clientHeight || 0;
-      if (lastIndicatorPosition > index) {
-        e.style.top = `${itemHeight * (index + 0.37)}px`;
-        setTimeout(() => {
-          e.style.bottom = `${itemHeight * (navItemCount - 0.63 - index)}px`;
-        }, 50);
-      } else {
-        e.style.bottom = `${itemHeight * (navItemCount - 0.63 - index)}px`;
-        setTimeout(() => {
-          e.style.top = `${itemHeight * (index + 0.37)}px`;
-        }, 50);
-      }
+      const itemOffset = index * itemHeight;
+
+      const indicatorHeight = indicatorRef.current.clientHeight;
+      const indicatorOffset = (itemHeight - indicatorHeight) / 2;
+
+      const top = `${itemOffset + indicatorOffset}px`;
+      const bottom = `${navItemCount * itemHeight - itemOffset - indicatorOffset}px`;
+
+      e.style.top = top;
+      e.style.bottom = bottom;
+
       setLastIndicatorPosition(index);
     } else {
       indicatorRef.current.style.display = "none";
@@ -96,7 +94,7 @@ const StatelessSidebar = ({
 
   return (
     <nav
-      className={`group flex h-full flex-col bg-gray-100 py-3 md:py-5 ${
+      className={`group flex h-dvh flex-1 flex-col bg-gray-100 py-3 md:py-5 ${
         shrinked ? "w-14" : "w-60"
       } transition-all duration-300 ease-in-out ${
         isOverflowVisible && shrinked
@@ -132,15 +130,13 @@ const StatelessSidebar = ({
           </div>
         )}
       </div>
-      <div className="h-4" /> {/* flexible spacing */}
-      <div className="relative flex h-full flex-col">
+      <div className="relative mt-4 flex h-full flex-col justify-between">
         <div className="relative flex flex-1 flex-col md:flex-none">
           <div
             ref={indicatorRef}
-            // className="absolute left-2 w-1 hidden md:block bg-primary-400 rounded z-10 transition-all"
             className={classNames(
-              "absolute left-2 z-10 block w-1 rounded bg-primary-400 transition-all",
-              activeLink ? "opacity-0 md:opacity-100" : "opacity-0",
+              "absolute right-2 z-10 block h-6 w-1 rounded-l bg-primary-500 transition-all",
+              activeLink ? "opacity-100" : "opacity-0",
             )}
           />
           {NavItems.map((i) => {

src/Components/Common/Sidebar/SidebarItem.tsx

@@ -32,10 +32,10 @@ const SidebarItemBase = forwardRef(
     return (
       <Link
         ref={ref}
-        className={`tooltip relative ml-1 mr-2 h-full min-h-[40px] flex-1 cursor-pointer rounded-lg text-gray-900 transition-all duration-200 ease-in-out md:h-11 md:flex-none ${
+        className={`tooltip relative ml-1 mr-2 h-12 flex-1 cursor-pointer rounded-md py-1 font-medium text-gray-600 transition md:flex-none ${
           props.selected
-            ? "bg-gray-200 font-semibold"
-            : "font-normal hover:bg-gray-200"
+            ? "bg-white text-green-800 shadow"
+            : "hover:bg-gray-200"
         }`}
         target={external && "_blank"}
         rel={external && "noreferrer"}

src/Components/Common/Sidebar/SidebarUserCard.tsx

@@ -5,6 +5,12 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { formatName, formatDisplayName } from "../../../Utils/utils";
 import useAuthUser, { useAuthContext } from "../../../Common/hooks/useAuthUser";
 import { Avatar } from "@/Components/Common/Avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
 
 interface SidebarUserCardProps {
   shrinked: boolean;
@@ -16,47 +22,51 @@ const SidebarUserCard: React.FC<SidebarUserCardProps> = ({ shrinked }) => {
   const { signOut } = useAuthContext();
 
   return (
-    <div className="my-2 flex flex-col">
-      <Link
-        href="/user/profile"
-        className="tooltip relative ml-1 mr-2 h-10 flex-1 cursor-pointer rounded-lg font-normal text-gray-900 transition-all duration-200 ease-in-out hover:bg-gray-200 md:flex-none"
-      >
-        <div
-          id="user-profile-name"
-          className={`flex h-full items-center justify-start transition-all duration-200 ease-in-out ${shrinked ? "pl-2" : "pl-5 pr-4"}`}
-        >
-          <div className="flex-none text-lg">
-            <Avatar name={formatDisplayName(user)} className="w-6" />
-          </div>
-          {!shrinked && (
-            <span className="flex w-full grow items-center pl-4 text-sm tracking-wide">
-              {formatName(user)}
-            </span>
-          )}
-        </div>
-      </Link>
-      <div
-        onClick={signOut}
-        className="tooltip relative ml-1 mr-2 mt-4 h-10 flex-1 cursor-pointer rounded-lg font-normal text-gray-900 transition-all duration-200 ease-in-out hover:bg-gray-200 md:mt-0 md:flex-none"
-      >
-        <div
-          id="sign-out-button"
-          className={`flex h-full items-center justify-start transition-all duration-200 ease-in-out ${shrinked ? "pl-2" : "pl-5 pr-4"}`}
-        >
-          <div className="flex-none text-lg">
-            <CareIcon
-              icon="l-sign-out-alt"
-              className="text-2xl text-gray-900"
-            />
-          </div>
-
-          {!shrinked && (
-            <div className="flex w-full items-center pl-4 text-sm tracking-wide text-gray-900">
-              {t("sign_out")}
+    <div
+      className={` ${shrinked ? "space-y-2 px-2" : "flex items-center px-4"}`}
+    >
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <div
+            className={`tooltip relative flex w-full cursor-pointer items-center justify-between rounded-lg bg-gray-200 px-2 py-1 font-normal text-gray-900 transition hover:bg-gray-200 ${shrinked ? "flex-col" : "flex-row"}`}
+          >
+            <div
+              id="user-profile-name"
+              className={`flex flex-1 items-center justify-start transition ${shrinked ? "" : ""}`}
+            >
+              <div className="flex-none text-lg">
+                <Avatar
+                  name={formatDisplayName(user)}
+                  className="w-9 rounded-lg border-gray-300"
+                />
+              </div>
+              {!shrinked && (
+                <span className="flex w-full grow items-center pl-1 text-xs font-medium tracking-wide">
+                  {formatName(user)}
+                </span>
+              )}
             </div>
-          )}
-        </div>
-      </div>
+            <div className="flex w-8 shrink-0 items-center justify-center rounded-full bg-gray-300/50 p-1">
+              <CareIcon icon="l-angle-up" className="text-xl text-gray-700" />
+            </div>
+            <div>
+              <DropdownMenuContent align="end" className="w-full">
+                <Link
+                  className="block text-sm capitalize text-gray-900"
+                  href="/user/profile"
+                >
+                  <DropdownMenuItem className="cursor-pointer">
+                    {t("profile")}
+                  </DropdownMenuItem>
+                </Link>
+                <DropdownMenuItem className="cursor-pointer" onClick={signOut}>
+                  <div id="sign-out-button">{t("sign_out")}</div>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </div>
+          </div>
+        </DropdownMenuTrigger>
+      </DropdownMenu>
     </div>
   );
 };