feat(admin): replace single page name with dynamic breadcrumb navigation in AdminTop

2026-04-22 15:51:01 -04:00
parent cc5c556396
commit 0c860d9fe5
3 changed files with 52 additions and 22 deletions
@@ -5,6 +5,7 @@ import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/r
 import { ChevronDownIcon, User03Icon } from '@zen/core/shared/icons';
 import { UserAvatar } from '@zen/core/shared/components';
 import { useRouter, usePathname } from 'next/navigation';
+import { getPages } from '../registry.js';
 import { useTheme, getThemeIcon } from '@zen/core/themes';

 const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [] }) => {
@@ -34,19 +35,34 @@ const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appNa
    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;
-            }
+    const buildBreadcrumbs = () => {
+        const crumbs = [{ label: appName, href: '/admin/' }];
+        const after = pathname.replace(/^\/admin\/?/, '');
+        if (!after) return crumbs;
+
+        const segments = after.split('/').filter(Boolean);
+        if (!segments.length) return crumbs;
+
+        const [first, second] = segments;
+        const allItems = navigationSections.flatMap(s => s.items);
+        const navItem = allItems.find(item => item.href.replace('/admin/', '').split('/')[0] === first);
+        const hasSubPage = segments.length > 1;
+
+        if (navItem) {
+            crumbs.push({ label: navItem.name, href: hasSubPage ? navItem.href : undefined });
        }
-        return null;
-    })();
+
+        if (second === 'new') {
+            crumbs.push({ label: 'Nouveau' });
+        } else if (second === 'edit') {
+            const page = getPages().find(p => p.slug === `${first}:edit`);
+            crumbs.push({ label: page?.breadcrumbLabel || page?.title || 'Modifier' });
+        }
+
+        return crumbs;
+    };
+
+    const breadcrumbs = buildBreadcrumbs();

    const quickLinks = [];

@@ -68,13 +84,27 @@ const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appNa
                </div>

                {/* Desktop breadcrumb */}
-                {currentPageName && (
+                {breadcrumbs.length > 1 && (
                    <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>
+                        {breadcrumbs.map((crumb, i) => (
+                            <Fragment key={i}>
+                                {i > 0 && (
+                                    <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>
+                                )}
+                                {crumb.href ? (
+                                    <button
+                                        onClick={() => router.push(crumb.href)}
+                                        className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer"
+                                    >
+                                        {crumb.label}
+                                    </button>
+                                ) : (
+                                    <span className="text-neutral-900 dark:text-white font-medium">{crumb.label}</span>
+                                )}
+                            </Fragment>
+                        ))}
                    </div>
                )}

@@ -15,5 +15,5 @@ registerPage({ slug: 'dashboard',  Component: DashboardPage, title: 'Tableau de
 registerPage({ slug: 'users',      Component: UsersPage,     title: 'Utilisateurs' });
 registerPage({ slug: 'roles',      Component: RolesPage,     title: 'Rôles' });
 registerPage({ slug: 'profile',    Component: ProfilePage,   title: 'Profil' });
-registerPage({ slug: 'users:edit', Component: UserEditPage,  title: 'Modifier utilisateur' });
-registerPage({ slug: 'roles:edit', Component: RoleEditPage,  title: 'Modifier rôle' });
+registerPage({ slug: 'users:edit', Component: UserEditPage,  title: 'Modifier utilisateur', breadcrumbLabel: 'Modifier' });
+registerPage({ slug: 'roles:edit', Component: RoleEditPage,  title: 'Modifier rôle',         breadcrumbLabel: 'Modifier' });
@@ -71,8 +71,8 @@ export function getNavItems() {

 // ---- Pages -----------------------------------------------------------------

-export function registerPage({ slug, Component, title }) {
-  pages.set(slug, { slug, Component, title });
+export function registerPage({ slug, Component, title, breadcrumbLabel }) {
+  pages.set(slug, { slug, Component, title, breadcrumbLabel });
 }

 export function getPage(slug) {