DocsBlocksSidebar layout

Sidebar layout

An application shell: a sidebar with brand, navigation, a collapsible group and the user, beside a header and your page.

Alpine.jsdepends on sidebardepends on collapsible1 file

<pb-blocks.sidebar-layout :open="sidebar_open" title="Dashboard">
  <div class="grid auto-rows-min gap-4 md:grid-cols-3">
    <div class="aspect-video rounded-xl bg-muted/60"></div>
    <div class="aspect-video rounded-xl bg-muted/60"></div>
    <div class="aspect-video rounded-xl bg-muted/60"></div>
  </div>
  <div class="min-h-48 flex-1 rounded-xl bg-muted/60"></div>
</pb-blocks.sidebar-layout>

Installation

pyblade-ui add sidebar-layout

Install the dependencies
sidebar, collapsible and Alpine.js, loaded in your <head>.

Copy this file into your project

components/blocks/sidebar_layout.html

@props({'open': True, 'title': 'Dashboard', 'collapsible': 'icon', 'variant': 'sidebar'})
<pb-ui.sidebar-provider :open="open" :collapsible="collapsible" :variant="variant">
  <pb-ui.sidebar>
    <pb-ui.sidebar-header>
      <pb-ui.sidebar-menu>
        <pb-ui.sidebar-menu-item>
          <pb-ui.sidebar-menu-button size="lg" href="/">
            <div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
              <svg class="size-4" 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" aria-hidden="true"><path d="m12 3-8 4.5v9L12 21l8-4.5v-9Z"/><path d="m12 12 8-4.5M12 12v9M12 12 4 7.5"/></svg>
            </div>
            <div class="grid flex-1 text-left text-sm leading-tight">
              <span class="truncate font-medium">Acme Inc</span>
              <span class="truncate text-xs text-sidebar-foreground/70">Enterprise</span>
            </div>
          </pb-ui.sidebar-menu-button>
        </pb-ui.sidebar-menu-item>
      </pb-ui.sidebar-menu>
    </pb-ui.sidebar-header>
    <pb-ui.sidebar-content>
      <pb-ui.sidebar-group>
        <pb-ui.sidebar-group-label>Platform</pb-ui.sidebar-group-label>
        <pb-ui.sidebar-menu>
          <pb-ui.sidebar-menu-item>
            <pb-ui.sidebar-menu-button href="#" active tooltip="Dashboard">
              <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" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
              <span>Dashboard</span>
            </pb-ui.sidebar-menu-button>
          </pb-ui.sidebar-menu-item>
          <pb-ui.sidebar-menu-item>
            <pb-ui.collapsible :open="True">
              <pb-ui.collapsible-trigger>
                <pb-ui.sidebar-menu-button tooltip="Projects">
                  <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" 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>
                  <span>Projects</span>
                  <svg class="ml-auto transition-transform duration-200" x-bind:class="{ 'rotate-90': open }" 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" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
                </pb-ui.sidebar-menu-button>
              </pb-ui.collapsible-trigger>
              <pb-ui.collapsible-content>
                <pb-ui.sidebar-menu-sub>
                  <pb-ui.sidebar-menu-sub-item><pb-ui.sidebar-menu-sub-button href="#"><span>Design system</span></pb-ui.sidebar-menu-sub-button></pb-ui.sidebar-menu-sub-item>
                  <pb-ui.sidebar-menu-sub-item><pb-ui.sidebar-menu-sub-button href="#"><span>Marketing site</span></pb-ui.sidebar-menu-sub-button></pb-ui.sidebar-menu-sub-item>
                  <pb-ui.sidebar-menu-sub-item><pb-ui.sidebar-menu-sub-button href="#"><span>Mobile app</span></pb-ui.sidebar-menu-sub-button></pb-ui.sidebar-menu-sub-item>
                </pb-ui.sidebar-menu-sub>
              </pb-ui.collapsible-content>
            </pb-ui.collapsible>
          </pb-ui.sidebar-menu-item>
          <pb-ui.sidebar-menu-item>
            <pb-ui.sidebar-menu-button href="#" tooltip="Inbox">
              <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" aria-hidden="true"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><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>
              <span>Inbox</span>
            </pb-ui.sidebar-menu-button>
            <pb-ui.sidebar-menu-badge>24</pb-ui.sidebar-menu-badge>
          </pb-ui.sidebar-menu-item>
          <pb-ui.sidebar-menu-item>
            <pb-ui.sidebar-menu-button href="#" tooltip="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" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
              <span>Settings</span>
            </pb-ui.sidebar-menu-button>
          </pb-ui.sidebar-menu-item>
        </pb-ui.sidebar-menu>
      </pb-ui.sidebar-group>
    </pb-ui.sidebar-content>
    <pb-ui.sidebar-footer>
      <pb-ui.sidebar-menu>
        <pb-ui.sidebar-menu-item>
          <pb-ui.sidebar-menu-button size="lg" href="#">
            <span class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent text-xs font-medium">AL</span>
            <div class="grid flex-1 text-left text-sm leading-tight">
              <span class="truncate font-medium">Ada Lovelace</span>
              <span class="truncate text-xs text-sidebar-foreground/70">ada@example.com</span>
            </div>
          </pb-ui.sidebar-menu-button>
        </pb-ui.sidebar-menu-item>
      </pb-ui.sidebar-menu>
    </pb-ui.sidebar-footer>
    <pb-ui.sidebar-rail />
  </pb-ui.sidebar>
  <pb-ui.sidebar-inset>
    <header class="flex h-14 shrink-0 items-center gap-2 border-b px-4">
      <pb-ui.sidebar-trigger class="-ml-1" />
      <div class="mx-2 h-4 w-px bg-border"></div>
      <h1 class="text-sm font-medium">{{ title }}</h1>
    </header>
    <div class="flex flex-1 flex-col gap-4 p-4">{{ slot }}</div>
  </pb-ui.sidebar-inset>
</pb-ui.sidebar-provider>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-blocks.sidebar-layout> is available in all your templates.

<pb-blocks.sidebar-layout :open="sidebar_open" title="Dashboard">
  <p>Your page</p>
</pb-blocks.sidebar-layout>

Props

Prop	Default
open	True
title	'Dashboard'
collapsible	'icon'
variant	'sidebar'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Mode toggle Login form ›