Crowmate/Wyview
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add a white theme

Browse Source
This commit is contained in:
Pierre Ryssen
2026-03-11 16:02:55 +01:00
parent 9642f2511a
commit d5d7b15f16
22 changed files with 297 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/Sidebar.tsx
View File

@@ -3,6 +3,8 @@
import { useRouter, usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import DragonEye from "@/components/DragonEye";
import ThemeToggleButton from "@/components/ThemeToggleButton";
import { useTheme } from "@/lib/theme";
import {
LayoutDashboard,
Twitch,
@@ -25,20 +27,28 @@ const nav = [
export default function Sidebar() {
const router = useRouter();
const pathname = usePathname();
const { theme } = useTheme();
const isLight = theme === "light";
const handleLogout = () => {
signOut({ callbackUrl: "/" });
};
const bg = isLight ? "bg-wy-light-surface" : "bg-wy-dark";
const border = isLight ? "border-wy-light-border" : "border-wy-border";
const textSec = isLight ? "text-wy-light-text-secondary" : "text-wy-text-secondary";
const textPri = isLight ? "text-wy-light-text-primary" : "text-wy-text-primary";
const title = isLight ? "text-wy-light-text-primary" : "text-white";
return (
<aside className="fixed left-0 top-0 h-screen w-56 bg-wy-dark border-r border-wy-border flex flex-col z-50">
<aside className={`fixed left-0 top-0 h-screen w-56 ${bg} border-r ${border} flex flex-col z-50`}>
{/* Logo */}
<div className="flex items-center gap-3 px-5 py-6 border-b border-wy-border">
<div className={`flex items-center gap-3 px-5 py-6 border-b ${border}`}>
<DragonEye size={32} />
<div>
<div className="text-[8px] font-mono tracking-[0.3em] text-acid-green/60 uppercase">Analytics</div>
<div className="text-base font-black tracking-widest text-white">WYVIEW</div>
<div className={`text-[8px] font-mono tracking-[0.3em] ${isLight ? "text-sky-400/80" : "text-acid-green/60"} uppercase`}>Analytics</div>
<div className={`text-base font-black tracking-widest ${title}`}>WYVIEW</div>
</div>
</div>
@@ -51,22 +61,30 @@ export default function Sidebar() {
onClick={() => router.push(href)}
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-left transition-all duration-150 group ${
active
? "bg-acid-green/10 border border-acid-green/30 text-acid-green"
: "border border-transparent text-wy-text-secondary hover:text-wy-text-primary hover:bg-white/[0.04]"
? isLight
? "bg-sky-100 border border-sky-300 text-sky-600"
: "bg-acid-green/10 border border-acid-green/30 text-acid-green"
: `border border-transparent ${textSec} hover:${textPri} ${isLight ? "hover:bg-sky-50" : "hover:bg-white/[0.04]"}`
}`}
>
<Icon size={16} className="flex-shrink-0" />
<span className="text-sm font-medium">{label}</span>
{active && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-acid-green" />}
{active && (
<span className={`ml-auto w-1.5 h-1.5 rounded-full ${isLight ? "bg-sky-500" : "bg-acid-green"}`} />
)}
</button>
);
})}
</nav>
<div className="px-3 py-4 border-t border-wy-border">
<div className={`px-3 py-4 border-t ${border} flex flex-col gap-2`}>
{/* Theme toggle */}
<div className="flex justify-end pr-1">
<ThemeToggleButton />
</div>
<button
onClick={handleLogout}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-wy-text-secondary hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/25 transition-all duration-150"
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md ${textSec} hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/25 transition-all duration-150`}
>
<LogOut size={16} />
<span className="text-sm font-medium">Déconnexion</span>