# Dropdown Menu layout

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

A 90px sidebar of labelled icon tiles, one per top-level section. A section with children opens its
whole subtree in a nested dropdown rather than expanding in place.

## Composition

| Piece                       | Source                                        |
| --------------------------- | --------------------------------------------- |
| Sidebar tiles and dropdowns | `useAppMenu` from `../shared`                 |
| Mobile menu (sheet)         | `SidebarAccordionMenu` from `../shared`       |
| Toolbar and breadcrumbs     | `Toolbar` / `ToolbarHeading` from `../shared` |
| Footer                      | `AppFooter` from `../shared`                  |
| Account menu                | `UserAvatarMenu` from `../shared`             |

Layout-specific: `Sidebar`, `SidebarHeader`, `SidebarMenu`, `SidebarFooter`, `Header`.

## Notes

- Below `lg` the tiles give way to the shared accordion in a sheet, which reads better on a narrow
  viewport than nested dropdowns.
- Body variables: `--header-height: 60px`, `--sidebar-width: 90px`.