All files / laravel-saas/resources/js/Components/Layout AuthenticatedLayout.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { PropsWithChildren, ReactNode, useState } from 'react';
import { DashboardSidebar } from './DashboardSidebar';
import { DashboardHeader } from './DashboardHeader';
import { NotificationDropdown } from '@/Components/NotificationDropdown';
import { UserDropdown } from '@/Components/UserDropdown';
import { cn } from '@/lib/utils';
 
interface AuthenticatedLayoutProps extends PropsWithChildren {
    title?: string;
    header?: ReactNode;
    className?: string;
}
 
export default function AuthenticatedLayout({ 
    children, 
    title, 
    header,
    className 
}: AuthenticatedLayoutProps) {
    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
    const [isDarkMode, setIsDarkMode] = useState(false);
 
    const handleThemeToggle = () => {
        setIsDarkMode(!isDarkMode);
        // In a real app, you'd persist this preference and apply the theme
        if (!isDarkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    };
 
    return (
        <div className={cn('min-h-screen bg-background flex', className)}>
            {/* Sidebar */}
            <DashboardSidebar 
                collapsed={sidebarCollapsed}
                onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
            />
 
            {/* Main Content */}
            <div className="flex-1 flex flex-col h-screen">
                    {/* Header */}
                    <header className="bg-background border-b border-border">
                        <div className="flex items-center justify-between px-6 py-3">
                            {/* Left Section */}
                            <div className="flex items-center space-x-4">
                                {title && (
                                    <h1 className="text-lg font-semibold text-foreground">{title}</h1>
                                )}
                            </div>
 
                            {/* Right Section */}
                            <div className="flex items-center space-x-4">
                                <NotificationDropdown />
                                <UserDropdown />
                            </div>
                        </div>
                    </header>
 
                    {/* Page Header */}
                    {header && (
                        <div className="bg-background border-b border-border">
                            <div className="px-6 py-4">
                                {header}
                            </div>
                        </div>
                    )}
 
                {/* Page Content */}
                <main className="flex-1 p-6 bg-muted/30 overflow-auto">
                    {children}
                </main>
            </div>
        </div>
    );
}
 
export { AuthenticatedLayout };