g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update sidebar

Browse Source
This commit is contained in:
g
2025-02-07 22:48:54 +00:00
parent 80eb0a6c1b
commit 29b9e0fd9f
2 changed files with 79 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/layout/nav-item.tsx Normal file
View File

@@ -0,0 +1,24 @@
import Link from "next/link";
interface NavItemProps {
href: string;
icon: React.ElementType;
children: React.ReactNode;
onClick?: () => void;
}
export const NavItem: React.FC<NavItemProps> = ({
href,
icon: Icon,
children,
onClick,
}) => (
<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>
);

102
components/layout/sidebar.tsx
View File

@@ -1,7 +1,6 @@
"use client";
import { fetchData } from '@/lib/data-service';
import { fetchData } from "@/lib/data-service";
import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
@@ -16,25 +15,39 @@ import {
Menu,
} from "lucide-react";
interface NavItemProps {
import { NavItem } from "./nav-item";
interface SidebarItem {
name: string;
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>
);
interface SidebarSection {
title: string;
items: SidebarItem[];
}
function Sidebar() {
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();
@@ -49,7 +62,8 @@ function Sidebar() {
if (!res.ok) throw new Error("Logout failed");
document.cookie = "authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
document.cookie =
"authToken=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT;";
router.push("/login");
} catch (error) {
console.error("Logout error:", error);
@@ -58,14 +72,7 @@ function Sidebar() {
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>
{/* 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
@@ -74,6 +81,7 @@ function Sidebar() {
`}
>
<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]"
@@ -86,39 +94,30 @@ function Sidebar() {
</div>
</Link>
{/* Sidebar Navigation Items */}
<div className="flex-1 overflow-y-auto py-4 px-4 space-y-6">
<div>
{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">
Overview
{section.title}
</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
{section.items.map((item, idx) => (
<NavItem
key={idx}
href={item.href}
icon={item.icon}
onClick={() => setIsMobileMenuOpen(false)}
>
{item.name}
</NavItem>
))}
</div>
</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>
{/* Logout Button */}
<div className="p-4 border-t border-gray-200 dark:border-[#1F1F23]">
<button
onClick={handleLogout}
@@ -131,6 +130,7 @@ function Sidebar() {
</div>
</nav>
{/* Mobile Menu Overlay */}
{isMobileMenuOpen && (
<div
className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
@@ -139,6 +139,6 @@ function Sidebar() {
)}
</>
);
}
};
export default Sidebar;