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
+85 -88
View File
@@ -1,11 +1,10 @@
'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();
@@ -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={getImageUrl(user.image)} src={imageUrl}
alt={user?.name || 'User'} alt={user?.name || 'User'}
className="w-8 h-8 rounded-lg object-cover" className="w-7 h-7 rounded-lg object-cover shrink-0"
/> />
) : (
<div className="w-7 h-7 rounded-lg bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center shrink-0">
<span className="text-xs font-medium text-neutral-600 dark:text-neutral-300">{userInitials}</span>
</div>
)} )}
<div className="text-left"> {/* Name — desktop only */}
<p className="text-sm font-medium text-neutral-900 dark:text-white">{user?.name || 'User'}</p> <span className="hidden sm:block text-sm font-medium text-neutral-900 dark:text-white">
</div> {user?.name || 'User'}
</div> </span>
{/* Avatar for mobile - visible on mobile only */} <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" />
<div className="sm:hidden"> </MenuButton>
{getImageUrl(user?.image) && (
<img
src={getImageUrl(user.image)}
alt={user?.name || 'User'}
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">
{/* Quick links — mobile only */}
{quickLinks.length > 0 && ( {quickLinks.length > 0 && (
<div className="sm:hidden py-2 border-b border-neutral-200 dark:border-neutral-700/50"> <>
{quickLinks.map((link) => ( {quickLinks.map((link) => (
<Menu.Item key={link.name}> <MenuItem key={link.name}>
{({ active }) => (
<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> <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
</>
)} )}
<div className="py-2"> {/* Profile */}
<Menu.Item> <MenuItem>
{({ active }) => (
<a <a
href="/admin/profile" href="/admin/profile"
className={`flex items-center px-4 py-3 text-sm transition-all duration-200 group ${ 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"
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 group-hover:scale-110 transition-transform" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> <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" />
</svg> </svg>
Mon profil Mon profil
</a> </a>
)} </MenuItem>
</Menu.Item>
<div className="border-t border-neutral-200 dark:border-neutral-700/50 mt-2 pt-2"> {/* Theme */}
<Menu.Item> <MenuItem>
{({ active }) => ( <button
onClick={toggle}
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"
>
<ThemeIcon className="w-4 h-4 shrink-0" />
{themeLabel}
</button>
</MenuItem>
<div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
{/* Logout */}
<MenuItem>
<button <button
onClick={handleLogout} onClick={handleLogout}
className={`w-full flex items-center px-4 py-3 text-sm transition-all duration-200 group text-left ${ 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"
active
? 'bg-red-500/10 text-red-300'
: 'text-red-400'
}`}
> >
<svg className="mr-3 h-4 w-4 group-hover:scale-110 transition-transform" 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="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" /> <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" />
</svg> </svg>
Se déconnecter Se déconnecter
</button> </button>
)} </MenuItem>
</Menu.Item>
</div> </div>
</div> </MenuItems>
</Menu.Items>
</Transition> </Transition>
</Menu> </Menu>
</div> </div>