<div class="sidebar sidebar-inset">
<div class="sidebar-backdrop"></div>
<aside class="sidebar-panel" id="sidebar-2">
<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">Getting Started</span>
<a href="#" class="menu-btn active">Installation</a>
<a href="#" class="menu-btn">Project Structure</a>
</div>
<div class="menu-group">
<span class="menu-label">Build Your Application</span>
<a href="#" class="menu-btn">Routing</a>
<a href="#" class="menu-btn">Data Fetching</a>
<a href="#" class="menu-btn">Rendering</a>
<a href="#" class="menu-btn">Caching</a>
<a href="#" class="menu-btn">Styling</a>
<a href="#" class="menu-btn">Optimizing</a>
<a href="#" class="menu-btn">Configuring</a>
<a href="#" class="menu-btn">Testing</a>
</div>
</nav>
<footer class="sidebar-footer">
<button
class="menu-btn menu-btn-lg"
data-sp-toggle="dropdown"
data-sp-target="#user-menu-2"
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-2" 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-2"
>
<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>
