調整漢堡及header調整
This commit is contained in:
@@ -222,26 +222,28 @@ export default function AuthenticatedLayout({ children }: { children: React.Reac
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-slate-50">
|
||||
{/* Mobile Header */}
|
||||
<header className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 z-[60] flex items-center justify-between px-4">
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg">K</div>
|
||||
<span className="font-bold text-slate-900">小小冰室 ERP</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setIsMobileOpen(!isMobileOpen)}
|
||||
className="p-2 text-slate-600 hover:bg-slate-100 rounded-lg"
|
||||
>
|
||||
{isMobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</button>
|
||||
{/* Mobile Header -> Global Header */}
|
||||
<header className="fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 z-[60] flex items-center justify-between px-4 transition-all duration-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsMobileOpen(!isMobileOpen)}
|
||||
className="p-2 -ml-2 text-slate-600 hover:bg-slate-100 rounded-lg lg:hidden"
|
||||
>
|
||||
{isMobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</button>
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg">K</div>
|
||||
<span className="font-bold text-slate-900">小小冰室 ERP</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Sidebar Desktop */}
|
||||
<aside className={cn(
|
||||
"fixed left-0 top-0 bottom-0 bg-white border-r border-slate-200 z-50 transition-all duration-300 ease-in-out hidden lg:flex flex-col",
|
||||
"fixed left-0 top-0 bottom-0 bg-white border-r border-slate-200 z-50 transition-all duration-300 ease-in-out hidden lg:flex flex-col pt-16",
|
||||
isCollapsed ? "w-20" : "w-64"
|
||||
)}>
|
||||
<div className="h-16 flex items-center justify-between px-6 border-b border-slate-100">
|
||||
<div className="hidden h-16 items-center justify-between px-6 border-b border-slate-100">
|
||||
{!isCollapsed && (
|
||||
<Link href="/" className="flex items-center gap-2 group">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg group-hover:scale-110 transition-transform">K</div>
|
||||
@@ -308,7 +310,7 @@ export default function AuthenticatedLayout({ children }: { children: React.Reac
|
||||
"flex-1 transition-all duration-300 min-h-screen overflow-auto",
|
||||
"lg:ml-64",
|
||||
isCollapsed && "lg:ml-20",
|
||||
"pt-16 lg:pt-0" // Mobile header spacing
|
||||
"pt-16" // Always allow space for header
|
||||
)}>
|
||||
<div className="relative">
|
||||
{children}
|
||||
|
||||
@@ -16,6 +16,7 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
|
||||
import { Head, router } from "@inertiajs/react";
|
||||
import { debounce } from "lodash";
|
||||
import Pagination from "@/Components/shared/Pagination";
|
||||
import BreadcrumbNav from "@/Components/shared/BreadcrumbNav";
|
||||
|
||||
export interface Category {
|
||||
id: number;
|
||||
@@ -177,6 +178,14 @@ export default function ProductManagement({ products, categories, filters }: Pag
|
||||
<div className="container mx-auto p-6 max-w-7xl">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<BreadcrumbNav
|
||||
items={[
|
||||
{ label: "首頁", href: "/" },
|
||||
{ label: "商品與庫存管理" },
|
||||
{ label: "商品資料管理", isPage: true },
|
||||
]}
|
||||
className="mb-2"
|
||||
/>
|
||||
<h1 className="mb-2">商品資料管理</h1>
|
||||
<p className="text-gray-600">管理小小冰室原物料與成品資料</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user