<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <!-- Introductory tw-callout -->
  <div class="tw-callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>SIDEBAR & TOPBAR:</strong> Application shell navigation patterns<br>
      <strong>PATTERNS:</strong> Sidebar | Topbar | Drawer | Submenu
    </p>
    <p class="tw:mb-0 tw:text-sm">
      These patterns form the core application shell used across all pages. The tw-sidebar provides
      icon-based primary navigation with expandable drawer panels, while the tw-topbar provides
      search, context switching, and user controls.
    </p>
  </div>
  <!-- Live Demo Section -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Live Demo</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Interactive:</strong> Click tw-sidebar icons to open drawer panels.
        Click drawer items with chevrons to expand submenus. Click outside or press Escape to close.
      </p>
    </div>
    <!-- Application Shell Demo -->
    <div data-controller="sidebar">
      <aside class="tw-sidebar">
        <!-- Logo (TODO: replace with A-One brand mark) -->
        <div class="tw-sidebar-logo">
          <a href="#" class="tw-sidebar-logo-link" aria-label="A-One">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <rect x="2" y="2" width="36" height="36" rx="8" fill="#ffffff" fill-opacity="0.08"/>
              <text x="20" y="26" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="16" font-weight="600" fill="white">A1</text>
            </svg>
          </a>
        </div>
        <!-- Navigation -->
        <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
          <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="dashboard"
            data-label="Dashboard"
            aria-expanded="false">
            <i class="fa-light fa-grid-2 tw-sidebar-icon"></i>
            <span class="tw:sr-only">Dashboard</span>
          </button>
        </nav>
        <!-- Bottom Section -->
        <div class="tw-sidebar-bottom">
          <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="settings"
            data-label="Settings"
            aria-expanded="false">
            <i class="fa-light fa-cogs tw-sidebar-icon"></i>
            <span class="tw:sr-only">Settings</span>
          </button>
        </div>
      </aside>
      <!-- Dashboard Drawer -->
      <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="dashboard"
     aria-label="Dashboard navigation">
        <div class="tw-sidebar-drawer-header">DASHBOARD</div>
        <nav class="tw-drawer-nav">
          <a href="#" class="tw-drawer-item">
            <span class="tw-drawer-item-label">Overview</span>
          </a>
        </nav>
      </div>
      <!-- Settings Drawer -->
      <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="settings"
     aria-label="Settings navigation">
        <div class="tw-sidebar-drawer-header">SETTINGS</div>
        <nav class="tw-drawer-nav">
          <a href="#" class="tw-drawer-item">
            <span class="tw-drawer-item-label">General</span>
          </a>
          <a href="#" class="tw-drawer-item">
            <span class="tw-drawer-item-label">Account</span>
          </a>
        </nav>
      </div>
      <header class="tw-topbar" role="banner">
        <div class="tw-topbar-left">
          <!-- Context Dropdown -->
          <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
            <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
              <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">A-One Workspace</span>
              <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="m2 5 6 6 6-6"/>
              </svg>
            </button>
            <div class="tw-dropdown-menu tw-dropdown-menu-wide tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1">
              <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="workspace-1">
                <span class="tw-dropdown-item-text">A-One Workspace</span>
                <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
              </button>
              <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="workspace-2">
                <span class="tw-dropdown-item-text">Secondary Workspace</span>
                <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                </svg>
              </button>
            </div>
          </div>
          <!-- Search -->
          <div class="tw-topbar-search">
            <div class="tw-input-group tw-has-icon-start">
              <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
              <input type="search" class="tw-form-control" placeholder="Search...">
            </div>
          </div>
        </div>
        <div class="tw-topbar-right">
          <!-- Action Buttons -->
          <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Community" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-users tw-icon-16"></i>
            Community
          </button>
          <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-comment-question tw-icon-16"></i>
            Support
          </button>
          <div class="tw-topbar-action-icons">
            <!-- Notification Icon -->
            <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notifications" data-tooltip-placement-value="bottom">
              <i class="fa-solid fa-bell tw-icon-16"></i>
            </button>
          </div>
          <div class="tw-topbar-divider"></div>
          <!-- User Avatar Dropdown -->
          <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
            <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
              <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
                <span>JD</span>
              </div>
            </button>
            <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
              <div class="tw-dropdown-header">Jane Doe</div>
              <div class="tw-dropdown-divider"></div>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Password & security</span>
              </button>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Email preferences</span>
              </button>
              <div class="tw-dropdown-divider"></div>
              <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
                <span class="tw-dropdown-item-text">Logout</span>
              </button>
            </div>
          </div>
        </div>
      </header>
      <!-- Content Area Placeholder -->
      <div class="tw:bg-background tw:relative tw:mt-2 tw:p-0 tw:pt-[0.0001px] tw:overflow-hidden">
        <div class="tw-sidebar-topbar-content-offset">
          <div class="tw:absolute tw:top-0 tw:left-0 tw:w-full tw:h-16 tw:border-dotted tw:border tw:border-red-500"></div>
          <div class="tw:absolute tw:top-0 tw:left-0 tw:w-16 tw:h-full tw:border-dotted tw:border tw:border-red-500"></div>
          <div class="tw:bg-white tw:p-6 tw:w-full">
            <h1 class="tw-h3 tw:mb-2">Page Content Area</h1>
            <p class="text-muted">This area demonstrates the content offset when both tw-sidebar and tw-topbar are present.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- Code reference -->
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><div data-controller="sidebar"></code><br>
      <code>  <aside class="tw-sidebar">...</aside></code><br>
      <code>  <header class="tw-topbar">...</header></code><br>
      <code>  <div class="tw-sidebar-topbar-content-offset">...</div></code><br>
      <code></div></code><br>
    </div>
  </div>
  <!-- Sidebar Items Section -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Sidebar Item States</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>States:</strong> Default, Hover, Active. Items tw-show tooltips on hover via
        <code>data-label</code> attribute.
      </p>
    </div>
    <div class="tw:flex tw:gap-2 tw:p-4 tw:rounded-lg" class="tw:bg-primary-500">
      <div class="tw-sidebar-item" data-label="Default Item" class="tw:w-12 tw:h-12">
        <i class="fa-regular fa-star tw-sidebar-icon"></i>
      </div>
      <div class="tw-sidebar-item tw-active" data-label="Active Item" class="tw:w-12 tw:h-12">
        <i class="fa-regular fa-star tw-sidebar-icon"></i>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><button class="tw-sidebar-item" data-label="Tooltip Text">...</button></code><br>
      <code><button class="tw-sidebar-item tw-active" data-label="Tooltip Text">...</button></code>
    </div>
  </div>
  <!-- Drawer Item States Section -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Drawer Item States</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>States:</strong> Default, Active, Expanded, Disabled. Items with chevrons are expandable.
      </p>
    </div>
    <div class="tw:bg-white tw:border tw:rounded-lg" class="tw:w-[240px]">
      <nav class="tw-drawer-nav">
        <a href="#" class="tw-drawer-item">
          <span class="tw-drawer-item-text">Default Item</span>
        </a>
        <a href="#" class="tw-drawer-item tw-active">
          <span class="tw-drawer-item-text">Active Item</span>
        </a>
        <button type="button" class="tw-drawer-item tw-expanded">
          <span class="tw-drawer-item-text">Expanded Item</span>
          <svg class="tw-drawer-chevron" viewBox="0 0 24 24">
            <polyline points="9 18 15 12 9 6"/>
          </svg>
        </button>
        <div class="tw-drawer-submenu tw-show">
          <a href="#" class="tw-drawer-subitem">Submenu Item</a>
          <a href="#" class="tw-drawer-subitem tw-active">Active Subitem</a>
        </div>
        <a href="#" class="tw-drawer-item tw-disabled">
          <span class="tw-drawer-item-text">Disabled Item</span>
        </a>
        <button type="button" class="tw-drawer-item tw-disabled">
          <span class="tw-drawer-item-text">Disabled Expandable</span>
          <svg class="tw-drawer-chevron" viewBox="0 0 24 24">
            <polyline points="9 18 15 12 9 6"/>
          </svg>
        </button>
      </nav>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><a class="tw-drawer-item">...</a></code><br>
      <code><a class="tw-drawer-item tw-active">...</a></code><br>
      <code><button class="tw-drawer-item tw-expanded">...</button></code><br>
      <code><a class="tw-drawer-item tw-disabled">...</a></code>
    </div>
  </div>
  <!-- Topbar Elements Section -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Topbar Elements</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Elements:</strong> Context dropdown, Search input, Power button, Icon buttons, Avatar.
      </p>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><button class="tw-topbar-dropdown">...</button></code><br>
      <code><div class="tw-topbar-search"><input class="tw-topbar-search-input"></div></code><br>
      <code><button class="tw-topbar-icon">...</button></code><br>
      <code><button class="tw-topbar-icon tw-topbar-icon-badge">...</button></code><br>
      <code><button class="tw-topbar-avatar"><img></button></code>
    </div>
  </div>
  <!-- Content Offset Helpers Section -->
  <div class="tw:border-t tw:pt-6">
    <h2 class="tw-h4 tw:mb-4">Content Offset Helpers</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Usage:</strong> Apply these classes to main content containers to offset for fixed navigation.
      </p>
    </div>
    <div class="tw:space-y-3">
      <div class="tw:p-3 tw:bg-neutral-100 tw:rounded">
        <code>.sidebar-content-offset</code> — <span class="text-muted">margin-left: 56px (sidebar only)</span>
      </div>
      <div class="tw:p-3 tw:bg-neutral-100 tw:rounded">
        <code>.sidebar-topbar-content-offset</code> — <span class="text-muted">margin-left: 56px; margin-top: 56px (both)</span>
      </div>
    </div>
  </div>
  <!-- Accessibility Section -->
  <div class="tw:border-t tw:pt-6 tw:mb-10">
    <h2 class="tw-h4 tw:mb-4">Accessibility Features</h2>
    <div class="tw-callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Built-in:</strong> ARIA attributes, keyboard navigation, focus management.
      </p>
    </div>
    <ul class="tw:space-y-2 tw:text-sm">
      <li><strong>role="navigation"</strong> — Applied to nav containers</li>
      <li><strong>aria-label</strong> — Descriptive labels for navigation regions</li>
      <li><strong>aria-expanded</strong> — Indicates drawer/submenu open state</li>
      <li><strong>aria-haspopup</strong> — Indicates tw-dropdown behavior</li>
      <li><strong>sr-only</strong> — Screen reader text for icon-only buttons</li>
      <li><strong>Escape key</strong> — Closes open drawers</li>
      <li><strong>Click outside</strong> — Closes open drawers</li>
    </ul>
  </div>
</div>