use route function from instand of url path on the settings layout

Author: mt-shihab26

resources/js/layouts/settings/layout.tsx

@@ -2,36 +2,30 @@ import Heading from '@/components/heading';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
-import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/react';
 import { type PropsWithChildren } from 'react';
 
-const sidebarNavItems: NavItem[] = [
+interface SettingsSidebarNavItem {
+    title: string;
+    route: string;
+}
+
+const sidebarNavItems: SettingsSidebarNavItem[] = [
     {
         title: 'Profile',
-        href: '/settings/profile',
-        icon: null,
+        route: 'profile.edit',
     },
     {
         title: 'Password',
-        href: '/settings/password',
-        icon: null,
+        route: 'password.edit',
     },
     {
         title: 'Appearance',
-        href: '/settings/appearance',
-        icon: null,
+        route: 'appearance',
     },
 ];
 
 export default function SettingsLayout({ children }: PropsWithChildren) {
-    // When server-side rendering, we only render the layout on the client...
-    if (typeof window === 'undefined') {
-        return null;
-    }
-
-    const currentPath = window.location.pathname;
-
     return (
         <div className="px-4 py-6">
             <Heading title="Settings" description="Manage your profile and account settings" />
@@ -41,15 +35,15 @@ export default function SettingsLayout({ children }: PropsWithChildren) {
                     <nav className="flex flex-col space-y-1 space-x-0">
                         {sidebarNavItems.map((item) => (
                             <Button
-                                key={item.href}
+                                key={item.route}
                                 size="sm"
                                 variant="ghost"
                                 asChild
                                 className={cn('w-full justify-start', {
-                                    'bg-muted': currentPath === item.href,
+                                    'bg-muted': route().current(item.route),
                                 })}
                             >
-                                <Link href={item.href} prefetch>
+                                <Link href={route(item.route)} prefetch>
                                     {item.title}
                                 </Link>
                             </Button>