Sidebar shell

Fixed left sidebar with vertical navigation, plus a mobile slide-over and sticky topbar.

Preview

Goodbones

Dashboard

Main content area

React preview

LiveView (HEEx)

alias DesignSystem.UI.SidebarShell

<SidebarShell.sidebar_shell
  id="app-shell"
  variant="light"
  brand_label="Goodbones"
  mobile_title="Dashboard"
  nav_links={[
    %{label: "Dashboard", href: "/", icon: "hero-home", active: true},
    %{label: "Team", href: "/team", icon: "hero-users", active: false}
  ]}
  teams={[%{name: "Heroicons", href: "#", initial: "H", active: false}]}
  user_name={@current_user.name}
  user_avatar={@current_user.avatar_url}
>
  Page content
</SidebarShell.sidebar_shell>

React (JSX)

import { SidebarShell } from "../ui/index.mjs"
import { HomeIcon, UsersIcon } from "@heroicons/react/24/outline"

<SidebarShell
  variant="light"
  brandLabel="Goodbones"
  mobileTitle="Dashboard"
  navLinks={[
    { label: "Dashboard", href: "/", icon: HomeIcon, active: true },
    { label: "Team", href: "/team", icon: UsersIcon },
  ]}
  teams={[{ name: "Heroicons", href: "#", initial: "H" }]}
  userName={user.name}
  userAvatar={user.avatarUrl}
>
  {/* page content */}
</SidebarShell>