Initial commit: HelpDesk ICHN - .NET 10 backend + Next.js 16 frontend

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useAuth } from "@/lib/auth";
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const { user, logout } = useAuth();
+
+  const navItems = [
+    { href: "/", icon: "bi-speedometer2", label: "Dashboard" },
+    { href: "/tickets", icon: "bi-ticket-detailed", label: "Tickets" },
+    { href: "/knowledge-base", icon: "bi-journal-bookmark", label: "Knowledge Base" },
+    { href: "/users", icon: "bi-people", label: "Users" },
+    { href: "/settings", icon: "bi-gear", label: "Settings" },
+  ];
+
+  return (
+    <aside className="sidebar" id="sidebar">
+      <div className="sidebar-brand">
+        <i className="bi bi-headset fs-3"></i>
+        <h5>HelpDesk ICHN</h5>
+      </div>
+
+      <nav className="flex-column mt-3">
+        {navItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={`nav-link ${
+              pathname === item.href ||
+              (item.href !== "/" && pathname.startsWith(item.href))
+                ? "active"
+                : ""
+            }`}
+          >
+            <i className={`bi ${item.icon}`}></i>
+            <span>{item.label}</span>
+          </Link>
+        ))}
+      </nav>
+
+      <div className="sidebar-user">
+        <div className="avatar">
+          {user?.name
+            ?.split(" ")
+            .map((n) => n[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2) || "U"}
+        </div>
+        <div className="sidebar-user-info">
+          <div className="name">{user?.name || "Usuario"}</div>
+          <div className="role">{user?.role || "Agente"}</div>
+        </div>
+        <button
+          onClick={logout}
+          className="btn btn-link text-white p-1"
+          title="Cerrar sesión"
+        >
+          <i className="bi bi-box-arrow-right fs-5"></i>
+        </button>
+      </div>
+    </aside>
+  );
+}