feat: redesign sidebar logos (wider, theme-aware) + animated sun/moon theme toggle

src/shared/components/layout/header.tsx

@@ -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>