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

Cleanup

Browse Source
This commit is contained in:
g
2025-02-08 01:56:42 +00:00
parent 468fd69cb5
commit 7374e56253
13 changed files with 297 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/layout/layout.tsx
View File

@@ -1,29 +1,29 @@
"use client";
"use client"
import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import Sidebar from "./sidebar";
import { useState, useEffect } from "react"
import { useTheme } from "next-themes"
import Sidebar from "./sidebar"
import type React from "react" // Added import for React
interface LayoutProps {
children: React.ReactNode;
children: React.ReactNode
}
export default function Layout({ children }: LayoutProps) {
const { theme } = useTheme();
const [mounted, setMounted] = useState(false);
const { theme } = useTheme()
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), []);
useEffect(() => setMounted(true), [])
if (!mounted) return null;
if (!mounted) return null
return (
<div className={`flex h-screen ${theme === "dark" ? "dark" : ""}`}>
<Sidebar />
<div className="w-full flex flex-1 flex-col">
<main className="flex-1 overflow-auto p-6 bg-white dark:bg-[#0F0F12]">
{children}
</main>
<main className="flex-1 overflow-auto p-6 dak:bg-[#0F0F12]">{children}</main>
</div>
</div>
);
}
)
}

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

@@ -1,24 +1,22 @@
import Link from "next/link";
import Link from "next/link"
import type { LucideIcon } from "lucide-react"
import type React from "react" // Added import for React
interface NavItemProps {
href: string;
icon: React.ElementType;
children: React.ReactNode;
onClick?: () => void;
href: string
icon: LucideIcon
children: React.ReactNode
onClick?: () => void
}
export const NavItem: React.FC<NavItemProps> = ({
href,
icon: Icon,
children,
onClick,
}) => (
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]"
className="flex items-center px-3 py-2 text-sm rounded-md transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
>
<Icon className="h-4 w-4 mr-3 flex-shrink-0" />
{children}
</Link>
);
)

125
components/layout/sidebar.tsx
View File

@@ -1,114 +1,43 @@
"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 },
],
},
];
"use client"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { ShoppingCart, LogOut } from "lucide-react"
import { NavItem } from "./nav-item"
import { Button } from "@/components/ui/button"
import { sidebarConfig } from "@/config/sidebar"
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);
}
};
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const router = useRouter()
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]
fixed inset-y-0 left-0 z-[70] w-64 bg-background transform transition-transform duration-200 ease-in-out
lg:translate-x-0 lg:static lg:w-64 border-r border-border
${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]"
>
<Link href="/dashboard" className="h-16 px-6 flex items-center border-b border-border">
<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>
<ShoppingCart className="h-6 w-6 text-foreground" />
<span className="text-lg font-semibold text-foreground">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">
<div className="px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
{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)}
>
<NavItem key={idx} href={item.href} icon={item.icon} onClick={() => setIsMobileMenuOpen(false)}>
{item.name}
</NavItem>
))}
@@ -117,20 +46,19 @@ const Sidebar: React.FC = () => {
))}
</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]"
<div className="p-4 border-t border-border">
<Button
onClick={() => {}}
variant="ghost"
className="w-full justify-start text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 hover:bg-background"
>
<LogOut className="h-5 w-5 mr-3 flex-shrink-0" />
Logout
</button>
</Button>
</div>
</div>
</nav>
{/* Mobile Menu Overlay */}
{isMobileMenuOpen && (
<div
className="fixed inset-0 bg-black bg-opacity-50 z-[65] lg:hidden"
@@ -138,7 +66,8 @@ const Sidebar: React.FC = () => {
/>
)}
</>
);
};
)
}
export default Sidebar
export default Sidebar;