Sidebar

Installation

It should be placed at the root and wrap your whole application.

import * as UI from "@iyk/ui"
import { Outlet } from "react-router"

export default function ExampleSidebar() {
  return (
    <UI.Sidebar.Root>
      <UI.Sidebar.Sidebar>
        {/* Sidebar content... */}
      </UI.Sidebar.Sidebar>

      {/* App content: */}
      <Outlet />
    </UI.Sidebar.Root>
  )
}

Desktop preview

import * as Icon from "@iyk/icons"
import * as UI from "@iyk/ui"

export default function TestSidebar() {
  return (
    <UI.Sidebar.Root>
      <UI.Sidebar.Sidebar>
        <UI.Sidebar.Header>
          <div className="p-0.5 hover:bg-gray-4 rounded-md flex items-center gap-2">
            <UI.Avatar variant="rounded" className="size-6" src="https://picsum.photos/200/300" />
            <p>Drewbs</p>
          </div>
        </UI.Sidebar.Header>

        <UI.Sidebar.Content>
          <UI.Sidebar.Menu>
            <a href="#/" aria-current="true">
              <Icon.Home />
              Home
            </a>
            <a href="#/chips">
              <Icon.Chips />
              Chips
            </a>
            <a href="#/items">
              <Icon.Items />
              Items
            </a>
            <UI.Sidebar.SubMenu>
              <a href="#/contracts">Contracts</a>
              <a href="#/transfer">Transfer</a>
              <a href="#/more">More</a>
            </UI.Sidebar.SubMenu>
            <a href="#/">
              <Icon.Shop />
              IYK Shop
            </a>
          </UI.Sidebar.Menu>
          <UI.Sidebar.Menu label="Modules">
            <a href="#/beams">
              <Icon.Beams />
              Beams
            </a>
            <a href="#/links">
              <Icon.SquaredLink />
              Links
            </a>
          </UI.Sidebar.Menu>
        </UI.Sidebar.Content>

        <UI.Sidebar.Footer>This is the footer</UI.Sidebar.Footer>
      </UI.Sidebar.Sidebar>

      <div className="flex flex-col items-start gap-3 justify-start min-h-full p-4">
        <h1>This is the App content</h1>
        <div>
          <UI.Sidebar.Toggle className={UI.classForButton({ size: "sm", kind: "shaded" })}>
            External Toggle Button
          </UI.Sidebar.Toggle>
        </div>
      </div>
    </UI.Sidebar.Root>
  )
}

Mobile preview

import * as Icon from "@iyk/icons"
import * as UI from "@iyk/ui"

export default function TestSidebar() {
  return (
    <UI.Sidebar.Root>
      <UI.Sidebar.Sidebar>
        <UI.Sidebar.Header>
          <div className="p-0.5 hover:bg-gray-4 rounded-md flex items-center gap-2">
            <UI.Avatar variant="rounded" className="size-6" src="https://picsum.photos/200/300" />
            <p>Drewbs</p>
          </div>
        </UI.Sidebar.Header>

        <UI.Sidebar.Content>
          <UI.Sidebar.Menu>
            <a href="#/" aria-current="true">
              <Icon.Home />
              Home
            </a>
            <a href="#/chips">
              <Icon.Chips />
              Chips
            </a>
            <a href="#/items">
              <Icon.Items />
              Items
            </a>
            <UI.Sidebar.SubMenu>
              <a href="#/contracts">Contracts</a>
              <a href="#/transfer">Transfer</a>
              <a href="#/more">More</a>
            </UI.Sidebar.SubMenu>
            <a href="#/">
              <Icon.Shop />
              IYK Shop
            </a>
          </UI.Sidebar.Menu>
          <UI.Sidebar.Menu label="Modules">
            <a href="#/beams">
              <Icon.Beams />
              Beams
            </a>
            <a href="#/links">
              <Icon.SquaredLink />
              Links
            </a>
          </UI.Sidebar.Menu>
        </UI.Sidebar.Content>

        <UI.Sidebar.Footer>This is the footer</UI.Sidebar.Footer>
      </UI.Sidebar.Sidebar>

      <div className="flex flex-col items-start gap-3 justify-start min-h-full p-4">
        <h1>This is the App content</h1>
        <div>
          <UI.Sidebar.Toggle className={UI.classForButton({ size: "sm", kind: "shaded" })}>
            External Toggle Button
          </UI.Sidebar.Toggle>
        </div>
      </div>
    </UI.Sidebar.Root>
  )
}