fix multi active nav links

src/components/ui/sidebar/NavLink.tsx

@@ -0,0 +1,32 @@
+import { Link } from "raviger";
+import { ActiveLinkProps } from "raviger/dist/Link";
+
+export function NavLink({
+  href,
+  className,
+  activeClass,
+  activeLink,
+  setActive,
+  name,
+  ...props
+}: ActiveLinkProps & {
+  activeLink: string | null;
+  setActive: (name: string) => void;
+  name: string;
+}) {
+  const handleClick = () => {
+    setActive(name);
+  };
+
+  const computedClassName = activeLink == name ? activeClass : "";
+
+  return (
+    <div onClick={handleClick}>
+      <Link
+        href={href}
+        className={`${className} ${computedClassName}`}
+        {...props}
+      />
+    </div>
+  );
+}

src/components/ui/sidebar/nav-main.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ActiveLink } from "raviger";
+import { useState } from "react";
 
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
@@ -10,6 +10,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
+import { NavLink } from "@/components/ui/sidebar/NavLink";
 
 export function NavMain({
   links,
@@ -20,6 +21,13 @@ export function NavMain({
     icon?: string;
   }[];
 }) {
+  const [activeLink, setActiveLink] = useState<string | null>("Facility");
+
+  const handleSetActive = (name: string) => {
+    console.log(name);
+    setActiveLink(name);
+  };
+
   return (
     <SidebarGroup>
       <SidebarMenu>
@@ -32,16 +40,19 @@ export function NavMain({
                 "text-gray-600 transition font-normal hover:bg-gray-200 hover:text-green-700"
               }
             >
-              <ActiveLink
+              <NavLink
                 href={link.url}
+                className="default-link-styles"
                 activeClass="bg-white text-green-700 shadow"
-                exactActiveClass="bg-white text-green-700 shadow"
+                activeLink={activeLink}
+                setActive={handleSetActive}
+                name={link.name}
               >
                 {link.icon && <CareIcon icon={link.icon as IconName} />}
                 <span className="group-data-[collapsible=icon]:hidden">
                   {link.name}
                 </span>
-              </ActiveLink>
+              </NavLink>
             </SidebarMenuButton>
           </SidebarMenuItem>
         ))}