145 lines
4.2 KiB
TypeScript
145 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { fetchData } from "@/lib/data-service";
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
Package,
|
|
ShoppingCart,
|
|
Home,
|
|
Truck,
|
|
Box,
|
|
Settings,
|
|
LogOut,
|
|
Menu,
|
|
} from "lucide-react";
|
|
|
|
import { NavItem } from "./nav-item";
|
|
|
|
interface SidebarItem {
|
|
name: string;
|
|
href: string;
|
|
icon: React.ElementType;
|
|
}
|
|
|
|
interface SidebarSection {
|
|
title: string;
|
|
items: SidebarItem[];
|
|
}
|
|
|
|
const sidebarConfig: SidebarSection[] = [
|
|
{
|
|
title: "Overview",
|
|
items: [
|
|
{ name: "Dashboard", href: "/dashboard", icon: Home },
|
|
{ name: "Orders", href: "/dashboard/orders", icon: Package },
|
|
],
|
|
},
|
|
{
|
|
title: "Management",
|
|
items: [
|
|
{ name: "Products", href: "/dashboard/products", icon: Box },
|
|
{ name: "Shipping", href: "/dashboard/shipping", icon: Truck },
|
|
{ name: "Storefront", href: "/dashboard/storefront", icon: Settings },
|
|
],
|
|
},
|
|
];
|
|
|
|
|
|
const Sidebar: React.FC = () => {
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
const authToken = document.cookie.split("authToken=")[1];
|
|
const res = await fetchData(`${process.env.NEXT_PUBLIC_API_URL}/logout`, {
|
|
method: "POST",
|
|
headers: { Authorization: `Bearer ${authToken}` },
|
|
credentials: "include",
|
|
});
|
|
|
|
if (!res.ok) throw new Error("Logout failed");
|
|
|
|
document.cookie =
|
|
"authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
|
|
router.push("/login");
|
|
} catch (error) {
|
|
console.error("Logout error:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Sidebar Navigation */}
|
|
<nav
|
|
className={`
|
|
fixed inset-y-0 left-0 z-[70] w-64 bg-white dark:bg-[#0F0F12] transform transition-transform duration-200 ease-in-out
|
|
lg:translate-x-0 lg:static lg:w-64 border-r border-gray-200 dark:border-[#1F1F23]
|
|
${isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"}
|
|
`}
|
|
>
|
|
<div className="h-full flex flex-col">
|
|
{/* Brand Logo */}
|
|
<Link
|
|
href="/dashboard"
|
|
className="h-16 px-6 flex items-center border-b border-gray-200 dark:border-[#1F1F23]"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<ShoppingCart className="h-6 w-6 text-gray-900 dark:text-white" />
|
|
<span className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Ember
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Sidebar Navigation Items */}
|
|
<div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
|
|
{sidebarConfig.map((section, index) => (
|
|
<div key={index}>
|
|
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
{section.title}
|
|
</div>
|
|
<div className="space-y-1">
|
|
{section.items.map((item, idx) => (
|
|
<NavItem
|
|
key={idx}
|
|
href={item.href}
|
|
icon={item.icon}
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
{item.name}
|
|
</NavItem>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Logout Button */}
|
|
<div className="p-4 border-t border-gray-200 dark:border-[#1F1F23]">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center px-3 py-2 text-sm rounded-md transition-colors text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
|
|
>
|
|
<LogOut className="h-5 w-5 mr-3 flex-shrink-0" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile Menu Overlay */}
|
|
{isMobileMenuOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|