feat: 優化中央後台 UI (用語調整、移除連結) 與實作 RWD 支援

resources/js/Layouts/LandlordLayout.tsx

@@ -15,6 +15,8 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/Components/ui/dropdown-menu";
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
 
 interface LandlordLayoutProps {
     children: React.ReactNode;
@@ -34,31 +36,51 @@ export default function LandlordLayout({ children, title }: LandlordLayoutProps)
             active: url === "/landlord" || url === "/landlord/",
         },
         {
-            label: "租戶管理",
+            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">
+        <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="fixed left-0 top-0 bottom-0 w-64 bg-slate-900 text-white flex flex-col">
-                <div className="h-16 flex items-center px-6 border-b border-slate-800">
+            <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>
+                        <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">
+                <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
@@ -71,24 +93,23 @@ export default function LandlordLayout({ children, title }: LandlordLayoutProps)
                         </Link>
                     ))}
                 </nav>
-
-                <div className="p-4 border-t border-slate-800">
-                    <Link
-                        href="/"
-                        className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm"
-                    >
-                        ← 返回 ERP 系統
-                    </Link>
-                </div>
             </aside>
 
             {/* Main Content */}
-            <main className="flex-1 ml-64">
+            <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-6">
-                    <h1 className="text-lg font-semibold text-slate-900">
-                        {title || "房東管理後台"}
-                    </h1>
+                <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">