create-hhmi-example 1.0.0

package/template/hhmiexample.client/src/components/AppFrame/AppFrame.tsx

@@ -0,0 +1,796 @@
+import { makeStyles, tokens, typographyStyles, Button, Text, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Divider, mergeClasses, Tooltip } from "@fluentui/react-components";
+import { ChevronDown16Regular, ChevronUp16Regular, Shield20Regular } from "@fluentui/react-icons";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { Link, Outlet, useNavigate, useLocation } from "react-router";
+import UserSettings from "./UserSettings";
+import type { IExampleUser } from "../../types/IExampleUser";
+import logoLight from "../../assets/logo-black.png";
+import logoDark from "../../assets/logo-white.png";
+import { CollabEnvironment } from "../../App";
+import { moduleRegistry } from "./modules";
+import type { INavDividerItem, INavItem, INavLinkItem } from "./types";
+
+export default function AppFrame(props: { setCurrentUser: React.Dispatch<React.SetStateAction<IExampleUser>>; currentUser: IExampleUser; environment: string; }) {
+    const isProd: boolean = props.environment === CollabEnvironment.Prod;
+
+    const useStyles = makeStyles({
+        appContainer: {
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh',
+            backgroundColor: tokens.colorNeutralBackground1
+        },
+        appHeader: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: '12px 16px',
+            backgroundColor: isProd ? tokens.colorNeutralBackground1 : tokens.colorBrandBackground,
+            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+            height: '64px',
+            position: 'sticky',
+            top: 0,
+            zIndex: 100,
+            boxShadow: tokens.shadow2
+        },
+        headerLeft: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1em'
+        },
+        brandSection: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px'
+        },
+        companyName: {
+            color: tokens.colorBrandForeground1,
+            fontWeight: tokens.fontWeightSemibold,
+            fontSize: tokens.fontSizeBase500,
+            textDecoration: 'none',
+            transition: 'color 0.2s ease',
+            ':hover': {
+                color: tokens.colorBrandForeground2Hover,
+                textDecoration: 'none'
+            },
+            ':focus': {
+                outline: `2px solid ${tokens.colorBrandStroke1}`,
+                outlineOffset: '2px',
+                borderRadius: tokens.borderRadiusSmall
+            }
+        },
+        logoImage: {
+            height: '42px',
+            marginRight: '8px',
+            verticalAlign: 'middle'
+        },
+        separator: {
+            width: '2px',
+            height: '30px',
+            backgroundColor: isProd ? tokens.colorNeutralStroke2 : tokens.colorBrandBackgroundStatic,
+        },
+        separatorMobile: {
+            width: '2px',
+            height: '30px',
+            backgroundColor: isProd ? tokens.colorNeutralStroke2 : tokens.colorBrandBackgroundStatic,
+            margin: '0 15px'
+        },
+        pageTitle: {
+            color: isProd ? tokens.colorNeutralForeground2 : tokens.colorNeutralForegroundOnBrand,
+            fontSize: tokens.fontSizeBase500,
+            fontWeight: tokens.fontWeightMedium,
+            '@media (max-width: 768px)': {
+                display: 'none'
+            }
+        },
+        pageTitleMobile: {
+            color: tokens.colorNeutralForeground2,
+            fontSize: tokens.fontSizeBase500,
+            fontWeight: tokens.fontWeightMedium,
+            lineHeight: 'normal'
+        },
+        modulesNav: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0',
+            '@media (max-width: 768px)': {
+                display: 'none'
+            }
+        },
+        moduleButtonDesktop: {
+            backgroundColor: 'transparent',
+            border: 'none',
+            padding: '8px 16px',
+            cursor: 'pointer',
+            color: isProd ? tokens.colorNeutralForeground2 : tokens.colorNeutralForegroundOnBrand,
+            fontSize: tokens.fontSizeBase500,
+            fontWeight: tokens.fontWeightMedium,
+            textDecoration: 'none',
+            transition: 'background-color 0.2s ease',
+            borderRadius: tokens.borderRadiusSmall,
+            ':hover': {
+                backgroundColor: tokens.colorTransparentBackground
+            }
+        },
+        moduleSeparator: {
+            width: '2px',
+            height: '30px',
+            backgroundColor: isProd ? tokens.colorNeutralStroke2 : tokens.colorBrandBackgroundStatic,
+            margin: '0 8px',
+        },
+        mobileModulesMenu: {
+            display: 'none',
+            '@media (max-width: 768px)': {
+                display: 'flex'
+            }
+        },
+        mobileModulesButton: {
+            minHeight: '32px',
+            padding: '5px 0em',
+            fontSize: tokens.fontSizeBase500,
+            fontWeight: tokens.fontWeightMedium,
+            '@media (max-width: 768px)': {
+                display: 'flex'
+            }
+        },
+        moduleButton: {
+            minWidth: 'auto',
+            fontWeight: tokens.fontWeightMedium,
+            color: tokens.colorBrandBackgroundInverted,
+            backgroundColor: isProd ? tokens.colorBrandBackground : tokens.colorBrandBackgroundSelected,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px'
+        },
+        moduleButtonContent: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px'
+        },
+        mobileMenuToggle: {
+            display: 'none'
+        },
+        appContent: {
+            display: 'flex',
+            flex: 1,
+            overflow: 'hidden',
+            position: 'relative'
+        },
+        sidebar: {
+            width: '300px',
+            backgroundColor: tokens.colorNeutralBackground2,
+            borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
+            padding: '16px',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            position: 'relative',
+            zIndex: 10,
+            '@media (max-width: 768px)': {
+                display: 'none'
+            }
+        },
+        sidebarBorder: {
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            bottom: 0,
+            width: '4px',
+            cursor: 'default',
+            zIndex: 1001,
+            transition: 'width 0.2s ease, background-color 0.2s ease',
+            ':hover': {
+                width: '6px',
+                cursor: 'pointer',
+                backgroundColor: tokens.colorNeutralStroke1,
+            }
+        },
+        sidebarCollapsed: {
+            width: '56px',
+            padding: '16px 8px',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+        },
+        sidebarNav: {
+            '& ul': {
+                listStyle: 'none',
+                margin: 0,
+                padding: 0,
+                width: '100%'
+            },
+            '& li': {
+                marginBottom: '4px',
+                width: '100%'
+            }
+        },
+        navButton: {
+            width: '100%',
+            justifyContent: 'flex-start',
+            minWidth: 'auto'
+        },
+        navButtonCollapsed: {
+            justifyContent: 'center',
+            padding: '8px',
+            width: '100%',
+            minWidth: '100%',
+        },
+        navButtonCollapsedSelected: {
+            width: '100%',
+            minWidth: '100%',
+        },
+        adminSection: {
+            marginBottom: '16px',
+            padding: '12px',
+            border: `1px solid ${tokens.colorNeutralStroke2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            width: '100%',
+        },
+        adminSectionCollapsed: {
+            padding: '8px 0',
+        },
+        adminSectionHeader: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: '8px',
+            fontSize: tokens.fontSizeBase300,
+            fontWeight: tokens.fontWeightSemibold,
+            color: tokens.colorBrandForeground1,
+            textTransform: 'uppercase',
+            letterSpacing: '0.5px',
+            cursor: 'pointer',
+            userSelect: 'none',
+            ':hover': {
+                color: tokens.colorBrandForeground2Hover,
+            }
+        },
+        adminSectionHeaderCollapsed: {
+            justifyContent: 'center',
+            gap: 0,
+        },
+        adminSectionHeaderContent: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+        },
+        adminSectionHeaderContentCollapsed: {
+            gap: 0,
+        },
+        adminSectionHeaderText: {
+            '@media (max-width: 768px)': {
+                display: 'none'
+            }
+        },
+        adminNavButton: {
+            width: '100%',
+            justifyContent: 'flex-start',
+            minWidth: 'auto',
+            border: 'none'
+        },
+        adminNavButtonCollapsed: {
+            justifyContent: 'center',
+            padding: '8px',
+            width: '100%',
+            minWidth: '100%',
+        },
+        adminNavButtonCollapsedSelected: {
+            width: '100%',
+            minWidth: '100%',
+        },
+        sectionDivider: {
+            margin: '16px 0',
+        },
+        adminNavItem: {
+            marginBottom: '4px',
+            width: '100%',
+        },
+        adminNavItems: {
+            marginTop: '10px',
+        },
+        emptySideNav: {
+            width: '212px'
+        },
+        mainContent: {
+            flex: 1,
+            padding: '32px',
+            overflowY: "auto",
+            overflowX: 'hidden',
+            minHeight: 0,
+            height: "calc(100vh - 64px)",
+            backgroundColor: tokens.colorNeutralBackground1,
+            position: 'relative',
+            zIndex: 1,
+            '@media (max-width: 768px)': {
+                padding: '16px',
+                paddingBottom: '80px'
+            }
+        },
+        contentWrapper: {},
+        contentGrid: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+            gap: '24px',
+            marginTop: '32px',
+            '@media (max-width: 768px)': {
+                gridTemplateColumns: '1fr',
+                gap: '16px'
+            }
+        },
+        bottomNav: {
+            display: 'none',
+            '@media (max-width: 768px)': {
+                display: 'flex',
+                position: 'fixed',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                backgroundColor: tokens.colorNeutralBackground1,
+                borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+                padding: '8px 12px',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                zIndex: 100,
+                boxShadow: `0 -2px 8px ${tokens.colorNeutralShadowAmbient}`,
+                height: '72px',
+                minHeight: '72px',
+                '@media (max-width: 480px)': {
+                    padding: '6px 8px',
+                    height: '68px',
+                    minHeight: '68px'
+                }
+            }
+        },
+        bottomNavButton: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '4px',
+            flex: '1',
+            minHeight: '56px',
+            padding: '8px 4px',
+            backgroundColor: 'transparent',
+            border: 'none',
+            borderRadius: tokens.borderRadiusMedium,
+            cursor: 'pointer',
+            fontSize: '10px',
+            fontWeight: tokens.fontWeightMedium,
+            color: tokens.colorNeutralForeground2,
+            transition: 'all 0.2s ease',
+            textAlign: 'center',
+            '@media (max-width: 480px)': {
+                minHeight: '52px',
+                padding: '6px 2px',
+            },
+            ':hover': {
+                backgroundColor: tokens.colorNeutralBackground1Hover,
+                color: tokens.colorBrandForeground1
+            },
+            ':focus': {
+                outline: `2px solid ${tokens.colorBrandStroke1}`,
+                outlineOffset: '1px'
+            }
+        },
+        bottomNavButtonActive: {
+            color: tokens.colorNeutralForegroundOnBrand,
+            backgroundColor: tokens.colorBrandBackground
+        },
+        bottomNavIcon: {
+            fontSize: '20px',
+            lineHeight: 1
+        },
+        bottomNavLabel: {
+            fontSize: '10px',
+            lineHeight: 1.2,
+            textAlign: 'center',
+            maxWidth: '100px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontWeight: tokens.fontWeightMedium,
+            '@media (max-width: 480px)': {
+                fontSize: '9px'
+            }
+        },
+        mainContentNoScroll: {
+            overflowY: 'hidden'
+        },
+        navDivider: {
+            margin: '8px 0',
+            borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+            opacity: 0.4
+        },
+        navDividerCollapsed: {
+            margin: '8px auto',
+            width: '60%',
+            borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+            opacity: 0.4
+        },
+        title: typographyStyles.title2,
+        paragraph: {
+            ...typographyStyles.body1,
+            letterSpacing: '0.0675em',
+            fontStyle: 'italic',
+        }
+    });
+    const styles = useStyles();
+
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const [activeModule, setActiveModule] = useState<string>("");
+    const [activeNav, setActiveNav] = useState<string>('');
+    const [currentModuleLabel, setCurrentModuleLabel] = useState<string>("");
+    const [isAdminExpanded, setIsAdminExpanded] = useState<boolean>(false);
+    const [hasUserToggledAdmin, setHasUserToggledAdmin] = useState<boolean>(false);
+
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(() => {
+        const saved = localStorage.getItem('sidebarCollapsed');
+        return saved ? saved === 'true' : false;
+    });
+
+    useEffect(() => {
+        localStorage.setItem('sidebarCollapsed', isSidebarCollapsed.toString());
+    }, [isSidebarCollapsed]);
+
+    const modules: INavLinkItem[] = useMemo(() => {
+        return Object.values(moduleRegistry)
+            .map(config => ({
+                id: config.id,
+                label: config.label,
+                icon: config.icon,
+                href: config.href
+            }));
+    }, []);
+
+    const handleModuleSelect = (module: INavLinkItem, isNavigate: boolean) => {
+        setActiveModule(module.id);
+        setCurrentModuleLabel(modules.find(m => m.id === module.id)?.label ?? "");
+        if (isNavigate) {
+            navigate(module.href, { replace: true });
+        }
+    }
+
+    const currentModuleConfig = useMemo(() => {
+        if (!activeModule) return null;
+        return Object.values(moduleRegistry).find(c => c.id === activeModule) ?? null;
+    }, [activeModule]);
+
+    const userPermissions = useMemo(() => {
+        if (!currentModuleConfig) return {};
+        return currentModuleConfig.resolvePermissions(props.currentUser);
+    }, [currentModuleConfig, props.currentUser]);
+
+    const canViewAdmin = useMemo(() => {
+        if (!currentModuleConfig) { return false; }
+        return currentModuleConfig.canViewAdmin(userPermissions);
+    }, [currentModuleConfig, userPermissions]);
+
+    const regularNavItems = useMemo(() => {
+        if (!currentModuleConfig) return [];
+        return currentModuleConfig.getRegularNavItems(activeModule, userPermissions);
+    }, [currentModuleConfig, activeModule, userPermissions]);
+
+    const adminNavItems = useMemo(() => {
+        if (!currentModuleConfig) return [];
+        return currentModuleConfig.getAdminNavItems(activeModule, userPermissions);
+    }, [currentModuleConfig, activeModule, userPermissions]);
+
+    const mobileAdminNavItems = useMemo(() => {
+        if (!currentModuleConfig) return [];
+        return currentModuleConfig.getMobileAdminNavItem(activeModule, canViewAdmin);
+    }, [currentModuleConfig, activeModule, canViewAdmin]);
+
+    const isNavDividerItem = useCallback((item: INavItem): item is INavDividerItem => {
+        return (item as INavDividerItem).isDivider === true;
+    }, []);
+
+    const isNavLinkItem = useCallback((item: INavItem): item is INavLinkItem => {
+        return !isNavDividerItem(item);
+    }, [isNavDividerItem]);
+
+    useEffect(() => {
+        const currentPath = location.pathname;
+        const pathSegments = currentPath.split('/').filter(Boolean);
+
+        if (currentPath === '/user-settings') {
+            return;
+        }
+
+        if (pathSegments.length >= 1) {
+            const pathModule = pathSegments[0];
+            const matchedModule = modules.find(m => m.id.toLowerCase() === pathModule.toLowerCase());
+            if (matchedModule) {
+                const properCaseModule = matchedModule.id;
+                const moduleConfig = Object.values(moduleRegistry).find(c => c.id === properCaseModule) ?? null;
+                if (moduleConfig?.navItems) {
+                    const resolvedPermissions = moduleConfig.resolvePermissions(props.currentUser);
+                    setActiveModule(properCaseModule);
+                    setCurrentModuleLabel(matchedModule.label);
+
+                    const regularNavItemsForModule = moduleConfig.getRegularNavItems(properCaseModule, resolvedPermissions);
+                    const adminNavItemsForModule = moduleConfig.getAdminNavItems(properCaseModule, resolvedPermissions);
+                    const normalizedPath = currentPath.toLowerCase().replace(/\/$/, '');
+
+                    if (pathSegments.length === 1) {
+                        const firstRegularNav = regularNavItemsForModule.find(isNavLinkItem);
+                        if (firstRegularNav) {
+                            setActiveNav(firstRegularNav.id);
+                        }
+                    } else if (pathSegments.length >= 2) {
+                        if (pathSegments[1] === 'admin') {
+                            if (pathSegments.length === 2) {
+                                if (moduleConfig.navItems.Admin) {
+                                    setActiveNav(moduleConfig.navItems.Admin);
+                                }
+                            } else if (pathSegments.length >= 3) {
+                                const matchingNavItem = adminNavItemsForModule.filter(isNavLinkItem).find(item => {
+                                    const itemPath = item.href.toLowerCase().replace(/\/$/, '');
+                                    return normalizedPath === itemPath || normalizedPath.startsWith(itemPath + '/');
+                                });
+                                if (matchingNavItem) {
+                                    setActiveNav(matchingNavItem.id);
+                                    if (!hasUserToggledAdmin) setIsAdminExpanded(true);
+                                } else {
+                                    const adminRoute = pathSegments[2];
+                                    const adminNavId = `Admin${adminRoute.charAt(0).toUpperCase() + adminRoute.slice(1)}`;
+                                    if (moduleConfig.navItems[adminNavId]) {
+                                        setActiveNav(moduleConfig.navItems[adminNavId]);
+                                        if (!hasUserToggledAdmin) setIsAdminExpanded(true);
+                                    } else {
+                                        setActiveNav(moduleConfig.navItems.Admin || '');
+                                    }
+                                }
+                            }
+                        } else {
+                            const matchingRegular = regularNavItemsForModule.filter(isNavLinkItem).find(item => {
+                                const itemPath = item.href.toLowerCase().replace(/\/$/, '');
+                                return normalizedPath === itemPath;
+                            });
+                            if (matchingRegular) {
+                                setActiveNav(matchingRegular.id);
+                            } else {
+                                const matchingAdmin = adminNavItemsForModule.filter(isNavLinkItem).find(item => {
+                                    const itemPath = item.href.toLowerCase().replace(/\/$/, '');
+                                    return normalizedPath === itemPath || normalizedPath.startsWith(itemPath + '/');
+                                });
+                                if (matchingAdmin) {
+                                    setActiveNav(matchingAdmin.id);
+                                    if (!hasUserToggledAdmin) setIsAdminExpanded(true);
+                                } else {
+                                    const firstRegularNav = regularNavItemsForModule.find(isNavLinkItem);
+                                    if (firstRegularNav) setActiveNav(firstRegularNav.id);
+                                }
+                            }
+                        }
+                    }
+                }
+            } else {
+                setActiveModule('');
+                setCurrentModuleLabel('');
+                setActiveNav('');
+            }
+        } else {
+            setActiveModule('');
+            setCurrentModuleLabel('');
+            setActiveNav('');
+        }
+    }, [location.pathname, modules, hasUserToggledAdmin, isNavLinkItem, props.currentUser]);
+
+    return <div className={styles.appContainer}>
+        <header className={styles.appHeader}>
+            <div className={styles.headerLeft}>
+                <div className={styles.brandSection}>
+                    <Link to="/" className={styles.companyName}>
+                        <img
+                            src={(props.currentUser.IsDarkTheme || !isProd) ? logoDark : logoLight}
+                            alt="Company Logo"
+                            className={styles.logoImage}
+                        />
+                    </Link>
+                    <div className={styles.separator} />
+                    <Text className={styles.pageTitle}>Example App {!isProd ? `- ${props.environment}` : ""}</Text>
+                </div>
+
+                <nav className={styles.modulesNav}>
+                    <div className={styles.separator} />
+                    {modules.map((module) => (
+                        <Button
+                            key={module.id}
+                            className={styles.moduleButtonDesktop}
+                            onClick={() => { handleModuleSelect(module, true); }}
+                            aria-label={`Navigate to ${module.label}`}
+                        >
+                            {module.label}
+                        </Button>
+                    ))}
+                </nav>
+
+                <div className={styles.mobileModulesMenu}>
+                    {currentModuleLabel && (
+                        <>
+                            <Text className={styles.pageTitleMobile}>{currentModuleLabel}</Text>
+                            <div className={styles.separatorMobile} />
+                        </>
+                    )}
+                    <Menu>
+                        <MenuTrigger disableButtonEnhancement>
+                            <Button
+                                appearance="subtle"
+                                iconPosition="after"
+                                icon={<ChevronDown16Regular />}
+                                className={styles.mobileModulesButton}
+                                aria-label="Select app"
+                            >
+                                {"Select App"}
+                            </Button>
+                        </MenuTrigger>
+                        <MenuPopover>
+                            <MenuList>
+                                {modules.map((module) => (
+                                    <MenuItem
+                                        key={module.id}
+                                        icon={<module.icon />}
+                                        onClick={() => { handleModuleSelect(module, true); }}
+                                    >
+                                        {module.label}
+                                    </MenuItem>
+                                ))}
+                            </MenuList>
+                        </MenuPopover>
+                    </Menu>
+                </div>
+            </div>
+
+            <UserSettings
+                currentUser={props.currentUser}
+                setCurrentUser={props.setCurrentUser as React.Dispatch<React.SetStateAction<IExampleUser | undefined>>}
+                isProd={isProd}
+            />
+        </header>
+
+        <div className={styles.appContent}>
+            <aside className={mergeClasses(styles.sidebar, isSidebarCollapsed && styles.sidebarCollapsed)}>
+                {activeModule && (
+                    <div
+                        className={styles.sidebarBorder}
+                        onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+                        aria-label={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                setIsSidebarCollapsed(!isSidebarCollapsed);
+                            }
+                        }}
+                    />
+                )}
+                <nav className={styles.sidebarNav}>
+                    {activeModule ? (
+                        <ul>
+                            {canViewAdmin && (
+                                <>
+                                    <li>
+                                        <div className={mergeClasses(styles.adminSection, isSidebarCollapsed && styles.adminSectionCollapsed)}>
+                                            {isSidebarCollapsed ? (
+                                                <Tooltip relationship="label" content="Configuration">
+                                                    <div
+                                                        className={mergeClasses(styles.adminSectionHeader, styles.adminSectionHeaderCollapsed)}
+                                                        onClick={() => {
+                                                            setIsAdminExpanded(!isAdminExpanded);
+                                                            setHasUserToggledAdmin(true);
+                                                        }}
+                                                    >
+                                                        <div className={mergeClasses(styles.adminSectionHeaderContent, styles.adminSectionHeaderContentCollapsed)}>
+                                                            <Shield20Regular />
+                                                        </div>
+                                                    </div>
+                                                </Tooltip>
+                                            ) : (
+                                                <div
+                                                    className={styles.adminSectionHeader}
+                                                    onClick={() => {
+                                                        setIsAdminExpanded(!isAdminExpanded);
+                                                        setHasUserToggledAdmin(true);
+                                                    }}
+                                                >
+                                                    <div className={styles.adminSectionHeaderContent}>
+                                                        <Shield20Regular />
+                                                        <span className={styles.adminSectionHeaderText}>Configuration</span>
+                                                    </div>
+                                                    {isAdminExpanded ? <ChevronUp16Regular /> : <ChevronDown16Regular />}
+                                                </div>
+                                            )}
+                                            {isAdminExpanded && (
+                                                <div className={styles.adminNavItems}>
+                                                    {adminNavItems.map((item) => (
+                                                        <div key={item.id} className={styles.adminNavItem}>
+                                                            {isNavDividerItem(item) ? (
+                                                                <Divider className={mergeClasses(styles.navDivider, isSidebarCollapsed && styles.navDividerCollapsed)} />
+                                                            ) : isSidebarCollapsed ? (
+                                                                <Tooltip relationship="label" content={item.label}>
+                                                                    <Button
+                                                                        appearance={activeNav === item.id ? 'primary' : 'subtle'}
+                                                                        icon={<item.icon />}
+                                                                        className={mergeClasses(styles.adminNavButton, styles.adminNavButtonCollapsed, activeNav === item.id && styles.adminNavButtonCollapsedSelected)}
+                                                                        onClick={() => { navigate(item.href, { replace: true }); }}
+                                                                    />
+                                                                </Tooltip>
+                                                            ) : (
+                                                                <Button
+                                                                    appearance={activeNav === item.id ? 'primary' : 'subtle'}
+                                                                    icon={<item.icon />}
+                                                                    className={styles.adminNavButton}
+                                                                    onClick={() => { navigate(item.href, { replace: true }); }}
+                                                                >
+                                                                    {item.label}
+                                                                </Button>
+                                                            )}
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            )}
+                                        </div>
+                                    </li>
+                                    {!isSidebarCollapsed && <Divider className={styles.sectionDivider} />}
+                                </>
+                            )}
+
+                            {regularNavItems.map((item: INavItem) => (
+                                <li key={item.id}>
+                                    {isNavDividerItem(item) ? (
+                                        <Divider className={mergeClasses(styles.navDivider, isSidebarCollapsed && styles.navDividerCollapsed)} />
+                                    ) : isSidebarCollapsed ? (
+                                        <Tooltip relationship="label" content={item.label}>
+                                            <Button
+                                                appearance={activeNav === item.id ? 'primary' : 'subtle'}
+                                                icon={<item.icon />}
+                                                className={mergeClasses(styles.navButton, styles.navButtonCollapsed, activeNav === item.id && styles.navButtonCollapsedSelected)}
+                                                onClick={() => { navigate(item.href, { replace: true }); }}
+                                            />
+                                        </Tooltip>
+                                    ) : (
+                                        <Button
+                                            appearance={activeNav === item.id ? 'primary' : 'subtle'}
+                                            icon={<item.icon />}
+                                            className={styles.navButton}
+                                            onClick={() => { navigate(item.href, { replace: true }); }}
+                                        >
+                                            {item.label}
+                                        </Button>
+                                    )}
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        <ul className={styles.emptySideNav} />
+                    )}
+                </nav>
+            </aside>
+
+            <main className={styles.mainContent}>
+                <div className={styles.contentWrapper}>
+                    <Outlet />
+                </div>
+            </main>
+        </div>
+
+        {activeModule && (
+            <nav className={styles.bottomNav}>
+                {[...mobileAdminNavItems, ...regularNavItems].filter(isNavLinkItem).map((item) => (
+                    <button
+                        key={item.id}
+                        className={mergeClasses(styles.bottomNavButton, (activeNav === item.id || (currentModuleConfig?.navItems?.Admin === item.id && location.pathname.includes('/configuration'))) ? styles.bottomNavButtonActive : '')}
+                        onClick={() => { navigate(item.href, { replace: true }); }}
+                        aria-label={item.label}
+                    >
+                        <div className={styles.bottomNavIcon}>
+                            <item.icon />
+                        </div>
+                        <span className={styles.bottomNavLabel}>{item.label}</span>
+                    </button>
+                ))}
+            </nav>
+        )}
+    </div>;
+}