star-erp/resources/js/Layouts/LandlordLayout.tsx

import { Link, usePage } from "@inertiajs/react";
import { cn } from "@/lib/utils";
import {
    Building2,
    LayoutDashboard,
    LogOut,
    User,
} from "lucide-react";
import { Toaster } from "sonner";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { useState } from "react";
import { Menu, X } from "lucide-react";

interface LandlordLayoutProps {
    children: React.ReactNode;
    title?: string;
}

export default function LandlordLayout({ children, title }: LandlordLayoutProps) {
    const { url, props } = usePage();
    // @ts-ignore
    const user = props.auth?.user || { name: 'Admin', username: 'admin' };

    const menuItems = [
        {
            label: "儀表板",
            href: "/landlord",
            icon: LayoutDashboard,
            active: url === "/landlord" || url === "/landlord/",
        },
        {
            label: "客戶管理",
            href: "/landlord/tenants",
            icon: Building2,
            active: url.startsWith("/landlord/tenants"),
        },
    ];

    const [isSidebarOpen, setIsSidebarOpen] = useState(false);

    return (
        <div className="flex min-h-screen bg-slate-50 relative">
            {/* Sidebar Overlay for mobile */}
            {isSidebarOpen && (
                <div
                    className="fixed inset-0 bg-black/50 z-40 lg:hidden transition-opacity"
                    onClick={() => setIsSidebarOpen(false)}
                />
            )}

            {/* Sidebar */}
            <aside className={cn(
                "fixed left-0 top-0 bottom-0 w-64 bg-slate-900 text-white flex flex-col z-50 transition-transform duration-300 lg:translate-x-0",
                isSidebarOpen ? "translate-x-0" : "-translate-x-full"
            )}>
                <div className="h-16 flex items-center justify-between px-6 border-b border-slate-800">
                    <Link href="/landlord" className="flex items-center gap-2">
                        <div className="w-8 h-8 bg-primary-main rounded-lg flex items-center justify-center">
                            <Building2 className="w-5 h-5 text-white" />
                        </div>
                        <span className="font-bold text-lg">中央後台</span>
                    </Link>
                    <button
                        className="lg:hidden text-slate-400 hover:text-white"
                        onClick={() => setIsSidebarOpen(false)}
                    >
                        <X className="w-6 h-6" />
                    </button>
                </div>

                <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
                    {menuItems.map((item) => (
                        <Link
                            key={item.href}
                            href={item.href}
                            onClick={() => setIsSidebarOpen(false)}
                            className={cn(
                                "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors",
                                item.active
                                    ? "bg-primary-main text-white"
                                    : "text-slate-400 hover:bg-slate-800 hover:text-white"
                            )}
                        >
                            <item.icon className="w-5 h-5" />
                            <span className="font-medium">{item.label}</span>
                        </Link>
                    ))}
                </nav>
            </aside>

            {/* Main Content */}
            <main className="flex-1 lg:ml-64 w-full">
                {/* Header */}
                <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 lg:px-6">
                    <div className="flex items-center gap-4">
                        <button
                            className="lg:hidden p-2 text-slate-600 hover:bg-slate-100 rounded-lg"
                            onClick={() => setIsSidebarOpen(true)}
                        >
                            <Menu className="w-6 h-6" />
                        </button>
                        <h1 className="text-lg font-semibold text-slate-900 truncate max-w-[200px] sm:max-w-none">
                            {title || "中央管理後台"}
                        </h1>
                    </div>

                    <DropdownMenu modal={false}>
                        <DropdownMenuTrigger className="flex items-center gap-2 outline-none group">
                            <div className="flex flex-col items-end mr-1">
                                <span className="text-sm font-medium text-slate-700">
                                    {user.name}
                                </span>
                                <span className="text-xs text-slate-500">系統管理員</span>
                            </div>
                            <div className="h-9 w-9 bg-slate-100 rounded-full flex items-center justify-center">
                                <User className="h-5 w-5 text-slate-600" />
                            </div>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-56 z-[100]">
                            <DropdownMenuLabel>我的帳號</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem asChild>
                                <Link
                                    href={route('logout')}
                                    method="post"
                                    as="button"
                                    className="w-full flex items-center cursor-pointer text-red-600"
                                >
                                    <LogOut className="mr-2 h-4 w-4" />
                                    <span>登出系統</span>
                                </Link>
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </header>

                {/* Content */}
                <div className="p-6">
                    {children}
                </div>
            </main>

            <Toaster richColors closeButton position="top-center" />
        </div>
    );
}