214 lines
9.5 KiB
TypeScript
214 lines
9.5 KiB
TypeScript
import { Link, usePage, Head } from "@inertiajs/react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
Building2,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
User,
|
|
Menu,
|
|
X,
|
|
Settings,
|
|
PanelLeftClose,
|
|
PanelLeftOpen,
|
|
} from "lucide-react";
|
|
import { Toaster } from "sonner";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/Components/ui/dropdown-menu";
|
|
import { useState, useEffect } from "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);
|
|
const [isCollapsed, setIsCollapsed] = useState(() => {
|
|
if (typeof window !== "undefined") {
|
|
return localStorage.getItem("landlord-sidebar-collapsed") === "true";
|
|
}
|
|
return false;
|
|
});
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem("landlord-sidebar-collapsed", String(isCollapsed));
|
|
}, [isCollapsed]);
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-slate-50 relative">
|
|
<Head>
|
|
<link rel="icon" type="image/png" href="/favicon-landlord.png" />
|
|
<link rel="shortcut icon" href="/favicon-landlord.png" type="image/png" />
|
|
<link rel="apple-touch-icon" href="/favicon-landlord.png" />
|
|
</Head>
|
|
{/* 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 bg-slate-900 text-white flex flex-col z-50 transition-all duration-300 ease-in-out lg:translate-x-0",
|
|
isSidebarOpen ? "translate-x-0" : "-translate-x-full",
|
|
isCollapsed ? "lg:w-20" : "lg:w-64"
|
|
)}>
|
|
<div className={cn(
|
|
"h-16 flex items-center border-b border-slate-800 transition-all",
|
|
isCollapsed ? "justify-center px-0" : "justify-between px-6"
|
|
)}>
|
|
<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 shrink-0">
|
|
<Building2 className="w-5 h-5 text-white" />
|
|
</div>
|
|
{!isCollapsed && <span className="font-bold text-lg whitespace-nowrap">中央後台</span>}
|
|
</Link>
|
|
{!isCollapsed && (
|
|
<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-3 space-y-1 overflow-y-auto overflow-x-hidden">
|
|
{menuItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => setIsSidebarOpen(false)}
|
|
title={isCollapsed ? item.label : ""}
|
|
className={cn(
|
|
"flex items-center rounded-lg transition-all",
|
|
isCollapsed ? "justify-center px-0 h-10 w-10 mx-auto" : "gap-3 px-3 py-2.5",
|
|
item.active
|
|
? "bg-primary-main text-white"
|
|
: "text-slate-400 hover:bg-slate-800 hover:text-white"
|
|
)}
|
|
>
|
|
<item.icon className="w-5 h-5 shrink-0" />
|
|
{!isCollapsed && <span className="font-medium whitespace-nowrap">{item.label}</span>}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-slate-800 hidden lg:block">
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
className={cn(
|
|
"w-full flex items-center transition-colors text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg p-2",
|
|
isCollapsed ? "justify-center" : "gap-3"
|
|
)}
|
|
title={isCollapsed ? "展開側邊欄" : "收合側邊欄"}
|
|
>
|
|
{isCollapsed ? <PanelLeftOpen className="w-5 h-5" /> : (
|
|
<>
|
|
<PanelLeftClose className="w-5 h-5" />
|
|
<span className="text-sm font-medium">收合側邊欄</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className={cn(
|
|
"flex-1 flex flex-col transition-all duration-300 min-h-screen",
|
|
isCollapsed ? "lg:ml-20" : "lg:ml-64"
|
|
)}>
|
|
{/* 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 group-hover:text-slate-900 transition-colors">
|
|
{user.name} ({user.username})
|
|
</span>
|
|
<span className="text-xs text-slate-500">
|
|
{user.role_labels?.[0] || user.roles?.[0] || '系統管理員'}
|
|
</span>
|
|
</div>
|
|
<div className="h-9 w-9 bg-slate-100 rounded-full flex items-center justify-center text-slate-600 group-hover:bg-primary-lightest group-hover:text-primary-main transition-all">
|
|
<User className="h-5 w-5" />
|
|
</div>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56 z-[100]" sideOffset={8}>
|
|
<DropdownMenuLabel>{user.name} ({user.username})</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href={route('landlord.profile.edit')}
|
|
className="w-full flex items-center cursor-pointer text-slate-600 focus:bg-slate-100 focus:text-slate-900 group"
|
|
>
|
|
<Settings className="mr-2 h-4 w-4 text-slate-500 group-focus:text-slate-900" />
|
|
<span>使用者設定</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link
|
|
href={route('logout')}
|
|
method="post"
|
|
as="button"
|
|
className="w-full flex items-center cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50"
|
|
>
|
|
<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>
|
|
);
|
|
}
|