Mixins / foldkit-mixins-ui

Sidebar

namespace · packages/mixins-ui/src/sidebar.ts:1

export * as Sidebar from './sidebar.js'

In the guides

Members

interface · packages/mixins-ui/src/sidebar.ts:36

interface SidebarLink {
  readonly label: string
  readonly href: string
  readonly current?: boolean | undefined
}

Sidebar.SidebarSection

interface · packages/mixins-ui/src/sidebar.ts:43

interface SidebarSection {
  readonly id: string
  readonly title: string
  readonly links: ReadonlyArray<SidebarLink>
}

Sidebar.SidebarSlots

const · packages/mixins-ui/src/sidebar.ts:16

const SidebarSlots: Slots.Contract<{ readonly root: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly toggle: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly [Attr.AttrToken<"aria-expanded">, Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>; readonly nav: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly section: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly trigger: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly [Attr.AttrToken<"aria-expanded">], readonly Slot.RequirementName[], boolean>; readonly chevron: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [ …;

An application's sidebar, shadcn's: a navigation landmark of sections, each a heading button that shows and hides its links, as an accordion's sections do (several open at once), and a toggle that collapses the whole navigation off the page, Fluid Functionalism's way (collapsed is gone, not an icon rail). A link marks the page it leads to with aria-current. The collapsed flag and the open sections are the application's; toggled opens or shuts a section. A collapsed navigation stays drawn, inert, so its collapse can animate and the toggle's aria-controls names it.

Sidebar.SidebarView

interface · packages/mixins-ui/src/sidebar.ts:49

interface SidebarView<Message> {
  readonly id: string
  readonly label: string
  readonly sections: ReadonlyArray<SidebarSection>
  readonly open: ReadonlyArray<string>
  readonly onToggleSection: (id: string) => NoInfer<Message>
  readonly collapsed: boolean
  readonly onToggleCollapsed: NoInfer<Message>
  readonly style?: NamedStyle<typeof SidebarSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

Sidebar.toggled

function · packages/mixins-ui/src/sidebar.ts:67

function toggled(open: ReadonlyArray<string>, id: string): ReadonlyArray<string>

The open sections after id is pressed: several stay open, a press flips one.

Sidebar.view

function · packages/mixins-ui/src/sidebar.ts:70

function view<Message>(
  options: SidebarView<Message>,
  h: HtmlBuilder<Message>,
): Html