significant refactor

src/features/core/components/nav-link/nav-link.tsx

@@ -8,11 +8,12 @@ interface NavLinkProps {
   href: string;
   label: string;
   Icon: Icon;
+  include?: string[];
 }
 
-export const NavLink = ({ href, label, Icon }: NavLinkProps) => {
+export const NavLink = ({ href, label, Icon, include }: NavLinkProps) => {
   const router = useRouterState();
-  const isActive = useMemo(() => router.location.pathname === href || (router.location.pathname.includes(href) && href !== '/'), [router.location.pathname, href]);
+  const isActive = useMemo(() => (router.location.pathname === href || (router.location.pathname.includes(href) && href !== '/')) || include?.includes(router.location.pathname), [router.location.pathname, href]);
   
   return (
     <Box component={Link} to={href} 

src/features/core/components/navbar.tsx

@@ -8,6 +8,7 @@ import { useLinks } from "../hooks/use-links";
 const Navbar = () => {
   const { user, roles } = useAuth()
   const isMobile = useIsMobile();
+
   const links = useLinks(user?.id, roles);
 
   if (isMobile) return (

src/features/core/hooks/use-links.ts

@@ -3,7 +3,6 @@ import { useMemo } from "react";
 
 export const useLinks = (userId: string | undefined, roles: string[]) =>
   useMemo(() => {
-    if (!userId) throw new Error("userId is undefined")
     const links = [
       {
         label: 'Home',
@@ -23,7 +22,8 @@ export const useLinks = (userId: string | undefined, roles: string[]) =>
       {
         label: 'Profile',
         href: `/profile/${userId}`,
-        Icon: UserCircleIcon
+        Icon: UserCircleIcon,
+        include: ['/settings']
       }
     ]