# Compact Sidebar layout

**Metronic 9 reference:** [Demo 3](https://keenthemes.com/metronic/tailwind/react/demo3)

A narrow icon rail listing the top-level menu sections, with the selected section's children on a
horizontal navbar above the content card.

## Composition

| Piece                       | Source                                                       |
| --------------------------- | ------------------------------------------------------------ |
| Section chooser (icon rail) | `useAppMenu` + `firstMenuPath` from `../shared`              |
| Section navbar              | `NavMenubar` from `../shared`, fed by `useActiveMenuSection` |
| Mobile menu (sheet)         | `SidebarAccordionMenu` from `../shared`                      |
| Toolbar and breadcrumbs     | `Toolbar` / `ToolbarHeading` from `../shared`                |
| Footer                      | `AppFooter` from `../shared`                                 |
| Account menu                | `UserAvatarMenu` from `../shared`                            |

Layout-specific: `Header`, `HeaderLogo`, `Sidebar`, `SidebarMenu`, `Navbar`.

## Notes

- A section with no children renders no navbar, so a single-page section such as the dashboard fills
  the card.
- This layout sets `container` to `fluid`; the setting is per-layout, so other layouts keep theirs.
- Body variables: `--header-height: 58px`, `--sidebar-width: 58px`, `--navbar-height: 56px`.