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

redesign: proper globals.css, new Sidebar, DashboardHeader with clock
All checks were successful
Build & Deploy Dashboard / deploy (push) Successful in 1m0s
Details

Browse Source
This commit is contained in:
Cosmo
2026-04-16 09:18:11 +00:00
parent 254ecbfd14
commit 3cca22519e
3 changed files with 48 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut, useSession } from "next-auth/react";
import { signOut } from "next-auth/react";
import { LayoutDashboard, Monitor, Bookmark, LogOut, Home } from "lucide-react";
const NAV = [
@@ -12,19 +12,19 @@ const NAV = [
export function Sidebar() {
const pathname = usePathname();
const { data: session } = useSession();
return (
<aside className="w-[220px] flex-shrink-0 flex flex-col h-screen bg-[#0a0a14] border-r border-white/5">
<aside className="w-[220px] flex-shrink-0 flex flex-col h-screen" style={{ background: "#0a0a14", borderRight: "1px solid rgba(255,255,255,0.05)" }}>
{/* Logo */}
<div className="px-5 py-6 border-b border-white/5">
<div className="px-5 py-6" style={{ borderBottom: "1px solid rgba(255,255,255,0.05)" }}>
<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">
<div className="w-9 h-9 rounded-xl flex items-center justify-center shadow-lg"
style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)", boxShadow: "0 4px 20px rgba(99,102,241,0.3)" }}>
<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">Dashboard</div>
<div className="text-[10px]" style={{ color: "#475569" }}>Dashboard</div>
</div>
</div>
</div>
@@ -37,13 +37,19 @@ export function Sidebar() {
<Link
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"
}`}
className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all"
style={active ? {
background: "rgba(99,102,241,0.15)",
color: "#a5b4fc",
border: "1px solid rgba(99,102,241,0.25)",
} : {
color: "#475569",
border: "1px solid transparent",
}}
onMouseEnter={e => { if (!active) { (e.currentTarget as HTMLElement).style.color = "#94a3b8"; (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.04)"; } }}
onMouseLeave={e => { if (!active) { (e.currentTarget as HTMLElement).style.color = "#475569"; (e.currentTarget as HTMLElement).style.background = "transparent"; } }}
>
<Icon className={`w-4 h-4 ${active ? "text-indigo-400" : ""}`} />
<Icon className="w-4 h-4" style={{ color: active ? "#818cf8" : "inherit" }} />
{label}
</Link>
);
@@ -51,19 +57,22 @@ export function Sidebar() {
</nav>
{/* User */}
<div className="px-3 py-4 border-t border-white/5">
<div className="px-3 py-4" style={{ borderTop: "1px solid rgba(255,255,255,0.05)" }}>
<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">
<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)" }}>
D
</div>
<div className="flex-1 min-w-0">
<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 className="text-xs font-medium truncate" style={{ color: "#cbd5e1" }}>Daniil</div>
<div className="text-[10px] truncate" style={{ color: "#334155" }}>Admin</div>
</div>
<button
onClick={() => signOut({ callbackUrl: "/auth/signin" })}
className="text-slate-600 hover:text-red-400 transition-colors"
title="Выйти"
style={{ color: "#334155" }}
onMouseEnter={e => (e.currentTarget.style.color = "#f87171")}
onMouseLeave={e => (e.currentTarget.style.color = "#334155")}
>
<LogOut className="w-3.5 h-3.5" />
</button>