140 lines
4.7 KiB
TypeScript
140 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
|
|
interface NavItemProps {
|
|
href: string;
|
|
icon: React.ElementType;
|
|
children: React.ReactNode;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
const NavItem = ({ href, icon: Icon, children, onClick }: NavItemProps) => (
|
|
<Link
|
|
href={href}
|
|
onClick={onClick}
|
|
className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#1F1F23]"
|
|
>
|
|
<Icon className="h-4 w-4 mr-3 flex-shrink-0" />
|
|
{children}
|
|
</Link>
|
|
);
|
|
|
|
export default function Sidebar() {
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
const authToken = document.cookie.split("authToken=")[1];
|
|
const res = await fetch(`${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 (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="lg:hidden fixed top-4 left-4 z-[70] p-2 rounded-lg bg-white dark:bg-[#0F0F12] shadow-md"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
<Menu className="h-5 w-5 text-gray-600 dark:text-gray-300" />
|
|
</button>
|
|
|
|
<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">
|
|
<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>
|
|
|
|
<div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
|
|
<div>
|
|
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Overview
|
|
</div>
|
|
<div className="space-y-1">
|
|
<NavItem href="/dashboard" icon={Home} onClick={() => setIsMobileMenuOpen(false)}>
|
|
Dashboard
|
|
</NavItem>
|
|
<NavItem href="/dashboard/orders" icon={Package} onClick={() => setIsMobileMenuOpen(false)}>
|
|
Orders
|
|
</NavItem>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
|
|
Management
|
|
</div>
|
|
<div className="space-y-1">
|
|
<NavItem href="/dashboard/products" icon={Box} onClick={() => setIsMobileMenuOpen(false)}>
|
|
Products
|
|
</NavItem>
|
|
<NavItem href="/dashboard/shipping" icon={Truck} onClick={() => setIsMobileMenuOpen(false)}>
|
|
Shipping
|
|
</NavItem>
|
|
<NavItem href="/dashboard/storefront" icon={Settings} onClick={() => setIsMobileMenuOpen(false)}>
|
|
Storefront
|
|
</NavItem>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
{isMobileMenuOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
} |