Update styling for the side nav

package.json

@@ -51,9 +51,11 @@
     "@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",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@sentry/browser": "^8.33.0",
     "@yudiel/react-qr-scanner": "^2.0.0-beta.3",
     "axios": "^1.7.7",

src/CAREUI/icons/UniconPaths.json

@@ -247,6 +247,10 @@
     24,
     "M7,11H17a1,1,0,0,0,0-2H13V5.41l.79.8a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-2.5-2.5a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-2.5,2.5a1,1,0,0,0,1.42,1.42l.79-.8V9H7a1,1,0,0,0,0,2Zm10,2H7a1,1,0,0,0,0,2h4v3.59l-.79-.8a1,1,0,0,0-1.42,1.42l2.5,2.5a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l2.5-2.5a1,1,0,0,0-1.42-1.42l-.79.8V15h4a1,1,0,0,0,0-2Z"
   ],
+  "l-arrow-bar-right": [
+    24,
+    "M8.4 12c0 .4.3.7.7.7h8.3l-3.1 3.1c-.3.3-.3.7 0 1s.7.3 1 0l4.3-4.3c.3-.3.3-.7 0-1 0 0 0 0 0 0l-4.3-4.3c-.3-.3-.7-.3-1 0s-.3.7 0 1l3.1 3.1h-8.3c-.4 0-.7.3-.7.7M4.9 22c-.4 0-.7-.3-.7-.7V2.7c0-.4.3-.7.7-.7s.7.3.7.7v18.6c0 .4-.3.7-.7.7"
+  ],
   "l-arrow-circle-down": [
     24,
     "M11.29,15.71a1,1,0,0,0,.33.21,1,1,0,0,0,.76,0,1,1,0,0,0,.33-.21l3-3a1,1,0,0,0-1.42-1.42L13,12.59V9a1,1,0,0,0-2,0v3.59l-1.29-1.3a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.42ZM12,22A10,10,0,1,0,2,12,10,10,0,0,0,12,22ZM12,4a8,8,0,1,1-8,8A8,8,0,0,1,12,4Z"
@@ -2795,6 +2799,14 @@
     24,
     "M2.5,10.56l9,5.2a1,1,0,0,0,1,0l9-5.2a1,1,0,0,0,0-1.73l-9-5.2a1,1,0,0,0-1,0l-9,5.2a1,1,0,0,0,0,1.73ZM12,5.65l7,4-7,4.05L5,9.69Zm8.5,7.79L12,18.35,3.5,13.44a1,1,0,0,0-1.37.36,1,1,0,0,0,.37,1.37l9,5.2a1,1,0,0,0,1,0l9-5.2a1,1,0,0,0,.37-1.37A1,1,0,0,0,20.5,13.44Z"
   ],
+  "l-layout-sidebar": [
+    24,
+    "M0 4.5C0 2.8 1.3 1.5 3 1.5h18c1.7 0 3 1.3 3 3v15c0 1.7-1.3 3-3 3H3c-1.7 0-3-1.3-3-3V4.5ZM7.5 3v18h13.5c.8 0 1.5-.7 1.5-1.5V4.5c0-.8-.7-1.5-1.5-1.5H7.5ZM6 3h-3c-.8 0-1.5.7-1.5 1.5v15c0 .8.7 1.5 1.5 1.5h3V3Z"
+  ],
+  "l-layout-sidebar-alt": [
+    24,
+    "M21 1.5H3C1.3 1.5 0 2.8 0 4.5v15c0 1.7 1.3 3 3 3h18c1.7 0 3-1.3 3-3V4.5c0-1.7-1.3-3-3-3ZM22.5 19.5c0 .8-.7 1.5-1.5 1.5H3c-.8 0-1.5-.7-1.5-1.5V4.5c0-.8.7-1.5 1.5-1.5h18c.8 0 1.5.7 1.5 1.5v15ZM10.5 6v12c0 .8-.7 1.5-1.5 1.5h-3c-.8 0-1.5-.7-1.5-1.5V6c0-.8.7-1.5 1.5-1.5h3c.8 0 1.5.7 1.5 1.5Z"
+  ],
   "l-left-arrow-from-left": [
     24,
     "M17,11H5.41l2.3-2.29A1,1,0,1,0,6.29,7.29l-4,4a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l4,4a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L5.41,13H17a1,1,0,0,0,0-2Zm4-7a1,1,0,0,0-1,1V19a1,1,0,0,0,2,0V5A1,1,0,0,0,21,4Z"

src/CAREUI/misc/ThemedFavicon.tsx

@@ -7,7 +7,7 @@ export default function ThemedFavicon() {
       "link[rel~='icon']",
     ) as HTMLLinkElement;
 
-    favicon.href = darkThemeMq.matches ? "/favicon-light.ico" : "/favicon.ico";
+    favicon.href = darkThemeMq.matches ? "/favicon.ico" : "/favicon-light.ico";
   }, []);
 
   return null;

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

@@ -8,6 +8,12 @@ import SlideOver from "../../../CAREUI/interactive/SlideOver";
 import { classNames } from "../../../Utils/utils";
 import { Link } from "raviger";
 import careConfig from "@careConfig";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/Components/ui/tooltip";
 
 export const SIDEBAR_SHRINK_PREFERENCE_KEY = "sidebarShrinkPreference";
 
@@ -58,23 +64,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 +100,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
@@ -115,11 +119,14 @@ const StatelessSidebar = ({
       <div
         className={`flex items-center ${shrinked ? "mt-2 justify-center" : "justify-between"}`}
       >
-        <Link href="/" className="flex items-center justify-between">
+        <Link
+          href="/"
+          className={`${
+            shrinked ? "mx-auto" : "ml-3"
+          } flex items-center justify-between`}
+        >
           <img
-            className={`${
-              shrinked ? "mx-auto" : "ml-4 md:ml-2"
-            } h-8 self-start transition md:h-12 lg:h-12`}
+            className="h-8 w-auto self-start transition md:h-10"
             src={shrinked ? LOGO_COLLAPSE : careConfig.mainLogo?.light}
           />
         </Link>
@@ -132,15 +139,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) => {
@@ -219,17 +224,26 @@ interface ToggleShrinkProps {
 }
 
 const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => (
-  <div
-    className={`flex h-5 w-5 cursor-pointer items-center justify-center self-end rounded bg-gray-300 text-secondary-100 text-opacity-70 hover:bg-primary-700 hover:text-opacity-100 ${
-      shrinked ? "mx-auto" : "mr-4"
-    } transition-all duration-200 ease-in-out`}
-    onClick={toggle}
-  >
-    <CareIcon
-      icon="l-angle-up"
-      className={`text-3xl ${
-        shrinked ? "rotate-90" : "-rotate-90"
-      } transition-all delay-150 duration-300 ease-out`}
-    />
-  </div>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 ${shrinked ? "bg-gray-200" : "bg-gray-100"} text-gray-600 hover:bg-primary-200 hover:text-primary-800 ${
+            shrinked ? "mx-auto" : "mr-4"
+          } transition-all duration-200 ease-in-out`}
+          onClick={toggle}
+        >
+          <CareIcon
+            icon={shrinked ? "l-arrow-bar-right" : "l-layout-sidebar-alt"}
+            className={`text-lg ${
+              shrinked ? "" : ""
+            } transition-all delay-150 duration-300 ease-out`}
+          />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{shrinked ? "Expand Sidebar" : "Collapse Sidebar"}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
 );

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"}
@@ -60,7 +60,7 @@ const SidebarItemBase = forwardRef(
           <span
             className={`${
               shrinked ? "hidden" : "grow"
-            } flex w-full items-center pl-4 text-sm tracking-wide`}
+            } flex w-full items-center text-nowrap pl-4 text-sm tracking-wide`}
           >
             {t(props.text)}
           </span>

src/Components/Common/Sidebar/SidebarUserCard.tsx

@@ -5,6 +5,13 @@ 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 { Button } from "@/Components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/Components/ui/dropdown-menu";
 
 interface SidebarUserCardProps {
   shrinked: boolean;
@@ -16,47 +23,57 @@ 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>
+          <Button
+            variant="outline"
+            size="lg"
+            className={`tooltip relative w-full cursor-pointer items-center justify-between rounded-lg bg-gray-200 p-2 font-normal text-gray-900 transition hover:bg-gray-200 focus:outline-none focus:ring focus:ring-violet-300 ${shrinked ? "flex h-full flex-col-reverse" : "flex 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-8 text-sm font-medium"
+                />
+              </div>
+              {!shrinked && (
+                <span className="flex w-full grow items-center pl-1 text-xs font-medium tracking-wide">
+                  {formatName(user)}
+                </span>
+              )}
+            </div>
+            <div className="flex shrink-0 items-center justify-center rounded-full bg-gray-300/50">
+              <CareIcon
+                icon="l-angle-up"
+                className="text-xl text-gray-600"
+                aria-label="Up arrow icon"
+              />
+            </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>
-      </div>
+          </Button>
+        </DropdownMenuTrigger>
+      </DropdownMenu>
     </div>
   );
 };