{# A group: <div class="ui-sidebar-group"><div class="ui-sidebar-group-label">Platform</div><ul class="ui-sidebar-menu"><li><a class="ui-sidebar-button" href="…" [aria-current="page"]>icon Text[<span class="ui-sidebar-badge">24</span>]</a></li></ul></div>. Header and footer: <button class="ui-sidebar-button" data-size="lg" popovertarget="…"> opening a Dropdown Menu. #}
<div style="display:flex;height:460px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden">
<.sidebar>
<:header><button class="ui-sidebar-button" data-size="lg" type="button"><span class="ui-sidebar-logo"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg></span><span class="ui-sidebar-meta"><strong>Acme Inc</strong><span>Enterprise</span></span><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg></button></:header>
<div class="ui-sidebar-group"><div class="ui-sidebar-group-label">Platform</div><ul class="ui-sidebar-menu">
<li><a class="ui-sidebar-button" href="#" aria-current="page"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></svg>Dashboard</a></li>
<li><a class="ui-sidebar-button" href="#"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>Inbox<span class="ui-sidebar-badge">24</span></a></li>
<li><a class="ui-sidebar-button" href="#"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>Projects</a></li>
<li><a class="ui-sidebar-button" href="#"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>Reports</a></li>
</ul></div>
<div class="ui-sidebar-group"><div class="ui-sidebar-group-label">Settings</div><ul class="ui-sidebar-menu">
<li><a class="ui-sidebar-button" href="#"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="7" r="4"/><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Team</a></li>
<li><a class="ui-sidebar-button" href="#"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>Billing</a></li>
</ul></div>
<:footer><button class="ui-sidebar-button" data-size="lg" type="button"><span class="ui-avatar" data-shape="square"><span class="ui-avatar-fallback">AL</span></span><span class="ui-sidebar-meta"><strong>Ada Lovelace</strong><span>ada@example.com</span></span><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg></button></:footer>
</.sidebar>
<div style="flex:1;padding:24px"><div class="ui-skeleton" style="height:120px;border-radius:var(--radius-xl)"></div></div>
</div>