zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

refactor(admin): replace ThemeToggle component with inline theme hook in AdminHeader

Browse Source
This commit is contained in:
Hyko
2026-04-15 19:55:38 -04:00
parent 8b8accdfce
commit 1d64ffd6f5
1 changed files with 114 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/components/AdminHeader.js
+114 -117
View File
@@ -1,20 +1,19 @@
'use client'; 'use client';
import React from 'react';
import { Menu, Transition } from '@headlessui/react';
import { Fragment } from 'react'; import { Fragment } from 'react';
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@zen/core/shared/icons'; import { ChevronDownIcon } from '@zen/core/shared/icons';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import ThemeToggle from './ThemeToggle'; import { useTheme, getThemeIcon } from '@zen/core/themes';
const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN' }) => { const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN' }) => {
const router = useRouter(); const router = useRouter();
const getImageUrl = (imageKey) => { const getImageUrl = (imageKey) => {
if (!imageKey) return null; if (!imageKey) return null;
return `/zen/api/storage/${imageKey}`; return `/zen/api/storage/${imageKey}`;
}; };
const handleLogout = async () => { const handleLogout = async () => {
try { try {
if (onLogout) { if (onLogout) {
@@ -44,14 +43,18 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
.slice(0, 2); .slice(0, 2);
}; };
const quickLinks = []; const { theme, toggle, systemIsDark } = useTheme();
const ThemeIcon = getThemeIcon(theme, systemIsDark);
const themeLabel = theme === 'light' ? 'Mode clair' : theme === 'dark' ? 'Mode sombre' : 'Thème système';
const quickLinks = [];
const imageUrl = getImageUrl(user?.image);
const userInitials = getUserInitials(user?.name); const userInitials = getUserInitials(user?.name);
return ( return (
<header className="bg-white dark:bg-black border-b border-neutral-200 dark:border-neutral-800/70 sticky top-0 z-30 h-14 flex items-center w-full"> <header className="bg-white dark:bg-black border-b border-neutral-200 dark:border-neutral-800/70 sticky top-0 z-30 h-14 flex items-center w-full">
<div className="flex items-center justify-between lg:justify-end px-4 lg:px-6 py-2 w-full"> <div className="flex items-center justify-between lg:justify-end px-4 lg:px-6 py-2 w-full">
{/* Left section - Mobile menu button + Logo (hidden on desktop) */} {/* Left section — Mobile menu button + Logo */}
<div className="flex items-center space-x-3 lg:hidden"> <div className="flex items-center space-x-3 lg:hidden">
<button <button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
@@ -65,10 +68,9 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
<h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1> <h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1>
</div> </div>
{/* Right Section - Theme Toggle + Quick Links + Profile */} {/* Right section — Quick links + Profile */}
<div className="flex items-center space-x-3 sm:space-x-4"> <div className="flex items-center gap-3 sm:gap-4">
{/* Quick Links - Hidden on very small screens */} <nav className="hidden sm:flex items-center gap-4 lg:gap-6">
<nav className="hidden sm:flex items-center space-x-4 lg:space-x-6">
{quickLinks.map((link) => ( {quickLinks.map((link) => (
<a <a
key={link.name} key={link.name}
@@ -80,129 +82,124 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
))} ))}
</nav> </nav>
{/* Theme Toggle */}
<ThemeToggle />
{/* User Profile Menu */} {/* User Profile Menu */}
<Menu as="div" className="relative"> <Menu as="div" className="relative">
<Menu.Button className="cursor-pointer flex items-center space-x-2 sm:space-x-3 px-2 sm:px-3 py-2 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800/50 transition-all duration-200 group ui-open:bg-neutral-100 dark:ui-open:bg-neutral-800/50 outline-none"> <MenuButton className="cursor-pointer flex items-center gap-2.5 px-2.5 py-1.5 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200 outline-none group">
{/* Avatar for desktop - hidden on mobile */} {/* Avatar */}
<div className="hidden sm:flex items-center space-x-3"> {imageUrl ? (
{getImageUrl(user?.image) && ( <img
<img src={imageUrl}
src={getImageUrl(user.image)} alt={user?.name || 'User'}
alt={user?.name || 'User'} className="w-7 h-7 rounded-lg object-cover shrink-0"
className="w-8 h-8 rounded-lg object-cover" />
/> ) : (
)} <div className="w-7 h-7 rounded-lg bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center shrink-0">
<div className="text-left"> <span className="text-xs font-medium text-neutral-600 dark:text-neutral-300">{userInitials}</span>
<p className="text-sm font-medium text-neutral-900 dark:text-white">{user?.name || 'User'}</p>
</div> </div>
</div> )}
{/* Avatar for mobile - visible on mobile only */} {/* Name — desktop only */}
<div className="sm:hidden"> <span className="hidden sm:block text-sm font-medium text-neutral-900 dark:text-white">
{getImageUrl(user?.image) && ( {user?.name || 'User'}
<img </span>
src={getImageUrl(user.image)} <ChevronDownIcon className="w-3.5 h-3.5 shrink-0 text-neutral-400 dark:text-neutral-600 transition-transform duration-200 group-data-open:rotate-180" />
alt={user?.name || 'User'} </MenuButton>
className="w-8 h-8 rounded-lg object-cover"
/>
)}
</div>
<ChevronDownIcon className="h-4 w-4 text-neutral-400 transition-transform duration-200 ui-open:rotate-180" />
</Menu.Button>
<Transition <Transition
as={Fragment} as={Fragment}
enter="transition ease-out duration-200" enter="transition ease-out duration-150"
enterFrom="opacity-0 -translate-y-2" enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150" leave="transition ease-in duration-100"
leaveFrom="opacity-100 translate-y-0" leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 -translate-y-2" leaveTo="opacity-0 translate-y-1"
> >
<Menu.Items className="absolute right-0 mt-2 w-56 sm:w-64 bg-white dark:bg-neutral-900/95 backdrop-blur-sm border border-neutral-200 dark:border-neutral-700/50 rounded-xl shadow-xl z-50 outline-none"> <MenuItems className="absolute right-0 mt-2 w-56 sm:w-64 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-neutral-50 dark:bg-black shadow-lg overflow-hidden z-50">
<div className="p-4 border-b border-neutral-200 dark:border-neutral-700/50"> {/* User info */}
<div className="flex items-center space-x-3"> <div className="px-3 pt-3 pb-2 flex items-center gap-3">
{getImageUrl(user?.image) && ( {imageUrl ? (
<img <img
src={getImageUrl(user.image)} src={imageUrl}
alt={user?.name || 'User'} alt={user?.name || 'User'}
className="w-10 h-10 rounded-lg object-cover" className="w-9 h-9 rounded-lg object-cover shrink-0"
/> />
)} ) : (
<div> <div className="w-9 h-9 rounded-lg bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center shrink-0">
<p className="text-sm font-medium text-neutral-900 dark:text-white">{user?.name || 'User'}</p> <span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">{userInitials}</span>
<p className="text-xs text-neutral-400">{user?.email || 'email@example.com'}</p>
</div> </div>
)}
<div className="min-w-0">
<p className="text-sm font-medium text-neutral-900 dark:text-white truncate leading-tight">
{user?.name || user?.email || 'User'}
</p>
{user?.name && (
<p className="text-xs text-neutral-400 dark:text-neutral-500 truncate leading-tight mt-0.5">
{user.email}
</p>
)}
</div> </div>
</div> </div>
{/* Quick Links for mobile */} <div className="p-1.5 flex flex-col gap-0.5">
{quickLinks.length > 0 && ( {/* Quick links — mobile only */}
<div className="sm:hidden py-2 border-b border-neutral-200 dark:border-neutral-700/50"> {quickLinks.length > 0 && (
{quickLinks.map((link) => ( <>
<Menu.Item key={link.name}> {quickLinks.map((link) => (
{({ active }) => ( <MenuItem key={link.name}>
<a <a
href={link.href} href={link.href}
className={`flex items-center px-4 py-3 text-sm transition-all duration-200 ${ className="sm:hidden flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
active
? 'bg-neutral-100 dark:bg-neutral-800/50 text-neutral-900 dark:text-white'
: 'text-neutral-600 dark:text-neutral-300'
}`}
> >
<svg className="mr-3 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg> </svg>
{link.name} {link.name}
</a> </a>
)} </MenuItem>
</Menu.Item> ))}
))} <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
</div> </>
)} )}
<div className="py-2"> {/* Profile */}
<Menu.Item> <MenuItem>
{({ active }) => ( <a
<a href="/admin/profile"
href="/admin/profile" className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-violet-50 dark:data-focus:bg-violet-500/10 data-focus:text-violet-500 dark:data-focus:text-violet-400"
className={`flex items-center px-4 py-3 text-sm transition-all duration-200 group ${ >
active <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
? 'bg-neutral-100 dark:bg-neutral-800/50 text-neutral-900 dark:text-white' <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
: 'text-neutral-600 dark:text-neutral-300' </svg>
}`} Mon profil
> </a>
<svg className="mr-3 h-4 w-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> </MenuItem>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg> {/* Theme */}
Mon profil <MenuItem>
</a> <button
)} onClick={toggle}
</Menu.Item> className="cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-amber-50 dark:data-focus:bg-amber-500/10 data-focus:text-amber-500 dark:data-focus:text-amber-400"
>
<div className="border-t border-neutral-200 dark:border-neutral-700/50 mt-2 pt-2"> <ThemeIcon className="w-4 h-4 shrink-0" />
<Menu.Item> {themeLabel}
{({ active }) => ( </button>
<button </MenuItem>
onClick={handleLogout}
className={`w-full flex items-center px-4 py-3 text-sm transition-all duration-200 group text-left ${ <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
active
? 'bg-red-500/10 text-red-300' {/* Logout */}
: 'text-red-400' <MenuItem>
}`} <button
> onClick={handleLogout}
<svg className="mr-3 h-4 w-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> className="cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10 data-focus:text-red-500 dark:data-focus:text-red-400"
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /> >
</svg> <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
Se déconnecter <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</button> </svg>
)} Se déconnecter
</Menu.Item> </button>
</div> </MenuItem>
</div> </div>
</Menu.Items> </MenuItems>
</Transition> </Transition>
</Menu> </Menu>
</div> </div>