<tyro-ui-dashboard-layout>

Dashboard Layout

Full layout with collapsible sidebar, integrated navbar and mobile management. Wraps tyro-ui-navbar and projects page content via <ng-content>.

Inputs

Property	Type	Default	Description
`[project]`	string	`''`	Project name displayed in the topbar and sidebar (e.g. "Useritium")
`[logo]`	string	`''`	Color logo URL displayed in the topbar
`[logoWhite]`	string	`''`	White logo URL displayed in the mobile sidebar
`[utility]`	string	`''`	Utility label displayed below the project name in the sidebar (e.g. "Dashboard", "Hub")
`[requireLogin]`	boolean	`true`	Redirects to the login page if the user is not authenticated via `TyroUiAuthService`
`[navItems]`	ITyroUiDashNavItem[]	`[]`	Navigation tree displayed in the sidebar (see interfaces below)

Navigation interfaces

ITyroUiDashNavItem - niveau 1

Field	Type	Description
`label`	string	Text displayed in the sidebar
`icon`	string	Remix-icon class (used if `iconImg` is absent)
`iconImg?`	string	Image URL replacing the icon (project logos, etc.)
`link?`	string	Angular route - omitted if group or category
`category?`	boolean	Turns the item into a collapsible section (not a link)
`children?`	ITyroUiDashNavChild[]	Sub-items (level 2)
`open?`	boolean	Open/closed state of the group or category

ITyroUiDashNavChild - niveau 2

Field	Type	Description
`label`	string	Displayed text
`icon`	string	Remix-icon class
`iconImg?`	string	Image URL replacing the icon
`link?`	string	Route - omitted if sub-group
`children?`	ITyroUiDashNavSubItem[]	Sub-sub-items (level 3)
`open?`	boolean	Sub-group open state

ITyroUiDashNavSubItem - niveau 3

Field	Type	Description
`label`	string	Displayed text
`icon`	string	Remix-icon class
`iconImg?`	string	Image URL replacing the icon
`link`	string	Angular route (required at level 3)

Sidebar behaviour

State	Trigger	Effect
Expanded (desktop)	Default	Sidebar 240px, labels visible
Collapsed (desktop)	Chevron button at the top of the sidebar	Sidebar 60px, icons only + hover tooltip
Open (mobile)	Topbar burger button	Sidebar as overlay (`z-index: 1002`) above the content
Closed (mobile)	Overlay click · link · close button · `Escape`	Sidebar returns to `translateX(-100%)`

Usage

Wrap your <router-outlet> inside the component in your main layout.

<tyro-ui-dashboard-layout
  [project]="'Useritium'"
  [utility]="'Dashboard'"
  [logo]="'assets/tyrolium-ui/projects/Useritium.png'"
  [logoWhite]="'assets/tyrolium-ui/projects/Useritium-White.png'"
  [navItems]="navItems">
  <router-outlet />
</tyro-ui-dashboard-layout>