<div class="w-full">
  <.dm_sidebar_layout
    id="sidebar-layout-single-start"
    class="min-h-48"
    sidebar_class="p-4"
    content_class="p-6"
  >
    <:sidebar><nav aria-label="Workspace"><ul class="menu menu-vertical"><li><a href="#inbox" aria-label="Inbox">📥</a></li><li><a href="#projects" aria-label="Projects">📁</a></li></ul></nav></:sidebar>
    <section><h2 class="text-xl font-bold">Workspace</h2><p>Resize the preview to see the persistent sidebar appear.</p><a class="link" href="#navigation">All workspace destinations</a></section>
  </.dm_sidebar_layout>
</div>

<div class="w-full">
  <.dm_sidebar_layout
    id="sidebar-layout-single-end"
    position="end"
    class="min-h-48"
    sidebar_class="p-4"
    content_class="p-6"
  >
    <:sidebar><nav aria-label="Workspace"><ul class="menu menu-vertical"><li><a href="#inbox" aria-label="Inbox">📥</a></li><li><a href="#projects" aria-label="Projects">📁</a></li></ul></nav></:sidebar>
    <section><h2 class="text-xl font-bold">Workspace</h2><p>Resize the preview to see the persistent sidebar appear.</p><a class="link" href="#navigation">All workspace destinations</a></section>
  </.dm_sidebar_layout>
</div>

<div class="w-full">
  <.dm_sidebar_layout
    compact
    id="sidebar-layout-single-compact"
    class="min-h-48"
    sidebar_class="p-4"
    content_class="p-6"
  >
    <:sidebar><nav aria-label="Workspace"><ul class="menu menu-vertical"><li><a href="#inbox" aria-label="Inbox">📥</a></li><li><a href="#projects" aria-label="Projects">📁</a></li></ul></nav></:sidebar>
    <section><h2 class="text-xl font-bold">Workspace</h2><p>Resize the preview to see the persistent sidebar appear.</p><a class="link" href="#navigation">All workspace destinations</a></section>
  </.dm_sidebar_layout>
</div>

<div class="w-full">
  <.dm_sidebar_layout
    hidden
    id="sidebar-layout-single-hidden"
    class="min-h-48"
    sidebar_class="p-4"
    content_class="p-6"
  >
    <:sidebar><nav aria-label="Workspace"><ul class="menu menu-vertical"><li><a href="#inbox" aria-label="Inbox">📥</a></li><li><a href="#projects" aria-label="Projects">📁</a></li></ul></nav></:sidebar>
    <section><h2 class="text-xl font-bold">Workspace</h2><p>Resize the preview to see the persistent sidebar appear.</p><a class="link" href="#navigation">All workspace destinations</a></section>
  </.dm_sidebar_layout>
</div>