WatchLink/src/components/app-shell.tsx

import Link from "next/link";
import { Gauge, MonitorPlay, Shield, UsersRound } from "lucide-react";

const nav = [
  { href: "/dashboard", label: "Dashboard", icon: Gauge },
  { href: "/rooms/@admin", label: "Rooms", icon: MonitorPlay },
  { href: "/friends", label: "Friends", icon: UsersRound }
];

export function AppShell({
  children,
  active = "Dashboard",
  isAdmin = false
}: {
  children: React.ReactNode;
  active?: string;
  isAdmin?: boolean;
}) {
  const visibleNav = isAdmin ? [...nav, { href: "/admin", label: "Admin", icon: Shield }] : nav;

  return (
    <div className="app-shell">
      <aside className="sidebar">
        <Link className="brand" href="/dashboard">
          <span className="brand-mark">WL</span>
          <span>WatchLink</span>
        </Link>
        <nav className="nav-list" aria-label="Primary">
          {visibleNav.map((item) => {
            const Icon = item.icon;
            return (
              <Link key={item.href} href={item.href} className={`nav-item ${active === item.label ? "active" : ""}`}>
                <Icon size={17} />
                {item.label}
              </Link>
            );
          })}
        </nav>
      </aside>
      <main className="main">{children}</main>
    </div>
  );
}