refactor(admin): simplify AdminHeader component by removing inline logic
This commit is contained in:
@@ -1,181 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment } from 'react';
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
|
||||
import { ChevronDownIcon, User03Icon } from '@zen/core/shared/icons';
|
||||
import { UserAvatar } from '@zen/core/shared/components';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { useTheme, getThemeIcon } from '@zen/core/themes';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button } from '@zen/core/shared/components';
|
||||
|
||||
const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [] }) => {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const AdminHeader = ({ title, description, backHref, backLabel = '← Retour', action }) => {
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
if (onLogout) {
|
||||
const result = await onLogout();
|
||||
if (result && result.success) {
|
||||
router.push('/auth/login');
|
||||
} else {
|
||||
console.error('Logout failed:', result?.error);
|
||||
router.push('/auth/login');
|
||||
}
|
||||
} else {
|
||||
router.push('/auth/login');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Logout error:', error);
|
||||
router.push('/auth/login');
|
||||
}
|
||||
};
|
||||
|
||||
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 currentPageName = (() => {
|
||||
for (const section of navigationSections) {
|
||||
for (const item of section.items) {
|
||||
if (pathname === item.href || pathname.startsWith(item.href + '/')) {
|
||||
return item.name;
|
||||
}
|
||||
}
|
||||
if (section.items.length === 1 && (pathname === section.items[0].href || pathname.startsWith(section.items[0].href + '/'))) {
|
||||
return section.title;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})();
|
||||
|
||||
const quickLinks = [];
|
||||
|
||||
return (
|
||||
<header className="bg-white dark:bg-black border-b border-neutral-200 dark:border-neutral-800/70 sticky top-0 z-30 h-12 flex items-center w-full">
|
||||
<div className="flex items-center justify-between px-4 lg:px-6 py-2 w-full">
|
||||
{/* Left section — Mobile menu button + Logo / Desktop breadcrumb */}
|
||||
<div className="flex items-center space-x-3 lg:hidden">
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-700/50 text-neutral-900 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors duration-200"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg className={`h-5 w-5 transition-transform duration-200 ${isMobileMenuOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isMobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1>
|
||||
</div>
|
||||
|
||||
{/* Desktop breadcrumb */}
|
||||
{currentPageName && (
|
||||
<div className="hidden lg:flex items-center gap-1.5 text-[13px]">
|
||||
<span className="text-neutral-500 dark:text-neutral-400">{appName}</span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-neutral-400 dark:text-neutral-600 flex-shrink-0">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
<span className="text-neutral-900 dark:text-white font-medium">{currentPageName}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Right section — Quick links + Profile */}
|
||||
<div className="flex items-center gap-3 sm:gap-4">
|
||||
<nav className="hidden sm:flex items-center gap-4 lg:gap-6">
|
||||
{quickLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors duration-200"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* User Profile Menu */}
|
||||
<Menu as="div" className="relative">
|
||||
<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">
|
||||
<UserAvatar user={user} size="sm" />
|
||||
{/* Name — desktop only */}
|
||||
<span className="hidden sm:block text-[13px] leading-none font-medium text-neutral-800 dark:text-white">
|
||||
{user?.name || 'User'}
|
||||
</span>
|
||||
<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" />
|
||||
</MenuButton>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-150"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<MenuItems className="absolute right-0 mt-4 w-48 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-1.5 flex flex-col gap-0.5">
|
||||
{/* Quick links — mobile only */}
|
||||
{quickLinks.length > 0 && (
|
||||
<>
|
||||
{quickLinks.map((link) => (
|
||||
<MenuItem key={link.name}>
|
||||
<a
|
||||
href={link.href}
|
||||
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"
|
||||
>
|
||||
<svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
{link.name}
|
||||
</a>
|
||||
</MenuItem>
|
||||
))}
|
||||
<div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Profile */}
|
||||
<MenuItem>
|
||||
<a
|
||||
href="/admin/profile"
|
||||
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 transition-colors duration-[120ms] ease-out data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
|
||||
>
|
||||
<User03Icon className="w-4 h-4 shrink-0" />
|
||||
Mon profil
|
||||
</a>
|
||||
</MenuItem>
|
||||
|
||||
{/* Theme — pas de MenuItem pour ne pas fermer le menu au clic */}
|
||||
<button
|
||||
onClick={toggle}
|
||||
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-150"
|
||||
>
|
||||
<ThemeIcon className="w-4 h-4 shrink-0" />
|
||||
{themeLabel}
|
||||
</button>
|
||||
|
||||
<div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
|
||||
|
||||
{/* Logout */}
|
||||
<MenuItem>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-red-500 dark:text-red-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10"
|
||||
>
|
||||
<svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
Se déconnecter
|
||||
</button>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{backHref && (
|
||||
<Button variant="secondary" size="sm" onClick={() => router.push(backHref)}>
|
||||
{backLabel}
|
||||
</Button>
|
||||
)}
|
||||
<div>
|
||||
<h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">{title}</h1>
|
||||
{description && (
|
||||
<p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{action}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminHeader;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import AdminSidebar from './AdminSidebar.js';
|
||||
import AdminHeader from './AdminHeader.js';
|
||||
import AdminTop from './AdminTop.js';
|
||||
|
||||
export default function AdminShell({ children, user, onLogout, appName, navigationSections }) {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
@@ -16,7 +16,7 @@ export default function AdminShell({ children, user, onLogout, appName, navigati
|
||||
navigationSections={navigationSections}
|
||||
/>
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<AdminHeader
|
||||
<AdminTop
|
||||
isMobileMenuOpen={isMobileMenuOpen}
|
||||
setIsMobileMenuOpen={setIsMobileMenuOpen}
|
||||
user={user}
|
||||
|
||||
@@ -0,0 +1,181 @@
|
||||
'use client';
|
||||
|
||||
import { Fragment } from 'react';
|
||||
import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
|
||||
import { ChevronDownIcon, User03Icon } from '@zen/core/shared/icons';
|
||||
import { UserAvatar } from '@zen/core/shared/components';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { useTheme, getThemeIcon } from '@zen/core/themes';
|
||||
|
||||
const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [] }) => {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
if (onLogout) {
|
||||
const result = await onLogout();
|
||||
if (result && result.success) {
|
||||
router.push('/auth/login');
|
||||
} else {
|
||||
console.error('Logout failed:', result?.error);
|
||||
router.push('/auth/login');
|
||||
}
|
||||
} else {
|
||||
router.push('/auth/login');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Logout error:', error);
|
||||
router.push('/auth/login');
|
||||
}
|
||||
};
|
||||
|
||||
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 currentPageName = (() => {
|
||||
for (const section of navigationSections) {
|
||||
for (const item of section.items) {
|
||||
if (pathname === item.href || pathname.startsWith(item.href + '/')) {
|
||||
return item.name;
|
||||
}
|
||||
}
|
||||
if (section.items.length === 1 && (pathname === section.items[0].href || pathname.startsWith(section.items[0].href + '/'))) {
|
||||
return section.title;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})();
|
||||
|
||||
const quickLinks = [];
|
||||
|
||||
return (
|
||||
<header className="bg-white dark:bg-black border-b border-neutral-200 dark:border-neutral-800/70 sticky top-0 z-30 h-12 flex items-center w-full">
|
||||
<div className="flex items-center justify-between px-4 lg:px-6 py-2 w-full">
|
||||
{/* Left section — Mobile menu button + Logo / Desktop breadcrumb */}
|
||||
<div className="flex items-center space-x-3 lg:hidden">
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-700/50 text-neutral-900 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors duration-200"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg className={`h-5 w-5 transition-transform duration-200 ${isMobileMenuOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isMobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1>
|
||||
</div>
|
||||
|
||||
{/* Desktop breadcrumb */}
|
||||
{currentPageName && (
|
||||
<div className="hidden lg:flex items-center gap-1.5 text-[13px]">
|
||||
<span className="text-neutral-500 dark:text-neutral-400">{appName}</span>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-neutral-400 dark:text-neutral-600 flex-shrink-0">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
<span className="text-neutral-900 dark:text-white font-medium">{currentPageName}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Right section — Quick links + Profile */}
|
||||
<div className="flex items-center gap-3 sm:gap-4">
|
||||
<nav className="hidden sm:flex items-center gap-4 lg:gap-6">
|
||||
{quickLinks.map((link) => (
|
||||
<a
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors duration-200"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* User Profile Menu */}
|
||||
<Menu as="div" className="relative">
|
||||
<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">
|
||||
<UserAvatar user={user} size="sm" />
|
||||
{/* Name — desktop only */}
|
||||
<span className="hidden sm:block text-[13px] leading-none font-medium text-neutral-800 dark:text-white">
|
||||
{user?.name || 'User'}
|
||||
</span>
|
||||
<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" />
|
||||
</MenuButton>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-150"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<MenuItems className="absolute right-0 mt-4 w-48 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-1.5 flex flex-col gap-0.5">
|
||||
{/* Quick links — mobile only */}
|
||||
{quickLinks.length > 0 && (
|
||||
<>
|
||||
{quickLinks.map((link) => (
|
||||
<MenuItem key={link.name}>
|
||||
<a
|
||||
href={link.href}
|
||||
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"
|
||||
>
|
||||
<svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
{link.name}
|
||||
</a>
|
||||
</MenuItem>
|
||||
))}
|
||||
<div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Profile */}
|
||||
<MenuItem>
|
||||
<a
|
||||
href="/admin/profile"
|
||||
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 transition-colors duration-[120ms] ease-out data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
|
||||
>
|
||||
<User03Icon className="w-4 h-4 shrink-0" />
|
||||
Mon profil
|
||||
</a>
|
||||
</MenuItem>
|
||||
|
||||
{/* Theme — pas de MenuItem pour ne pas fermer le menu au clic */}
|
||||
<button
|
||||
onClick={toggle}
|
||||
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-150"
|
||||
>
|
||||
<ThemeIcon className="w-4 h-4 shrink-0" />
|
||||
{themeLabel}
|
||||
</button>
|
||||
|
||||
<div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
|
||||
|
||||
{/* Logout */}
|
||||
<MenuItem>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-red-500 dark:text-red-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10"
|
||||
>
|
||||
<svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
Se déconnecter
|
||||
</button>
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuItems>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminTop;
|
||||
@@ -2,5 +2,6 @@
|
||||
|
||||
export { default as AdminShell } from './AdminShell.js';
|
||||
export { default as AdminSidebar } from './AdminSidebar.js';
|
||||
export { default as AdminTop } from './AdminTop.js';
|
||||
export { default as AdminHeader } from './AdminHeader.js';
|
||||
export { default as ThemeToggle } from './ThemeToggle.js';
|
||||
|
||||
Reference in New Issue
Block a user