AppSidebar

Layer: Primitive
Base: Custom — no Ark UI dependency

Interactive

Full sidebar — click nav items

RisingSwamp

The Den

Usage

import { AppSidebar, Button } from "@risingswamp/design-system";

<AppSidebar>
  <AppSidebar.Brand>RisingSwamp</AppSidebar.Brand>
  <AppSidebar.Nav>
    <AppSidebar.NavItem href="/" active>
      The Den
    </AppSidebar.NavItem>
    <AppSidebar.NavItem href="/vault">Vault</AppSidebar.NavItem>
    <AppSidebar.NavItem href="/settings">Settings</AppSidebar.NavItem>
  </AppSidebar.Nav>
  <AppSidebar.Footer>
    <Button style={{ width: "100%" }}>+ Feed</Button>
  </AppSidebar.Footer>
</AppSidebar>;

Sub-components

Sub-component	Element	Purpose
`AppSidebar.Brand`	`div`	App name — mono, uppercase, muted
`AppSidebar.Nav`	`nav`	Flex column, takes remaining height
`AppSidebar.NavItem`	`a`	Nav link with active bar indicator
`AppSidebar.Footer`	`div`	Pinned to bottom via `mt: auto`

AppSidebar.NavItem props

Prop	Type	Default	Description
`href`	`string`	required	Link destination
`active`	`boolean`	`false`	Shows 3px accent bar + accent text color
`children`	`JSX.Element`	required	Link label

Router integration: AppSidebar.NavItem renders a plain <a> element. When using SolidJS Router, use the router’s <A> component with the sidebar-link CSS class and sidebar-link-active-bar span instead — see src/components/Sidebar.tsx for the pattern.

Design notes

Width is fixed at 200px via flexShrink: 0 — the parent flex container gives remaining space to the content area.
Active bar: 3px wide, 20px tall, border-radius: 0 2px 2px 0 — sharp left edge flush with the sidebar border, rounded right.
No blur on the sidebar — Plane 1 rule. --nav-bg with backdrop-filter is Plane 2 only.
Brand text: font-mono, 0.22em letter-spacing, uppercase, text.muted — intentionally quiet, not competing with nav items.

Plane 1 Constraints

No backdrop-filter / blur
No gradients
Hover is bg.default tone shift only
Active state: accent color + active bar — no glow