251127:1700 Frontend Start Build
This commit is contained in:
admin
21
frontend/components/layout/dashboard-shell.tsx
Normal file
21
frontend/components/layout/dashboard-shell.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// File: components/layout/dashboard-shell.tsx
|
||||
"use client";
|
||||
|
||||
import { useUIStore } from "@/lib/stores/ui-store";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function DashboardShell({ children }: { children: React.ReactNode }) {
|
||||
const { isSidebarOpen } = useUIStore();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col min-h-screen transition-all duration-300 ease-in-out",
|
||||
// ปรับ Margin ซ้าย ตามสถานะ Sidebar
|
||||
isSidebarOpen ? "md:ml-[240px]" : "md:ml-[70px]"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
45
frontend/components/layout/navbar.tsx
Normal file
45
frontend/components/layout/navbar.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
// File: components/layout/navbar.tsx
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Menu, Bell } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useUIStore } from "@/lib/stores/ui-store";
|
||||
import { UserNav } from "./user-nav";
|
||||
|
||||
export function Navbar() {
|
||||
const { toggleSidebar } = useUIStore();
|
||||
|
||||
return (
|
||||
<header className="flex h-14 items-center gap-4 border-b bg-background px-4 lg:h-[60px] lg:pr-6 lg:pl-1 sticky top-0 z-30">
|
||||
{/* Toggle Sidebar Button (Mobile Only) */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="shrink-0 md:hidden"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle navigation menu</span>
|
||||
</Button>
|
||||
|
||||
<div className="w-full flex-1">
|
||||
{/* Breadcrumbs หรือ Search Bar จะมาใส่ตรงนี้ */}
|
||||
<h1 className="text-lg font-semibold md:text-xl hidden md:block">
|
||||
Document Management System
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Right Actions (เหลือชุดเดียวที่ถูกต้อง) */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon">
|
||||
<Bell className="h-5 w-5" />
|
||||
<span className="sr-only">Notifications</span>
|
||||
</Button>
|
||||
|
||||
{/* User Menu */}
|
||||
<UserNav />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
126
frontend/components/layout/sidebar.tsx
Normal file
126
frontend/components/layout/sidebar.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
// File: components/layout/sidebar.tsx
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useUIStore } from "@/lib/stores/ui-store";
|
||||
import { sidebarMenuItems, adminMenuItems } from "@/config/menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ChevronLeft, Menu, X } from "lucide-react";
|
||||
import { useEffect } from "react"; // ✅ Import useEffect
|
||||
|
||||
export function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
const { isSidebarOpen, toggleSidebar, closeSidebar } = useUIStore();
|
||||
|
||||
// ✅ เพิ่ม Logic นี้: ปิด Sidebar อัตโนมัติเมื่อหน้าจอเล็กกว่า 768px (Mobile)
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth < 768 && isSidebarOpen) {
|
||||
closeSidebar();
|
||||
}
|
||||
};
|
||||
|
||||
// ติดตั้ง Listener
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
// ล้าง Listener เมื่อ Component ถูกทำลาย
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [isSidebarOpen, closeSidebar]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Overlay */}
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 z-40 bg-background/80 backdrop-blur-sm transition-all duration-100 md:hidden",
|
||||
isSidebarOpen ? "opacity-100" : "opacity-0 pointer-events-none"
|
||||
)}
|
||||
onClick={closeSidebar}
|
||||
/>
|
||||
|
||||
{/* Sidebar Container */}
|
||||
<aside
|
||||
className={cn(
|
||||
"fixed top-0 left-0 z-50 h-screen border-r bg-card transition-all duration-300 ease-in-out flex flex-col",
|
||||
|
||||
// Mobile Width
|
||||
"w-[240px]",
|
||||
isSidebarOpen ? "translate-x-0" : "-translate-x-full",
|
||||
|
||||
// Desktop Styles
|
||||
"md:translate-x-0",
|
||||
isSidebarOpen ? "md:w-[240px]" : "md:w-[70px]"
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
"flex h-14 items-center border-b px-3 lg:h-[60px]",
|
||||
"justify-between md:justify-center",
|
||||
isSidebarOpen && "md:justify-between"
|
||||
)}>
|
||||
|
||||
<div className={cn(
|
||||
"flex items-center gap-2 font-bold text-primary truncate transition-all duration-300",
|
||||
!isSidebarOpen && "md:w-0 md:opacity-0 md:hidden"
|
||||
)}>
|
||||
<Link href="/dashboard">LCBP3 DMS</Link>
|
||||
</div>
|
||||
|
||||
{/* Desktop Toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleSidebar}
|
||||
className="hidden md:flex h-8 w-8"
|
||||
>
|
||||
{isSidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
{/* Mobile Close Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={closeSidebar} // ปุ่มนี้จะทำงานได้ถูกต้อง
|
||||
className="md:hidden h-8 w-8"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden py-4">
|
||||
<nav className="grid gap-1 px-2">
|
||||
{sidebarMenuItems.map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname.startsWith(item.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={index}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
|
||||
isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground",
|
||||
!isSidebarOpen && "md:justify-center md:px-2"
|
||||
)}
|
||||
title={!isSidebarOpen ? item.title : undefined}
|
||||
onClick={() => {
|
||||
if (window.innerWidth < 768) closeSidebar();
|
||||
}}
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0" />
|
||||
<span className={cn(
|
||||
"truncate transition-all duration-300",
|
||||
!isSidebarOpen && "md:w-0 md:opacity-0 md:hidden"
|
||||
)}>
|
||||
{item.title}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
89
frontend/components/layout/user-nav.tsx
Normal file
89
frontend/components/layout/user-nav.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
// File: components/layout/user-nav.tsx
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "@/components/ui/avatar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export function UserNav() {
|
||||
const { data: session } = useSession();
|
||||
const router = useRouter();
|
||||
|
||||
// Helper function to get initials from name
|
||||
const getInitials = (name: string) => {
|
||||
return name
|
||||
?.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")
|
||||
.toUpperCase()
|
||||
.substring(0, 2) || "US";
|
||||
};
|
||||
|
||||
const userName = session?.user?.name || "User";
|
||||
const userEmail = session?.user?.email || "user@example.com";
|
||||
// ใช้ role หรือ organization หากมีใน session (ต้องแก้ type ใน next-auth.d.ts แล้ว)
|
||||
const userRole = session?.user?.role || "Viewer";
|
||||
|
||||
const handleLogout = async () => {
|
||||
await signOut({ redirect: false });
|
||||
router.push("/login");
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
||||
<Avatar className="h-8 w-8">
|
||||
{/* ใส่ URL รูปถ้ามี */}
|
||||
<AvatarImage src={session?.user?.image || ""} alt={userName} />
|
||||
<AvatarFallback>{getInitials(userName)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56" align="end" forceMount>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium leading-none">{userName}</p>
|
||||
<p className="text-xs leading-none text-muted-foreground">
|
||||
{userEmail}
|
||||
</p>
|
||||
<p className="text-xs leading-none text-primary mt-1 font-semibold">
|
||||
{userRole}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem onClick={() => router.push('/profile')}>
|
||||
Profile
|
||||
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => router.push('/settings')}>
|
||||
Settings
|
||||
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleLogout}>
|
||||
Log out
|
||||
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user