Design
Nav items
Sidebar navigation items rendered by the
<koala-nav-item>
tag helper. Each item renders an icon, label, and active state indicator.
Active and inactive states
Active items have white text and a bold font weight. Inactive items use secondary-200 text with a hover-to-white transition. Both states include a right-side indicator bar.
<!-- Active nav item -->
<koala-nav-item href="/partner" is-active="true" label="Home">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
</koala-nav-item>
<!-- Inactive nav item -->
<koala-nav-item href="/partner/quotes" is-active="false" label="Quotes">
<path d="M18 7c0-5.333-8-5.333-8 0"></path>
<path d="M10 7v14"></path>
<path d="M6 21h12"></path>
<path d="M6 13h10"></path>
</koala-nav-item>
Bottom nav items
Management items (Branches, Team, Settings) are pushed to the bottom of the sidebar with
<li class="!mt-auto">
as a spacer. These items are conditionally rendered based on user permissions.
<!-- Spacer to push management items to bottom -->
<li class="!mt-auto" aria-hidden="true"></li>
<!-- Permission-gated items -->
@if (canManageBranches)
{
<koala-nav-item href="/partner/branches"
is-active="@isBranches"
label="Branches">
<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path>
...
</koala-nav-item>
}
@if (canManageTeam)
{
<koala-nav-item href="/partner/team"
is-active="@isTeam"
label="Team">
...
</koala-nav-item>
}
Collapsed sidebar
When the sidebar is collapsed, the label is hidden via
x-show="!sidebarCollapsed || sidebarOpen".
Only the icon remains visible, with the link still clickable.
<!-- Label visibility controlled by sidebar state -->
<span class="ml-3 flex-1"
x-show="!sidebarCollapsed || sidebarOpen">
Home
</span>
<!-- sidebarCollapsed: desktop collapsed state -->
<!-- sidebarOpen: mobile hamburger open state -->
Attribute reference
The <koala-nav-item>
tag helper accepts the following attributes.
| Attribute | Type | Description |
|---|---|---|
| href | string | Navigation URL for the link |
| is-active | bool | Whether this item is the current page (controls text weight and indicator visibility) |
| label | string | Text label displayed next to the icon |
| skeleton | PageSkeletonType | Detail (default), Dashboard, List, or Form. Renders data-skeleton attribute so showPageSkeleton(type) picks the matching archetype while the page loads |
| child content | HTML | SVG <path> and <circle> elements for the icon (wrapped in a 24x24 SVG by the tag helper) |
Output HTML
The tag helper renders a <li>
with an <a> link,
SVG icon wrapping the child paths, label span, and an active indicator bar.
The link includes x-target.push="main"
for Alpine-AJAX navigation and x-on:click="sidebarOpen = false"
to close the mobile sidebar on navigation.
<!-- Rendered output for an active nav item -->
<li class="relative group">
<a href="/partner"
x-target.push="main"
x-on:click="sidebarOpen = false"
class="text-white font-semibold flex h-10 w-full
items-center rounded-md p-2 text-base
text-secondary-200">
<svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"
class="h-5 w-5 shrink-0">
<!-- Child path content -->
</svg>
<span class="ml-3 flex-1"
x-show="!sidebarCollapsed || sidebarOpen">
Home
</span>
</a>
<!-- Active: solid indicator -->
<span class="absolute right-0 inset-y-1.5 w-0.5
rounded-full bg-white"></span>
</li>
<!-- Rendered output for an inactive nav item -->
<li class="relative group">
<a href="/partner/quotes" ...
class="hover:text-white flex h-10 ...">
<!-- icon + label -->
</a>
<!-- Inactive: pulse animation on hover -->
<span class="absolute right-0 inset-y-1.5 w-0.5
rounded-full bg-white hidden group-hover:block"
style="animation: nav-pulse 1.5s ease-in-out infinite">
</span>
</li>