tvone/app/components/layout/admin/admin-sidebar-nav.tsx

"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BarChart3,
  FolderPlus,
  HelpCircle,
  LayoutDashboard,
  Newspaper,
  Settings,
  Users,
} from "lucide-react";

type NavLinkItem = {
  kind: "link";
  href: string;
  label: string;
  icon: ReactNode;
};

type NavDisabledItem = {
  kind: "disabled";
  label: string;
  icon: ReactNode;
};

const navItems: (NavLinkItem | NavDisabledItem)[] = [
  { kind: "link", href: "/admin/dashboard", label: "Painel", icon: <LayoutDashboard size={18} /> },
  { kind: "disabled", label: "Meus Artigos", icon: <Newspaper size={18} /> },
  { kind: "disabled", label: "Equipa", icon: <Users size={18} /> },
  { kind: "disabled", label: "Análises", icon: <BarChart3 size={18} /> },
  { kind: "link", href: "/admin/create-news", label: "Adicionar Notícia", icon: <Newspaper size={18} /> },
  {
    kind: "link",
    href: "/admin/manage-category",
    label: "Adicionar categoria",
    icon: <FolderPlus size={18} />,
  },
  { kind: "disabled", label: "Definições", icon: <Settings size={18} /> },
  { kind: "disabled", label: "Ajuda", icon: <HelpCircle size={18} /> },
];

function pathIsActive(pathname: string, href: string) {
  if (pathname === href) return true;
  if (href === "/admin/dashboard") return false;
  return pathname.startsWith(`${href}/`);
}

export function AdminSidebarNav() {
  const pathname = usePathname();

  return (
    <nav className="flex-1 space-y-1">
      {navItems.map((item) => {
        if (item.kind === "disabled") {
          return (
            <div
              key={item.label}
              className="flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium text-slate-400 cursor-not-allowed"
              aria-disabled
            >
              {item.icon}
              {item.label}
            </div>
          );
        }

        const active = pathIsActive(pathname, item.href);

        return (
          <Link
            key={item.href}
            href={item.href}
            className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all ${
              active
                ? "bg-blue-600 text-white shadow-md shadow-blue-200"
                : "text-slate-500 hover:bg-slate-100"
            }`}
            aria-current={active ? "page" : undefined}
          >
            {item.icon}
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}