daniil/digital-home-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: modern dark dashboard WOW effect - gradients, animations, new layout

Browse Source
This commit is contained in:
Cosmo
2026-04-16 08:06:13 +00:00
parent cd126135ef
commit 7aa02290d9
13 changed files with 296 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/layout/Sidebar.tsx
View File

@@ -1,84 +1,73 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import { LayoutDashboard, Server, Bookmark, LogOut } from "lucide-react";
import { cn } from "@/lib/utils";
import { signOut, useSession } from "next-auth/react";
import { LayoutDashboard, Monitor, Bookmark, LogOut, Home } from "lucide-react";
const navItems = [
{ href: "/", label: "Dashboard", icon: LayoutDashboard },
{ href: "/system", label: "System", icon: Server },
{ href: "/bookmarks", label: "Bookmarks", icon: Bookmark },
const NAV = [
{ href: "/", icon: LayoutDashboard, label: "Dashboard" },
{ href: "/system", icon: Monitor, label: "System" },
{ href: "/bookmarks", icon: Bookmark, label: "Bookmarks" },
];
export function Sidebar({ userName }: { userName?: string | null }) {
export function Sidebar() {
const pathname = usePathname();
const { data: session } = useSession();
return (
<aside className="sidebar w-64 min-h-screen flex flex-col fixed left-0 top-0 z-50">
<aside className="w-[220px] flex-shrink-0 flex flex-col h-screen bg-[#0a0a14] border-r border-white/5">
{/* Logo */}
<div className="p-5 border-b border-white/5">
<Link href="/" className="flex items-center gap-3 group">
<div
className="w-9 h-9 rounded-xl flex items-center justify-center text-sm font-bold text-white flex-shrink-0"
style={{ background: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)" }}
>
DH
<div className="px-5 py-6 border-b border-white/5">
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center shadow-lg shadow-indigo-500/20">
<Home className="w-4 h-4 text-white" />
</div>
<div>
<div className="text-sm font-bold text-white">Digital Home</div>
<div className="text-[10px] text-slate-500 uppercase tracking-wider">Dashboard</div>
<div className="text-[10px] text-slate-500">Dashboard</div>
</div>
</Link>
</div>
</div>
{/* Navigation */}
<nav className="flex-1 p-3 space-y-0.5 mt-2">
<div className="px-3 mb-2">
<span className="text-[10px] font-semibold text-slate-600 uppercase tracking-widest">Navigation</span>
</div>
{navItems.map((item) => {
const Icon = item.icon;
const isActive = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
{/* Nav */}
<nav className="flex-1 px-3 py-4 space-y-1">
{NAV.map(({ href, icon: Icon, label }) => {
const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
return (
<Link
key={item.href}
href={item.href}
className={cn(
"flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all",
isActive
? "bg-gradient-to-r from-indigo-500/20 to-violet-500/10 border-l-2 border-indigo-500 text-white pl-[10px]"
: "text-slate-500 hover:text-slate-300 hover:bg-white/5"
)}
key={href}
href={href}
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all ${
active
? "bg-indigo-500/15 text-indigo-300 border border-indigo-500/20"
: "text-slate-500 hover:text-slate-300 hover:bg-white/5 border border-transparent"
}`}
>
<Icon className={cn("w-4 h-4 shrink-0", isActive ? "text-indigo-400" : "")} />
{item.label}
<Icon className={`w-4 h-4 ${active ? "text-indigo-400" : ""}`} />
{label}
</Link>
);
})}
</nav>
{/* User section */}
<div className="p-3 border-t border-white/5">
<div className="flex items-center gap-3 px-3 py-2.5 rounded-xl mb-1">
<div
className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white flex-shrink-0"
style={{ background: "linear-gradient(135deg, #6366f1, #8b5cf6)" }}
>
{userName?.[0]?.toUpperCase() ?? "D"}
{/* User */}
<div className="px-3 py-4 border-t border-white/5">
<div className="flex items-center gap-3 px-3 py-2 rounded-xl" style={{ background: "rgba(255,255,255,0.03)" }}>
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center text-xs font-bold text-white flex-shrink-0">
D
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-white truncate">{userName ?? "Daniil"}</div>
<div className="text-[10px] text-slate-500">Administrator</div>
<div className="text-xs font-medium text-slate-300 truncate">{session?.user?.name ?? "Daniil"}</div>
<div className="text-[10px] text-slate-600 truncate">Admin</div>
</div>
<button
onClick={() => signOut({ callbackUrl: "/auth/signin" })}
className="text-slate-600 hover:text-red-400 transition-colors"
title="Выйти"
>
<LogOut className="w-3.5 h-3.5" />
</button>
</div>
<button
onClick={() => signOut({ callbackUrl: "/auth/signin" })}
className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-sm text-slate-500 hover:text-red-400 hover:bg-red-500/10 transition-all"
>
<LogOut className="w-4 h-4" />
Выйти
</button>
</div>
</aside>
);