feat: redesign sidebar logos (wider, theme-aware) + animated sun/moon theme toggle
This commit is contained in:
AI Assistant
@@ -0,0 +1,100 @@
|
||||
"use client";
|
||||
|
||||
import { useTheme } from "next-themes";
|
||||
import { useEffect, useState } from "react";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
if (!mounted) {
|
||||
// Prevent hydration mismatch — render placeholder
|
||||
return <div className="h-7 w-14 rounded-full bg-muted" />;
|
||||
}
|
||||
|
||||
const isDark = resolvedTheme === "dark";
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={isDark}
|
||||
aria-label="Schimbă tema"
|
||||
onClick={() => setTheme(isDark ? "light" : "dark")}
|
||||
className={cn(
|
||||
"relative inline-flex h-7 w-14 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-500 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
isDark
|
||||
? "bg-gradient-to-r from-indigo-900 to-slate-800"
|
||||
: "bg-gradient-to-r from-sky-300 to-amber-200",
|
||||
)}
|
||||
>
|
||||
{/* Stars — visible in dark mode */}
|
||||
<span
|
||||
className={cn(
|
||||
"pointer-events-none absolute right-2 top-1 flex gap-[3px] transition-opacity duration-500",
|
||||
isDark ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
>
|
||||
<span className="h-[3px] w-[3px] rounded-full bg-white/80 animate-[pulse_2s_ease-in-out_infinite]" />
|
||||
<span
|
||||
className="mt-1 h-[2px] w-[2px] rounded-full bg-white/60 animate-[pulse_3s_ease-in-out_infinite]"
|
||||
style={{ animationDelay: "0.5s" }}
|
||||
/>
|
||||
<span
|
||||
className="h-[2px] w-[2px] rounded-full bg-white/50 animate-[pulse_2.5s_ease-in-out_infinite]"
|
||||
style={{ animationDelay: "1s" }}
|
||||
/>
|
||||
</span>
|
||||
|
||||
{/* Sliding circle (sun/moon) */}
|
||||
<span
|
||||
className={cn(
|
||||
"pointer-events-none relative inline-block h-5 w-5 rounded-full shadow-lg transition-all duration-500 ease-in-out",
|
||||
isDark ? "translate-x-7" : "translate-x-1",
|
||||
isDark
|
||||
? "bg-slate-200 shadow-slate-400/30"
|
||||
: "bg-amber-400 shadow-amber-500/40",
|
||||
)}
|
||||
>
|
||||
{/* Sun rays — visible in light mode */}
|
||||
<span
|
||||
className={cn(
|
||||
"absolute inset-0 transition-opacity duration-300",
|
||||
isDark ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
>
|
||||
{/* Glow */}
|
||||
<span className="absolute -inset-1 rounded-full bg-amber-300/30 animate-[pulse_2s_ease-in-out_infinite]" />
|
||||
</span>
|
||||
|
||||
{/* Moon craters — visible in dark mode */}
|
||||
<span
|
||||
className={cn(
|
||||
"absolute inset-0 transition-opacity duration-300",
|
||||
isDark ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
>
|
||||
<span className="absolute left-1 top-1 h-1.5 w-1.5 rounded-full bg-slate-300/60" />
|
||||
<span className="absolute bottom-1.5 right-1.5 h-1 w-1 rounded-full bg-slate-300/40" />
|
||||
<span className="absolute right-1 top-2.5 h-[3px] w-[3px] rounded-full bg-slate-300/30" />
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{/* Clouds — visible in light mode */}
|
||||
<span
|
||||
className={cn(
|
||||
"pointer-events-none absolute bottom-0.5 left-1.5 transition-all duration-500",
|
||||
isDark
|
||||
? "translate-y-2 opacity-0"
|
||||
: "translate-y-0 opacity-100",
|
||||
)}
|
||||
>
|
||||
<span className="inline-block h-2 w-4 rounded-full bg-white/60" />
|
||||
<span className="absolute -right-1 -top-0.5 h-1.5 w-2.5 rounded-full bg-white/40" />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useTheme } from "next-themes";
|
||||
import {
|
||||
Moon,
|
||||
Sun,
|
||||
PanelLeft,
|
||||
User as UserIcon,
|
||||
LogOut,
|
||||
@@ -20,13 +17,13 @@ import {
|
||||
} from "@/shared/components/ui/dropdown-menu";
|
||||
import { useAuth } from "@/core/auth";
|
||||
import { signIn, signOut } from "next-auth/react";
|
||||
import { ThemeToggle } from "@/shared/components/common/theme-toggle";
|
||||
|
||||
interface HeaderProps {
|
||||
onToggleSidebar?: () => void;
|
||||
}
|
||||
|
||||
export function Header({ onToggleSidebar }: HeaderProps) {
|
||||
const { setTheme } = useTheme();
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
|
||||
return (
|
||||
@@ -42,27 +39,8 @@ export function Header({ onToggleSidebar }: HeaderProps) {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Schimbă tema</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||
Luminos
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||
Întunecat
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||
Sistem
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<div className="flex items-center gap-3">
|
||||
<ThemeToggle />
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
|
||||
@@ -130,7 +130,7 @@ function SidebarLogos() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center gap-1.5">
|
||||
<div className="relative flex w-full items-center justify-between gap-2">
|
||||
{LOGO_COMPANIES.map((companyId, index) => {
|
||||
const company = COMPANIES[companyId];
|
||||
const logoSrc =
|
||||
@@ -159,9 +159,9 @@ function SidebarLogos() {
|
||||
<Image
|
||||
src={logoSrc}
|
||||
alt={company.shortName}
|
||||
width={40}
|
||||
width={200}
|
||||
height={40}
|
||||
className="h-10 w-10 object-contain"
|
||||
className="h-7 w-auto max-w-[72px] object-contain"
|
||||
suppressHydrationWarning
|
||||
/>
|
||||
</button>
|
||||
@@ -170,7 +170,7 @@ function SidebarLogos() {
|
||||
|
||||
{/* Confetti burst on secret combo */}
|
||||
{showConfetti && (
|
||||
<div className="pointer-events-none absolute -top-2 left-1/2 -translate-x-1/2 z-50">
|
||||
<div className="pointer-events-none absolute -bottom-6 left-1/2 -translate-x-1/2 z-50">
|
||||
<div className="flex gap-0.5 animate-[fadeIn_0.2s_ease-in]">
|
||||
{["🎉", "✨", "🏗️", "✨", "🎉"].map((emoji, i) => (
|
||||
<span
|
||||
@@ -197,14 +197,22 @@ export function Sidebar() {
|
||||
|
||||
return (
|
||||
<aside className="flex h-full w-64 shrink-0 flex-col border-r bg-card">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex h-14 items-center gap-2.5 border-b px-4 transition-colors hover:bg-accent/30"
|
||||
title="Panou principal"
|
||||
>
|
||||
<SidebarLogos />
|
||||
<span className="text-lg font-semibold">ArchiTools</span>
|
||||
</Link>
|
||||
<div className="border-b px-4 py-3">
|
||||
<Link
|
||||
href="/"
|
||||
className="mb-2 flex w-full items-center justify-center"
|
||||
title="Panou principal"
|
||||
>
|
||||
<SidebarLogos />
|
||||
</Link>
|
||||
<Link
|
||||
href="/"
|
||||
className="block text-center text-base font-semibold tracking-wide transition-colors hover:text-primary"
|
||||
title="Panou principal"
|
||||
>
|
||||
ArchiTools
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1 px-3 py-3">
|
||||
<Link
|
||||
|
||||
Reference in New Issue
Block a user