Application sidebar components for navigation and dashboard layouts
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Plus AI sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Plus AI</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search plus ai" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-19-create-label">
<h3 id="sidebar-19-create-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Create</h3>
<nav class="flex flex-col gap-1" aria-label="Create navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-wand-magic-sparkles text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Runs</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Prompts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Datasets</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Evaluations</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-19-operate-label">
<h3 id="sidebar-19-operate-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Operate</h3>
<nav class="flex flex-col gap-1" aria-label="Operate navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Models</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Guardrails</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Usage</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Plus AI action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-solid fa-wand-magic-sparkles text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>New run</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Ivy Ross" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Ivy Ross</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Analytics sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Analytics</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search analytics" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-7-insights-label">
<h3 id="sidebar-7-insights-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Insights</h3>
<nav class="flex flex-col gap-1" aria-label="Insights navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-chart-line text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Overview</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Funnels</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Cohorts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Reports</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-7-manage-label">
<h3 id="sidebar-7-manage-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Manage</h3>
<nav class="flex flex-col gap-1" aria-label="Manage navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Data sources</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Alerts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Exports</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Analytics action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-solid fa-chart-line text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Export report</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Ari Wells" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Ari Wells</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Billing sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Billing</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search billing" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-18-account-label">
<h3 id="sidebar-18-account-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Account</h3>
<nav class="flex flex-col gap-1" aria-label="Account navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-credit-card text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Subscription</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Invoices</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Usage</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Payment methods</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-18-admin-label">
<h3 id="sidebar-18-admin-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Admin</h3>
<nav class="flex flex-col gap-1" aria-label="Admin navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Tax details</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Receipts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Contacts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Billing action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-regular fa-credit-card text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Upgrade plan</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Finn Lee" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Finn Lee</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Calendar sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Calendar</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search calendar" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-17-schedule-label">
<h3 id="sidebar-17-schedule-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Schedule</h3>
<nav class="flex flex-col gap-1" aria-label="Schedule navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Today</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-calendar text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Rooms</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Availability</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Bookings</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-17-manage-label">
<h3 id="sidebar-17-manage-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Manage</h3>
<nav class="flex flex-col gap-1" aria-label="Manage navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Team calendars</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Rules</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Integrations</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Calendar action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-regular fa-calendar text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Book room</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Nell Stone" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Nell Stone</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Commerce sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Commerce</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search commerce" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-8-store-label">
<h3 id="sidebar-8-store-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Store</h3>
<nav class="flex flex-col gap-1" aria-label="Store navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-bag-shopping text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Orders</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Products</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Customers</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Discounts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-8-operations-label">
<h3 id="sidebar-8-operations-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Operations</h3>
<nav class="flex flex-col gap-1" aria-label="Operations navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Inventory</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Returns</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Invoices</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Commerce action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-solid fa-bag-shopping text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Create product</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Lina Cole" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Lina Cole</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Compliance sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Compliance</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search compliance" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-16-audit-label">
<h3 id="sidebar-16-audit-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Audit</h3>
<nav class="flex flex-col gap-1" aria-label="Audit navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-shield-halved text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Evidence</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Controls</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Risks</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Reviews</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-16-policy-label">
<h3 id="sidebar-16-policy-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Policy</h3>
<nav class="flex flex-col gap-1" aria-label="Policy navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Documents</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Owners</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Exceptions</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Compliance action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-solid fa-shield-halved text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Upload evidence</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Hugo Reid" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Hugo Reid</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Console sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Console</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search console" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-13-build-label">
<h3 id="sidebar-13-build-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Build</h3>
<nav class="flex flex-col gap-1" aria-label="Build navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-code text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">API keys</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Webhooks</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Logs</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Environments</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-13-observe-label">
<h3 id="sidebar-13-observe-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Observe</h3>
<nav class="flex flex-col gap-1" aria-label="Observe navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Usage</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Limits</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Status</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Console action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-solid fa-code text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Open docs</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Noah Kim" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Noah Kim</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Finance sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Finance</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search finance" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-10-money-label">
<h3 id="sidebar-10-money-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Money</h3>
<nav class="flex flex-col gap-1" aria-label="Money navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-coins text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Invoices</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Payouts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Budgets</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Forecasts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-10-controls-label">
<h3 id="sidebar-10-controls-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Controls</h3>
<nav class="flex flex-col gap-1" aria-label="Controls navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Approvals</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Vendors</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Audit log</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Finance action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-solid fa-coins text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Review payout</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Rae Patel" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Rae Patel</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="People sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">People</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search people" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-14-hiring-label">
<h3 id="sidebar-14-hiring-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Hiring</h3>
<nav class="flex flex-col gap-1" aria-label="Hiring navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-id-badge text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Candidates</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Interviews</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Offers</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Scorecards</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-14-team-label">
<h3 id="sidebar-14-team-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Team</h3>
<nav class="flex flex-col gap-1" aria-label="Team navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">People</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Reviews</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Payroll</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="People action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-regular fa-id-badge text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Post role</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Eva Brooks" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Eva Brooks</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Inbox sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Inbox</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search inbox" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-15-mailboxes-label">
<h3 id="sidebar-15-mailboxes-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Mailboxes</h3>
<nav class="flex flex-col gap-1" aria-label="Mailboxes navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-envelope text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Primary</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Shared</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Drafts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Sent</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-15-labels-label">
<h3 id="sidebar-15-labels-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Labels</h3>
<nav class="flex flex-col gap-1" aria-label="Labels navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Priority</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Follow up</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Archived</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Inbox action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-regular fa-envelope text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Compose</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="June Park" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">June Park</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Learning sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Learning</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search learning" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-11-learn-label">
<h3 id="sidebar-11-learn-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Learn</h3>
<nav class="flex flex-col gap-1" aria-label="Learn navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-graduation-cap text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Courses</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Lessons</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Assignments</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Certificates</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-11-community-label">
<h3 id="sidebar-11-community-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Community</h3>
<nav class="flex flex-col gap-1" aria-label="Community navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Cohorts</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Mentors</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Messages</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Learning action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-solid fa-graduation-cap text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Resume course</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Mira Diaz" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Mira Diaz</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Campaigns sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Campaigns</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search campaigns" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-20-plan-label">
<h3 id="sidebar-20-plan-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Plan</h3>
<nav class="flex flex-col gap-1" aria-label="Plan navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-bullhorn text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Campaigns</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Calendar</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Audiences</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Assets</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-20-measure-label">
<h3 id="sidebar-20-measure-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Measure</h3>
<nav class="flex flex-col gap-1" aria-label="Measure navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Attribution</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Experiments</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Reports</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Campaigns action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-solid fa-bullhorn text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Launch campaign</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Olive Smith" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Olive Smith</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Projects sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Projects</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search projects" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-12-plan-label">
<h3 id="sidebar-12-plan-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Plan</h3>
<nav class="flex flex-col gap-1" aria-label="Plan navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-folder-open text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Sprint</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Backlog</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Roadmap</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Milestones</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-12-deliver-label">
<h3 id="sidebar-12-deliver-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Deliver</h3>
<nav class="flex flex-col gap-1" aria-label="Deliver navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Releases</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Retros</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Dependencies</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Projects action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-regular fa-folder-open text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>Add task</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Tara Moon" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Tara Moon</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
<aside
class="bg-color-modal flex w-full max-w-xs flex-col gap-8 overflow-hidden rounded p-8 md:max-w-sm md:gap-9 md:p-9 lg:gap-10 lg:p-10"
aria-label="Primary sidebar navigation">
<header class="flex items-start justify-between">
<a href="#" class="flex size-7 items-center justify-center" aria-label="Plus UI home">
<img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
</a>
<button type="button" class="text-color-default flex size-7 items-center justify-center" aria-label="Open menu">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</header>
<plus-button kind="filled" status="default" size="md" full-width>
<span class="flex w-full items-center gap-2 text-start">
<i class="fa-regular fa-user text-base" aria-hidden="true"></i>
<span>Create a team</span>
</span>
</plus-button>
<nav class="flex flex-col gap-4" aria-label="Main navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-house text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Home</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-clock text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Reservation</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-calendar text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Calendar</span>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-square-caret-right text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Video</span>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-image text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Image</span>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-bell text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Notification</span>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-envelope text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Email</span>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
</nav>
<plus-divider></plus-divider>
<nav class="flex flex-col gap-3" aria-label="Account navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-window-maximize text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Settings</span>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-user text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Profile</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs text-color-default" aria-hidden="true"></i>
</a>
</nav>
</aside>
<aside
class="bg-color-modal flex w-full max-w-xs flex-col gap-8 overflow-hidden rounded p-8 md:max-w-sm md:gap-9 md:p-9 lg:gap-10 lg:p-10"
aria-label="Search sidebar navigation">
<header class="flex items-start justify-between">
<a href="#" class="flex size-7 items-center justify-center" aria-label="Plus UI home">
<img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
</a>
<button type="button" class="text-color-default flex size-7 items-center justify-center" aria-label="Open menu">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</header>
<plus-input placeholder="Search" type="search" full-width aria-label="Search navigation">
<i slot="prefix" class="fa-solid fa-magnifying-glass text-sm text-color-default" aria-hidden="true"></i>
</plus-input>
<nav class="flex flex-col gap-4" aria-label="Main navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-house text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Home</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<div class="flex items-center gap-2 rounded px-2 py-1.5 text-color-caption">
<span class="flex-1 text-xs font-medium md:text-sm">Main menu</span>
<i class="fa-solid fa-chevron-up text-xs text-color-default" aria-hidden="true"></i>
</div>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-clock text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Reservation</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-calendar text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Calendar</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-square-caret-right text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Video</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<div class="flex items-center gap-2 rounded px-2 py-1.5 text-color-caption">
<span class="flex-1 text-xs font-medium md:text-sm">Main menu</span>
<i class="fa-solid fa-chevron-up text-xs text-color-default" aria-hidden="true"></i>
</div>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-image text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Image</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-bell text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Notification</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-envelope text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Email</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</nav>
<plus-divider></plus-divider>
<section class="flex flex-col gap-5" aria-label="Storage plan">
<div class="flex flex-col gap-3">
<p class="text-sm font-medium text-color-default">Upgrade Your Plan</p>
<div class="flex flex-col gap-2">
<p class="text-xs font-medium text-color-default">10.4GB of 15GB</p>
<div class="bg-color-default-default h-2 w-full overflow-hidden rounded-full">
<div class="bg-color-info-default h-full w-2/3 rounded-full"></div>
</div>
</div>
</div>
<plus-button kind="outlined" status="default" size="md" full-width>Upgrade Now</plus-button>
</section>
</aside>
<aside
class="bg-color-modal flex w-full max-w-xs flex-col gap-8 overflow-hidden rounded p-8 md:max-w-sm md:gap-9 md:p-9 lg:gap-10 lg:p-10"
aria-label="Team sidebar navigation">
<header class="flex items-start justify-between">
<a href="#" class="flex size-7 items-center justify-center" aria-label="Plus UI home">
<img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" />
</a>
<button type="button" class="text-color-default flex size-7 items-center justify-center" aria-label="Open menu">
<i class="fa-solid fa-bars text-xl"></i>
</button>
</header>
<div class="flex flex-wrap gap-3" aria-label="Social links">
<plus-button kind="outlined" status="default" size="sm" aria-label="X profile"><i class="fa-brands fa-x-twitter text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Facebook profile"><i class="fa-brands fa-facebook text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="LinkedIn profile"><i class="fa-brands fa-linkedin text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Google profile"><i class="fa-brands fa-google text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="YouTube profile"><i class="fa-brands fa-youtube text-base" aria-hidden="true"></i></plus-button>
</div>
<nav class="flex flex-col gap-4" aria-label="Main navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-house text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Home</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<div class="flex items-center gap-2 rounded px-2 py-1.5 text-color-caption">
<span class="flex-1 text-xs font-medium md:text-sm">Main menu</span>
<i class="fa-solid fa-chevron-up text-xs text-color-default" aria-hidden="true"></i>
</div>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-clock text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Reservation</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-calendar text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Calendar</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-square-caret-right text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Video</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<div class="flex items-center gap-2 rounded px-2 py-1.5 text-color-caption">
<span class="flex-1 text-xs font-medium md:text-sm">Main menu</span>
<i class="fa-solid fa-chevron-up text-xs text-color-default" aria-hidden="true"></i>
</div>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-image text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Image</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-bell text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Notification</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-envelope text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Email</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</nav>
<plus-divider></plus-divider>
<nav class="flex flex-col gap-3" aria-label="Teams">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<plus-avatar size="xs" text="Product Team"></plus-avatar>
<span class="flex-1 text-sm md:text-base">Product Team</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<plus-avatar size="xs" text="Sales Team"></plus-avatar>
<span class="flex-1 text-sm md:text-base">Sales Team</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</nav>
<section class="bg-color-primary-invert-default flex gap-3 rounded p-3" aria-label="Create a team">
<plus-avatar size="sm" text="Sales Team"></plus-avatar>
<div class="flex min-w-px flex-1 flex-col gap-1.5">
<div class="flex items-center gap-2">
<p class="flex-1 text-sm text-color-default">Create a team</p>
<plus-chip status="info" size="sm">New</plus-chip>
</div>
<p class="text-xs text-color-caption">Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
<p class="text-xs font-semibold text-color-caption">135K Monthly</p>
</div>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar size="md" text="Jack More"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-sm font-medium text-color-default md:text-base">Jack More</p>
<p class="text-xs text-color-caption">[email protected]</p>
</div>
<a href="#" class="flex size-6 items-center justify-center text-color-default" aria-label="Open user menu">
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</footer>
</aside>
<aside
class="bg-color-modal flex w-full max-w-xs flex-col gap-8 overflow-hidden rounded p-8 md:max-w-sm md:gap-9 md:p-9 lg:gap-10 lg:p-10"
aria-label="Profile sidebar navigation">
<header class="flex items-center gap-3">
<plus-avatar size="lg" text="Jack More"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-sm font-medium text-color-default md:text-base">Jack More</p>
<p class="text-xs text-color-caption md:text-sm">[email protected]</p>
</div>
<button type="button" class="text-color-default flex size-6 items-center justify-center" aria-label="Open menu">
<i class="fa-solid fa-bars text-base" aria-hidden="true"></i>
</button>
</header>
<div class="flex flex-wrap gap-3" aria-label="Social links">
<plus-button kind="outlined" status="default" size="sm" aria-label="X profile"><i class="fa-brands fa-x-twitter text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Facebook profile"><i class="fa-brands fa-facebook text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="LinkedIn profile"><i class="fa-brands fa-linkedin text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Google profile"><i class="fa-brands fa-google text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="YouTube profile"><i class="fa-brands fa-youtube text-base" aria-hidden="true"></i></plus-button>
</div>
<nav class="flex flex-col gap-4" aria-label="Main navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-house text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Home</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<div class="flex items-center gap-2 rounded px-2 py-1.5 text-color-caption">
<span class="flex-1 text-xs font-medium md:text-sm">Main menu</span>
<i class="fa-solid fa-chevron-up text-xs text-color-default" aria-hidden="true"></i>
</div>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-clock text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Reservation</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-calendar text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Calendar</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-square-caret-right text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Video</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<div class="flex items-center gap-2 rounded px-2 py-1.5 text-color-caption">
<span class="flex-1 text-xs font-medium md:text-sm">Main menu</span>
<i class="fa-solid fa-chevron-up text-xs text-color-default" aria-hidden="true"></i>
</div>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-image text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Image</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-bell text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Notification</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-envelope text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Email</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</nav>
<plus-divider></plus-divider>
<nav class="flex flex-col gap-3" aria-label="Teams">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<plus-avatar size="xs" text="Product Team"></plus-avatar>
<span class="flex-1 text-sm md:text-base">Product Team</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<plus-avatar size="xs" text="Sales Team"></plus-avatar>
<span class="flex-1 text-sm md:text-base">Sales Team</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</nav>
<section class="border-color-disabled flex flex-col gap-3 rounded border p-3" aria-label="Promoted card">
<div>
<p class="text-sm font-semibold text-color-caption">Card UI</p>
<p class="text-xs text-color-placeholder md:text-sm">Build faster with powerful.</p>
</div>
<div class="bg-color-danger-invert-default flex h-24 items-center justify-center rounded">
<div class="bg-color-modal flex size-12 items-center justify-center rounded-full text-color-caption">
<i class="fa-solid fa-play text-base" aria-hidden="true"></i>
</div>
</div>
<plus-button kind="outlined" status="default" size="md" full-width>Upgrade Now</plus-button>
</section>
</aside>
<aside
class="bg-color-modal flex w-full max-w-xs flex-col gap-8 overflow-hidden rounded p-8 md:max-w-sm md:gap-9 md:p-9 lg:gap-10 lg:p-10"
aria-label="Nested sidebar navigation">
<header class="flex items-center gap-3">
<plus-avatar size="lg" text="Jack More"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-sm font-medium text-color-default md:text-base">Jack More</p>
<p class="text-xs text-color-caption md:text-sm">[email protected]</p>
</div>
<button type="button" class="text-color-default flex size-6 items-center justify-center" aria-label="Open menu">
<i class="fa-solid fa-bars text-base" aria-hidden="true"></i>
</button>
</header>
<plus-input placeholder="Search" type="search" full-width aria-label="Search navigation">
<i slot="prefix" class="fa-solid fa-magnifying-glass text-sm text-color-default" aria-hidden="true"></i>
</plus-input>
<nav class="flex flex-col gap-4" aria-label="Main navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-folder text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">General</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pl-8 pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-clock text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Reservation</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pl-8 pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-calendar text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Calendar</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pl-8 pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-square-caret-right text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Video</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-folder text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Products</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pl-8 pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-bell text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Notification</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pl-8 pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-envelope text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Email</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-folder text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Contact</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</nav>
<plus-divider></plus-divider>
<nav class="flex flex-col gap-3" aria-label="Account navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-window-maximize text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Settings</span>
<plus-chip invert status="info" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded px-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-user text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm md:text-base">Profile</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</nav>
<section class="border-color-disabled flex flex-col gap-3 rounded border p-3" aria-label="Promoted card">
<div>
<p class="text-sm font-semibold text-color-caption">Card UI</p>
<p class="text-xs text-color-caption md:text-sm">Build faster with powerful layouts.</p>
</div>
<div class="bg-color-info-invert-default flex h-24 items-center justify-center rounded">
<div class="bg-color-primary-invert-default flex w-36 items-center justify-center rounded p-2">
<span class="text-lg font-semibold text-color-default">Auto Layout</span>
</div>
</div>
<plus-button kind="outlined" status="default" size="md" full-width>Upgrade Now</plus-button>
</section>
<div class="flex flex-wrap gap-3" aria-label="Social links">
<plus-button kind="outlined" status="default" size="sm" aria-label="X profile"><i class="fa-brands fa-x-twitter text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Facebook profile"><i class="fa-brands fa-facebook text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="LinkedIn profile"><i class="fa-brands fa-linkedin text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Google profile"><i class="fa-brands fa-google text-base" aria-hidden="true"></i></plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="YouTube profile"><i class="fa-brands fa-youtube text-base" aria-hidden="true"></i></plus-button>
</div>
</aside>
<aside
class="bg-color-modal flex w-full max-w-xs flex-col gap-8 overflow-hidden rounded p-8 md:max-w-sm md:gap-9 md:p-9 lg:gap-10 lg:p-10"
aria-label="Upgrade sidebar navigation">
<header class="flex items-center gap-3">
<plus-avatar size="lg" text="Jack More"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-sm font-medium text-color-default md:text-base">Jack More</p>
<p class="text-xs text-color-caption md:text-sm">[email protected]</p>
</div>
<button type="button" class="bg-color-default-default text-color-default flex size-9 items-center justify-center rounded-lg" aria-label="Go to account">
<i class="fa-solid fa-arrow-right text-sm" aria-hidden="true"></i>
</button>
</header>
<plus-divider></plus-divider>
<nav class="flex flex-col gap-5 md:gap-6" aria-label="Main navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-clock text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium md:text-base">Reservation</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-calendar text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium md:text-base">Calendar</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-square-caret-right text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium md:text-base">Video</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-bell text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium md:text-base">Notification</span>
<plus-chip invert status="success" size="sm">New</plus-chip>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-folder text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium md:text-base">Products</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-envelope text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium md:text-base">Email</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-user text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium md:text-base">Human Resources</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-address-book text-base" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium md:text-base">Contacts</span>
<i class="fa-solid fa-chevron-right text-xs" aria-hidden="true"></i>
</a>
</nav>
<section class="flex flex-col gap-6" aria-label="Upgrade plan">
<div class="bg-color-primary-invert-default flex h-48 items-end justify-center overflow-hidden rounded p-4">
<div class="flex w-full max-w-xs items-end justify-center gap-3">
<div class="bg-color-surface flex h-24 w-28 items-end gap-1 rounded p-3 shadow-sm">
<span class="bg-color-primary-invert-hovered h-8 w-3 rounded"></span>
<span class="bg-color-primary-default h-12 w-3 rounded"></span>
<span class="bg-color-info-default h-16 w-3 rounded"></span>
<span class="bg-color-success-default h-20 w-3 rounded"></span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="bg-color-default-invert-default size-14 rounded-full"></div>
<div class="bg-color-primary-default h-16 w-6 rounded"></div>
</div>
</div>
</div>
<plus-button kind="outlined" status="primary" size="md" full-width>
<i class="fa-solid fa-gem" aria-hidden="true"></i>
Upgrade for Pro
</plus-button>
</section>
<nav class="flex flex-col gap-4" aria-label="Session navigation">
<a href="#" class="hover:bg-color-default-hovered flex h-9 items-center gap-2 rounded pr-2 text-color-default">
<span class="flex size-6 items-center justify-center"><i class="fa-solid fa-arrow-right-from-bracket text-sm" aria-hidden="true"></i></span>
<span class="flex-1 text-sm font-medium">Logout</span>
</a>
</nav>
<plus-divider></plus-divider>
<plus-toggle label="Light Mode" caption="Light theme for bright environments." size="md"></plus-toggle>
</aside>
<aside class="bg-color-modal flex w-full max-w-xs flex-col gap-6 overflow-hidden rounded p-6 sm:max-w-sm sm:p-7" aria-label="Support sidebar navigation">
<header class="flex items-center gap-3">
<a href="#" class="bg-color-surface flex size-9 items-center justify-center rounded" aria-label="Plus UI home"><img src="https://www.plusui.com/logo.svg" alt="Plus UI" class="size-6 object-contain" /></a>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-base font-semibold">Support</p>
<p class="text-color-caption truncate text-xs">Workspace</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Collapse sidebar"><i class="fa-solid fa-bars text-color-caption" aria-hidden="true"></i></plus-button>
</header>
<plus-input type="search" label="Search" placeholder="Search support" size="sm" full-width></plus-input>
<div class="flex flex-col gap-5">
<section class="flex flex-col gap-2" aria-labelledby="sidebar-9-queues-label">
<h3 id="sidebar-9-queues-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Queues</h3>
<nav class="flex flex-col gap-1" aria-label="Queues navigation">
<a href="#" class="bg-color-primary-invert-default text-color-primary flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium" aria-current="page">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-life-ring text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Inbox</span>
<plus-chip status="primary" invert size="sm">Active</plus-chip>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Waiting</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Escalated</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Resolved</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
<section class="flex flex-col gap-2" aria-labelledby="sidebar-9-resources-label">
<h3 id="sidebar-9-resources-label" class="text-color-placeholder px-2 text-xs font-medium uppercase">Resources</h3>
<nav class="flex flex-col gap-1" aria-label="Resources navigation">
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Knowledge base</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Macros</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
<a href="#" class="text-color-default hover:bg-color-default-hovered flex min-h-9 items-center gap-2 rounded px-2 text-sm font-medium">
<span class="flex size-6 items-center justify-center"><i class="fa-regular fa-circle text-sm" aria-hidden="true"></i></span>
<span class="min-w-px flex-1 truncate">Reports</span>
<i class="fa-solid fa-chevron-right text-color-caption text-xs" aria-hidden="true"></i>
</a>
</nav>
</section>
</div>
<section class="border-color-default bg-color-surface flex flex-col gap-4 rounded border p-4" aria-label="Support action">
<div class="flex items-center gap-3">
<span class="bg-color-primary-invert-default text-color-primary flex size-9 items-center justify-center rounded"><i class="fa-regular fa-life-ring text-sm" aria-hidden="true"></i></span>
<div class="min-w-px flex-1">
<p class="text-color-default text-sm font-medium">Quick action</p>
<p class="text-color-caption text-xs">Ready for this workspace</p>
</div>
</div>
<plus-button kind="outlined" status="primary" size="sm" full-width>New macro</plus-button>
</section>
<plus-divider></plus-divider>
<footer class="flex items-center gap-3">
<plus-avatar text="Max Taylor" size="md"></plus-avatar>
<div class="min-w-px flex-1">
<p class="text-color-default truncate text-sm font-medium">Max Taylor</p>
<p class="text-color-caption truncate text-xs">[email protected]</p>
</div>
<plus-button kind="text" status="default" size="sm" aria-label="Account settings"><i class="fa-solid fa-gear text-color-caption" aria-hidden="true"></i></plus-button>
</footer>
</aside>
What is a menu side navigation UI component?
A menu side navigation UI component is a reusable UI element used in modern web applications and SaaS dashboards as part of a scalable UI component library or design system.
Why are menu side navigation components important in frontend development?
Menu Side Navigation components help developers build consistent interfaces, reuse frontend UI elements, and accelerate development using a structured component-based UI system.
Where are menu side navigation UI components commonly used?
Menu Side Navigation UI components are commonly used in SaaS platforms, admin panels, product dashboards, web applications, and modern frontend interfaces.
Can menu side navigation UI components be reused across frameworks?
Yes. Modern UI component libraries like PlusUI support reusable UI components that can work across frameworks such as React, Vue, Angular, and Web Components.
How do menu side navigation components improve UI design systems?
Menu Side Navigation components act as modular UI building blocks within a design system, helping teams maintain consistent UI patterns and scalable frontend architecture.
Join to our popular weekly newsletter Plus UI, packed with updates, tips on UX and get the latest news in your inbox.
© Plus UI 2026
Plus UI offers an integrated Design System and UI Library, featuring a versatile suite of components to elevate your development projects. We streamline the web app development process with fully customizable pre-built components, themes, and powerful integrations.
Our components are built on a centralized token architecture, ensuring consistency and efficiency across your design system and UI library. The UI Library's framework-agnostic technology allows seamless use of components across different frameworks. Optimized for speed, it offers fast loading times, high performance, and quick integration, making it the fastest component library for web applications. The token architecture ensures theming consistency, covering essential design aspects like Color, Typography, Icons, Borders, Spacing, Opacity, Shadows & Effects, and Breakpoints. Integrations with Tailwind CSS and Font Awesome enhance functionality. Ready-to-use themes include light and dark modes, with full customization to apply your branding. Plus UI is also compliant with WCAG 2.1 standards for accessible web design.
We have meticulously designed and developed a collection of 26 feature-rich core components, with over 2000 variants and more than 2000 free icons in our Freemium Plan. For more advanced needs, our Pro Plan provides access to professionally designed and developed components, blocks, and templates. Our core components include: Accordion, Alert, Avatar, Badge, Button, Button Group, Breadcrumb, Checkbox, Chip, Divider, Drawer, Dropdown, Input, Link, Modal, Progress, Popconfirm, Popover, Radio, Rating, Select, Tabs, Textarea, Toast, Toggle, and Tooltip. Advanced components feature Charts, Date & Time Pickers, Data Grids, and Tree Views. The Plus UI component library offers a robust and flexible solution for building user interfaces, with support for React, Vue.js, Angular, Svelte, Next.js, and other frameworks.
Plus UI sets itself apart from other UI libraries and design systems. While systems like IBM's Carbon Design System excel in scalability for enterprise use, Plus UI integrates a centralized token system that unifies the design system and UI library, enhancing consistency and efficiency.
Unlike the Atlassian Design System, which focuses on simplicity for enterprise solutions, Plus UI provides a rich set of customizable and accessible components powered by Tailwind CSS and Font Awesome, ensuring a lightweight and flexible design framework.
The Figma Design System is known for its powerful collaboration features. Plus UI complements these by offering a meticulously organized suite of components compatible with Figma, allowing designers to leverage advanced features alongside our extensive library.
For Salesforce developers, the Lightning Design System offers robust tools. Plus UI provides similar robustness but extends its versatility by supporting multiple frameworks like React, Angular, Vue, and Svelte, making it adaptable to a wider range of applications.
The Airbnb Design System emphasizes user-centric principles. Plus UI builds on this with a centralized token system that enhances design coherence, ensuring all components adhere to consistent standards.
Apple’s Design System is celebrated for its sleek aesthetics and high performance. Plus UI matches this standard while providing a vast array of fully customizable and accessible components, including support for dark themes.
Atomic Design focuses on breaking down UIs into smaller, reusable components. Plus UI extends this approach with over 2000 variants and a rich set of properties and tokens, enabling efficient development of complex interfaces.
The IBM Design System is known for its comprehensive guidelines and accessibility. Plus UI offers user-friendly, accessible interfaces with detailed documentation and a component library that boosts productivity and design consistency.
The Salesforce Lightning Design System is optimized for Salesforce applications. Plus UI offers broader integrations, making it suitable for various frameworks beyond Salesforce, providing greater versatility.
Google's Material Design is a cohesive framework for responsive, mobile-first interfaces. Plus UI supports these principles but distinguishes itself with a lightweight package and a powerful combination of Tailwind CSS and Font Awesome for enhanced customization.
The Google Design System pioneered modern design principles. Plus UI builds on these by offering a comprehensive and highly adaptable system that caters to a broader range of needs.
The Uber Design System focuses on accessibility for a global user base. Plus UI shares this focus and expands on it by providing fully customizable components tailored to diverse user needs.
Microsoft's Fluent Design System emphasizes light, depth, and motion. Plus UI incorporates these principles while providing an extensive library of easy-to-use components for a seamless development process.
Finally, the Ant Design System is popular for its robust components in enterprise environments. Plus UI offers similar robustness but stands out with its centralized token system, extensive component library, and multi-framework compatibility, making it ideal for a wide range of applications.
In essence, Plus UI combines the strengths of these renowned design systems while offering unique features like a centralized token system, extensive customization, and framework-agnostic components, setting it apart as a versatile and powerful solution.