<div class="sidebar">
<div class="sidebar-backdrop"></div>
<aside class="sidebar-panel" id="sidebar-1">
<div class="sidebar-content">
<header class="sidebar-header">
<a href="#" class="menu-btn menu-btn-lg">
<div
class="flex items-center justify-center size-6 rounded-sm bg-primary text-primary-foreground text-sm font-bold shrink-0"
>
ui
</div>
Starting Point
</a>
</header>
<nav class="sidebar-menu">
<div class="menu-group">
<span class="menu-label">Platform</span>
<button
class="menu-btn"
data-sp-toggle="collapsible"
data-sp-target="#playground-1"
aria-expanded="true"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 11 2-2-2-2"></path><path d="M11 13h4"></path><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect></svg>
Playground
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-auto transition-transform in-aria-expanded:rotate-90"><path d="m9 18 6-6-6-6"></path></svg>
</button>
<div id="playground-1" class="collapsible-panel open">
<div class="menu-subgroup">
<a href="#" class="menu-btn menu-btn-sm">History</a>
<a href="#" class="menu-btn menu-btn-sm">Starred</a>
<a href="#" class="menu-btn menu-btn-sm">Settings</a>
</div>
</div>
<button
class="menu-btn"
data-sp-toggle="collapsible"
data-sp-target="#models-1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>
Models
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-auto transition-transform in-aria-expanded:rotate-90"><path d="m9 18 6-6-6-6"></path></svg>
</button>
<div id="models-1" class="collapsible-panel">
<div class="menu-subgroup">
<a href="#" class="menu-btn menu-btn-sm">Genesis</a>
<a href="#" class="menu-btn menu-btn-sm">Explorer</a>
<a href="#" class="menu-btn menu-btn-sm">Quantum</a>
</div>
</div>
<button
class="menu-btn"
data-sp-toggle="collapsible"
data-sp-target="#docs-1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg>
Documentation
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-auto transition-transform in-aria-expanded:rotate-90"><path d="m9 18 6-6-6-6"></path></svg>
</button>
<div id="docs-1" class="collapsible-panel">
<div class="menu-subgroup">
<a href="#" class="menu-btn menu-btn-sm">Introduction</a>
<a href="#" class="menu-btn menu-btn-sm">Get Started</a>
<a href="#" class="menu-btn menu-btn-sm">Tutorials</a>
</div>
</div>
<button
class="menu-btn"
data-sp-toggle="collapsible"
data-sp-target="#settings-1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
Settings
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-auto transition-transform in-aria-expanded:rotate-90"><path d="m9 18 6-6-6-6"></path></svg>
</button>
<div id="settings-1" class="collapsible-panel">
<div class="menu-subgroup">
<a href="#" class="menu-btn menu-btn-sm">General</a>
<a href="#" class="menu-btn menu-btn-sm">Team</a>
<a href="#" class="menu-btn menu-btn-sm">Billing</a>
</div>
</div>
</div>
<div class="menu-group">
<span class="menu-label">Projects</span>
<a href="#" class="menu-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect></svg>
Design Engineering
</a>
<a href="#" class="menu-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z"></path><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path></svg>
Sales & Marketing
</a>
<a href="#" class="menu-btn">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"></path><path d="M15 5.764v15"></path><path d="M9 3.236v15"></path></svg>
Travel
</a>
</div>
<div class="menu-group mt-auto">
<a href="#" class="menu-btn menu-btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="m4.93 4.93 4.24 4.24"></path><path d="m14.83 9.17 4.24-4.24"></path><path d="m14.83 14.83 4.24 4.24"></path><path d="m9.17 14.83-4.24 4.24"></path><circle cx="12" cy="12" r="4"></circle></svg>
Support
</a>
<a href="#" class="menu-btn menu-btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg>
Feedback
</a>
</div>
</nav>
<footer class="sidebar-footer">
<button
class="menu-btn menu-btn-lg"
data-sp-toggle="dropdown"
data-sp-target="#user-menu-1"
data-sp-placement="right-end"
aria-expanded="false"
>
<img
src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
alt="Sarah Johnson"
class="size-8 rounded-lg"
/>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">Sarah Johnson</span>
<span class="truncate text-xs text-muted-foreground">
[email protected]
</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-auto"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
</footer>
<div id="user-menu-1" class="dropdown min-w-56">
<div class="dropdown-label flex items-center gap-2 px-1 py-1.5">
<img
src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
alt="Sarah Johnson"
class="size-8 rounded-lg"
/>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">Sarah Johnson</span>
<span class="truncate text-xs text-muted-foreground">
[email protected]
</span>
</div>
</div>
<div class="dropdown-separator"></div>
<a href="#" class="dropdown-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
Account
</a>
<a href="#" class="dropdown-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line></svg>
Billing
</a>
<a href="#" class="dropdown-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
Notifications
</a>
<div class="dropdown-separator"></div>
<a href="#" class="dropdown-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 17 5-5-5-5"></path><path d="M21 12H9"></path><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path></svg>
Log out
</a>
</div>
</div>
</aside>
<main class="sidebar-page flex flex-col">
<header class="flex items-center gap-2 border-b px-4 h-14">
<button
class="btn btn-ghost btn-icon-sm -ml-2"
data-sp-toggle="sidebar"
data-sp-target="#sidebar-1"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg>
</button>
<div
class="separator separator-vertical self-center h-4 -ml-1 mr-2"
></div>
<nav class="breadcrumb text-sm">
<a href="#" class="breadcrumb-link">Build Your Application</a>
<span class="breadcrumb-separator" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
</span>
<span class="breadcrumb-page">Data Fetching</span>
</nav>
</header>
<div class="flex flex-1 flex-col gap-4 p-4">
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
<div class="bg-muted/50 aspect-video rounded-xl"></div>
<div class="bg-muted/50 aspect-video rounded-xl"></div>
<div class="bg-muted/50 aspect-video rounded-xl"></div>
</div>
<div class="bg-muted/50 min-h-40 flex-1 rounded-xl"></div>
</div>
</main>
</div>
