feat: bar items better check for isActive

web/src/hooks/barItems.tsx

@@ -1,5 +1,5 @@
 import { useAuth } from "@/store/auth";
-import { Blocks, Home, Settings2, User } from "lucide-react";
+import { Blocks, Home, Settings2, User, Users } from "lucide-react";
 import { useCallback, type ReactNode } from "react";
 import { useLocation } from "react-router";
 
@@ -16,7 +16,8 @@ export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
 
   const isActive = useCallback(
     (item: BarItem) => {
-      return location.pathname === item.pathname;
+      if (item.pathname === "/") return location.pathname === item.pathname;
+      return location.pathname.startsWith(item.pathname);
     },
     [location.pathname],
   );
@@ -50,9 +51,15 @@ export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
             {
               icon: <Blocks />,
               title: "API Services",
-              tab: "api-services",
+              tab: "admin.api-services",
               pathname: "/admin/api-services",
             },
+            {
+              icon: <Users />,
+              title: "Users",
+              tab: "admin.users",
+              pathname: "/admin/users",
+            },
           ]
         : []),
     ],