Sidebar.tsx

Go to the documentation of this file.

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
 
interface SidebarProps {
  currentPage: string;
}
 
const menuItems = [
  { name: "Home", path: "/pages/home", icon: "🏠" },
  { name: "Sales", path: "/pages/sales", icon: "💰" },
  { name: "Products", path: "/pages/products", icon: "📦" },
  { name: "Customers", path: "/pages/customers", icon: "👥" },
  { name: "Reports", path: "/pages/reports", icon: "📊" },
  { name: "Stores", path: "/pages/stores", icon: "🏪" },
];
 
export default function Sidebar({ currentPage }: SidebarProps) {
  const pathname = usePathname();
 
  return (
    <div className="bg-white shadow-lg w-64 min-h-screen flex flex-col">
      {/* Header */}
      <div className="p-6 border-b">
        <h1 className="text-xl font-bold text-gray-800">EverydayPOS</h1>
        <p className="text-sm text-gray-600">Point of Sale System</p>
      </div>
 
      {/* Navigation */}
      <nav className="flex-1 p-4">
        <ul className="space-y-2">
          {menuItems.map((item) => {
            const isActive = currentPage === item.name.toLowerCase() || pathname === item.path;
            return (
              <li key={item.name}>
                <Link
                  href={item.path}
                  className={`flex items-center p-3 rounded-lg transition-colors ${
                    isActive
                      ? "bg-blue-100 text-blue-700 border-r-4 border-blue-700"
                      : "text-gray-700 hover:bg-gray-100"
                  }`}
                >
                  <span className="mr-3 text-lg">{item.icon}</span>
                  <span className="font-medium">{item.name}</span>
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>
 
      {/* Footer */}
      <div className="p-4 border-t">
        <Link
          href="/"
          className="flex items-center p-2 text-gray-600 hover:text-gray-800 transition-colors"
        >
          <span className="mr-2">🚪</span>
          <span>Logout</span>
        </Link>
      </div>
    </div>
  );
}