AppLayout (Main Wrapper)
├── AppTopSidebarLayout
    ├── AppShell (variant="sidebar")
        ├── AppSidebar (Left Navigation)
        │   ├── Sidebar Toggle
        │   ├── Menu Items (from YAML)
        │   └── Active State Highlighting
        └── AppContent
            ├── TopBar (Top Navigation)
            │   ├── Sidebar Toggle Button
            │   ├── NavTopMenubar (Contextual Menu)
            │   ├── Language Switcher
            │   └── Theme Toggle
            ├── Breadcrumb Bar
            └── Page Content

// Load menu files
$this->menu = MenuUtil::loadResYaml($nav_file, $nav_path)->toArray();
$dir_menu = MenuUtil::loadResYaml('nav', 'views/partials/app/directory')->toArray();
// ... load other menus

// Merge all menus
$this->menu = array_merge($this->menu, $dir_menu, $core_menu, $parameter_menu);

// Process menus
$this->menu = MenuUtil::normalizeMenuUrls($this->menu);
$this->menu = MenuUtil::translateMenu($this->menu);
$this->menu = MenuUtil::markActiveMenuItems($this->menu);

// Generate contextual top menu
$this->generateTopMenu(); // Creates $this->top_menu

// Page Component (e.g., Directory/Member/Index.vue)
interface Props {
    menu?: NavItem[];           // Main sidebar menu
    icons?: {};                // Menu icons
    top_menu?: NavItem[];       // Contextual top menu
    top_menu_icons?: {};       // Top menu icons
    // ... other props
}

// Pass to AppLayout
<AppLayout 
    :menu="menu" 
    :icons="icons" 
    :top_menu="top_menu" 
    :top_menu_icons="top_menu_icons"
>

<!-- AppLayout.vue -->
<AppLayout 
    :menu="menu" 
    :icons="icons" 
    :top_menu="top_menu" 
    :top_menu_icons="top_menu_icons"
>

<!-- TopBar.vue -->
<NavTopMenubar 
    :menu="props.top_menu || props.menu" 
    :icons="props.top_menu_icons || props.icons"
/>

- title: "Document Management"
  auth: "dms-menu"
  icon: "File"
  url: "dms/main/dashboard"
  children:
    - title: Dashboard
      auth: dms-repository
      url: "dms/main/dashboard"
      icon: "ChartPie"
    - title: Repository
      auth: dms-repository
      url: "dms/repository"
      icon: "FileStack"

// MenuUtil::markActiveMenuItems()
$currentPath = Request::path();
if (!str_starts_with($currentPath, '/')) {
    $currentPath = '/' . $currentPath;
}

// Compare normalized paths
if ($itemPath === $currentPath) {
    $item['isActive'] = true;
}

// In controller or component
$sidebarState = 'collapsed'; // or 'expanded'

// Generate top menu (level 1 = children of active group)
$this->generateTopMenu(1);

// Or disable top menu
$this->generateTopMenu(0); // Shows main groups instead

// config/core/app.php
'app_nav_path' => 'views/partials/app/dms',
'app_nav_file' => 'navnext',

// In AdminController constructor
$core_menu = MenuUtil::loadResYaml('user', 'views/partials/app/sys')->toArray();
$dir_menu = MenuUtil::loadResYaml('nav', 'views/partials/app/directory')->toArray();