Initial commit: Digital Home dashboard

2026-04-15 20:31:28 +00:00
commit c5c4603903
33 changed files with 1384 additions and 0 deletions
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -0,0 +1,78 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { signOut } from "next-auth/react";
+import { Home, Server, Bookmark, LogOut, LayoutDashboard } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { href: "/", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/system", label: "System", icon: Server },
+  { href: "/bookmarks", label: "Bookmarks", icon: Bookmark },
+];
+
+export function Sidebar({ userName }: { userName?: string | null }) {
+  const pathname = usePathname();
+
+  return (
+    <aside className="sidebar w-64 min-h-screen flex flex-col fixed left-0 top-0 z-50">
+      {/* Logo */}
+      <div className="p-6 border-b border-indigo-500/10">
+        <Link href="/" className="flex items-center gap-3 group">
+          <div className="w-9 h-9 rounded-xl bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center group-hover:bg-indigo-500/30 transition-colors">
+            <Home className="w-5 h-5 text-indigo-400" />
+          </div>
+          <div>
+            <div className="text-sm font-bold text-white">Digital Home</div>
+            <div className="text-xs text-slate-500">Dashboard</div>
+          </div>
+        </Link>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-4 space-y-1">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all",
+                isActive
+                  ? "bg-indigo-500/20 text-indigo-300 border border-indigo-500/20"
+                  : "text-slate-400 hover:text-slate-200 hover:bg-slate-800/50"
+              )}
+            >
+              <Icon className="w-4 h-4 shrink-0" />
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* User */}
+      <div className="p-4 border-t border-slate-800">
+        <div className="flex items-center gap-3 px-2 mb-2">
+          <div className="w-8 h-8 rounded-full bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center">
+            <span className="text-xs font-bold text-indigo-400">
+              {userName?.[0]?.toUpperCase() ?? "D"}
+            </span>
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-sm font-medium text-white truncate">{userName ?? "Daniil"}</div>
+            <div className="text-xs text-slate-500">Administrator</div>
+          </div>
+        </div>
+        <button
+          onClick={() => signOut({ callbackUrl: "/auth/signin" })}
+          className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-all"
+        >
+          <LogOut className="w-4 h-4" />
+          Выйти
+        </button>
+      </div>
+    </aside>
+  );
+}