Sidebar

<aside class="nano-sidebar" data-controller="nanoui-sidebar">
  <div class="nano-sidebar__header">
    <span>Navigation</span>
    <button class="nano-sidebar__toggle" data-action="nanoui-sidebar#toggle" aria-label="Toggle sidebar">
      <!-- icon -->
    </button>
  </div>
  <nav class="nano-sidebar__nav">
    <div class="nano-sidebar__group">
      <span class="nano-sidebar__group-label">General</span>
      <a class="nano-sidebar__item nano-sidebar__item--active" href="#">Dashboard</a>
      <a class="nano-sidebar__item" href="#">Analytics</a>
      <a class="nano-sidebar__item" href="#">Reports</a>
    </div>
    <div class="nano-sidebar__group">
      <span class="nano-sidebar__group-label">Settings</span>
      <a class="nano-sidebar__item" href="#">Profile</a>
      <a class="nano-sidebar__item" href="#">Preferences</a>
    </div>
  </nav>
  <div class="nano-sidebar__footer">
    <a class="nano-sidebar__item" href="#">Logout</a>
  </div>
</aside>

<!-- Collapsed state: add nano-sidebar--collapsed to collapse the sidebar -->
<!-- Requires Stimulus controller: nanoui-sidebar -->