refactor(admin): replace AdminPageTitleContext with direct registry lookup for breadcrumbs
This commit is contained in:
@@ -1,8 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { getPage } from './registry.js';
|
||||
import { useAdminPageTitle } from './components/AdminPageTitleContext.js';
|
||||
import './pages/DashboardPage.client.js';
|
||||
import './pages/UsersPage.client.js';
|
||||
import './pages/RolesPage.client.js';
|
||||
@@ -15,11 +13,6 @@ export default function AdminPageClient({ params, user, widgetData }) {
|
||||
|
||||
const slug = first || 'dashboard';
|
||||
const page = getPage(slug) || getPage('dashboard');
|
||||
const { setTitle } = useAdminPageTitle();
|
||||
|
||||
useEffect(() => {
|
||||
if (page?.title) setTitle(page.title);
|
||||
}, [page?.title]);
|
||||
|
||||
if (!page) return null;
|
||||
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useContext, useState } from 'react';
|
||||
|
||||
const AdminPageTitleContext = createContext({ title: '', setTitle: () => {} });
|
||||
|
||||
export function AdminPageTitleProvider({ children }) {
|
||||
const [title, setTitle] = useState('');
|
||||
return (
|
||||
<AdminPageTitleContext.Provider value={{ title, setTitle }}>
|
||||
{children}
|
||||
</AdminPageTitleContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAdminPageTitle() {
|
||||
return useContext(AdminPageTitleContext);
|
||||
}
|
||||
@@ -3,36 +3,33 @@
|
||||
import { useState } from 'react';
|
||||
import AdminSidebar from './AdminSidebar.js';
|
||||
import AdminTop from './AdminTop.js';
|
||||
import { AdminPageTitleProvider } from './AdminPageTitleContext.js';
|
||||
|
||||
export default function AdminShell({ children, user, onLogout, appName, navigationSections }) {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<AdminPageTitleProvider>
|
||||
<div className="flex h-screen overflow-hidden bg-white dark:bg-black font-ibm-plex-sans">
|
||||
<AdminSidebar
|
||||
<div className="flex h-screen overflow-hidden bg-white dark:bg-black font-ibm-plex-sans">
|
||||
<AdminSidebar
|
||||
isMobileMenuOpen={isMobileMenuOpen}
|
||||
setIsMobileMenuOpen={setIsMobileMenuOpen}
|
||||
appName={appName}
|
||||
navigationSections={navigationSections}
|
||||
/>
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<AdminTop
|
||||
isMobileMenuOpen={isMobileMenuOpen}
|
||||
setIsMobileMenuOpen={setIsMobileMenuOpen}
|
||||
user={user}
|
||||
onLogout={onLogout}
|
||||
appName={appName}
|
||||
navigationSections={navigationSections}
|
||||
/>
|
||||
<div className="flex-1 flex flex-col min-w-0">
|
||||
<AdminTop
|
||||
isMobileMenuOpen={isMobileMenuOpen}
|
||||
setIsMobileMenuOpen={setIsMobileMenuOpen}
|
||||
user={user}
|
||||
onLogout={onLogout}
|
||||
appName={appName}
|
||||
navigationSections={navigationSections}
|
||||
/>
|
||||
<main className="flex-1 overflow-y-auto bg-neutral-50 dark:bg-black">
|
||||
<div className="px-8 py-7 pb-32 max-w-[1920px] mx-auto">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main className="flex-1 overflow-y-auto bg-neutral-50 dark:bg-black">
|
||||
<div className="px-8 py-7 pb-32 max-w-[1920px] mx-auto">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</AdminPageTitleProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,12 +5,10 @@ import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/r
|
||||
import { ChevronDownIcon, User03Icon, DashboardSquare03Icon } from '@zen/core/shared/icons';
|
||||
import { UserAvatar } from '@zen/core/shared/components';
|
||||
import { useRouter, usePathname } from 'next/navigation';
|
||||
import { getPages } from '../registry.js';
|
||||
import { useAdminPageTitle } from './AdminPageTitleContext.js';
|
||||
import { getPage, getPages } from '../registry.js';
|
||||
import { useTheme, getThemeIcon } from '@zen/core/themes';
|
||||
|
||||
const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [] }) => {
|
||||
const { title: currentPageTitle } = useAdminPageTitle();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
@@ -40,21 +38,17 @@ const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appNa
|
||||
const buildBreadcrumbs = () => {
|
||||
const crumbs = [{ icon: DashboardSquare03Icon, href: '/admin/dashboard' }];
|
||||
const after = pathname.replace(/^\/admin\/?/, '');
|
||||
if (!after) {
|
||||
crumbs.push({ label: currentPageTitle });
|
||||
return crumbs;
|
||||
}
|
||||
|
||||
const segments = after.split('/').filter(Boolean);
|
||||
if (!segments.length || (segments[0] === 'dashboard' && segments.length === 1)) {
|
||||
crumbs.push({ label: currentPageTitle });
|
||||
const [first, second] = segments;
|
||||
const pageTitle = getPage(first || 'dashboard')?.title || '';
|
||||
|
||||
if (!after || !segments.length || (segments[0] === 'dashboard' && segments.length === 1)) {
|
||||
crumbs.push({ label: pageTitle });
|
||||
return crumbs;
|
||||
}
|
||||
|
||||
const [first, second] = segments;
|
||||
|
||||
if (first === 'profile') {
|
||||
crumbs.push({ label: currentPageTitle });
|
||||
crumbs.push({ label: pageTitle });
|
||||
return crumbs;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user