Adding new sections for settings

Author: Tony Lea

app/Http/Controllers/Settings/PasswordController.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rules\Password;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class PasswordController extends Controller
+{
+    /**
+     * Display the user's password form.
+     */
+    public function edit(Request $request): Response
+    {
+        return Inertia::render('Settings/Password', [
+            'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
+            'status' => session('status'),
+        ]);
+    }
+
+    /**
+     * Update the user's password.
+     */
+    public function update(Request $request): RedirectResponse
+    {
+        $validated = $request->validate([
+            'current_password' => ['required', 'current_password'],
+            'password' => ['required', Password::defaults(), 'confirmed'],
+        ]);
+
+        $request->user()->update([
+            'password' => Hash::make($validated['password']),
+        ]);
+
+        return back();
+    }
+}

resources/js/Components/NavSecondary.tsx

@@ -27,7 +27,7 @@ export function NavSecondary({
                     {items.map((item) => (
                         <SidebarMenuItem key={item.title}>
                             <SidebarMenuButton asChild>
-                                <a href={item.url} target="_blank" class="w-full block justify-between">
+                                <a href={item.url} target="_blank">
                                     <item.icon />
                                     <span>{item.title}</span>
                                 </a>

resources/js/Layouts/AppLayout.tsx

@@ -4,30 +4,66 @@ import {
     BreadcrumbItem,
     BreadcrumbList,
     BreadcrumbPage,
+    BreadcrumbLink,
+    BreadcrumbSeparator
 } from "@/components/ui/breadcrumb"
 import { Separator } from "@/components/ui/separator"
 import {
     SidebarInset,
     SidebarProvider,
     SidebarTrigger,
 } from "@/components/ui/sidebar"
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, Fragment } from 'react';
 
-export default function App({ children }: PropsWithChildren) {
+interface BreadcrumbItem {
+    title: string;
+    href: string;
+}
+
+interface AppLayoutProps {
+    children: React.ReactNode;
+    breadcrumbItems?: BreadcrumbItem[];
+}
+
+export default function App({ 
+    children,
+    breadcrumbItems = [],
+}: AppLayoutProps) {
     return (
         <SidebarProvider>
             <AppSidebar />
             <SidebarInset>
                 <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                     <SidebarTrigger className="-ml-1" />
-                    <Separator orientation="vertical" className="mr-2 h-4" />
-                    <Breadcrumb>
-                        <BreadcrumbList>
-                            <BreadcrumbItem>
-                                <BreadcrumbPage>Dashboard</BreadcrumbPage>
-                            </BreadcrumbItem>
-                        </BreadcrumbList>
-                    </Breadcrumb>
+                    {breadcrumbItems.length > 0 && (
+                        <>
+                            <Separator orientation="vertical" className="mr-2 h-4" />
+                            <Breadcrumb>
+                                <BreadcrumbList>
+                                    {breadcrumbItems.map((item, index) => {
+                                        const isLast = index === breadcrumbItems.length - 1;
+
+                                        return (
+                                            <Fragment key={index}>
+                                                <BreadcrumbItem>
+                                                    {isLast ? (
+                                                        <BreadcrumbPage>{item.title}</BreadcrumbPage>
+                                                    ) : (
+                                                        <BreadcrumbLink href={item.href}>
+                                                            {item.title}
+                                                        </BreadcrumbLink>
+                                                    )}
+                                                </BreadcrumbItem>
+                                                {!isLast && (
+                                                    <BreadcrumbSeparator className="hidden md:block" />
+                                                )}
+                                            </Fragment>
+                                        );
+                                    })}
+                                </BreadcrumbList>
+                            </Breadcrumb>
+                        </>
+                    )}
                 </header>
                 {children}
             </SidebarInset>

resources/js/Pages/Dashboard.tsx

@@ -1,9 +1,18 @@
 import AppLayout from "@/Layouts/AppLayout"
 import { Head } from '@inertiajs/react';
 
+const breadcrumbItems = [
+    {
+        title: 'Dashboard',
+        href: '/dashboard'
+    }
+]
+
 export default function Page() {
     return (
-        <AppLayout>
+        <AppLayout
+            breadcrumbItems={breadcrumbItems}
+        >
             <Head title="Dashboard" />
             <div className="flex flex-1 flex-col gap-4 p-4">
                 <div className="grid auto-rows-min gap-4 md:grid-cols-3">