Nav Item

A sidebar navigation row — leading icon, projected label, active fill, optional trailing badge/count. Used across the primary nav and "The Intelligence Center" nav group.

Selector: tip-nav-item

API

Name	Type	Default	Description
`icon` (input)	`string \| undefined`	`undefined`	Leading `tip-icon` name.
`active` (input)	`boolean`	`false`	Applies the active fill/weight and sets `aria-current="page"`.
`badge` (input)	`string \| number \| null`	`null`	Trailing red count badge (e.g. LFD Demurrage Shield's `3`).
`loading` (input)	`boolean`	`false`	Renders an icon-circle + text-line skeleton row instead.
`clicked` (output)	`void`	—	Emitted on click.
default slot	content	—	Nav label text.

Usage

<tip-nav-item [icon]="entry.icon" [badge]="entry.badge ?? null" [active]="isActive(entry)" (clicked)="onNavigate(entry)">
  {{ entry.label }}
</tip-nav-item>

Notes

active is computed by the consumer from the router (see Sidebar.isActive(), which matches on exact path or path/ prefix) — tip-nav-item has no router awareness itself.
[attr.aria-current]="active() ? 'page' : null" is set automatically; don't duplicate it at the call site.
Renders as a <button type="button">, not an anchor — routing/navigation happens in the clicked handler (router.navigateByUrl(...)), so it works for both real routes and inert placeholder entries (Active Shipments, Yard & Staging, etc.) that don't navigate yet.