Sidebar 002

Slide-in overlay sidebar with spring animation, animated dash items, and a cursor-following video preview on hover.

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

sidebar-002.tsx

Usage

import {
  Sidebar002,
  Sidebar002Provider,
  Sidebar002Section,
  Sidebar002Item,
  useSidebar002,
} from "@/components/unlumen-ui/sidebar-002";

function Trigger() {
  const { toggle } = useSidebar002();
  return (
    <button data-sidebar002-toggle onClick={toggle}>
      Menu
    </button>
  );
}

function Layout({ children }: { children: React.ReactNode }) {
  const { open, close } = useSidebar002();
  const pathname = usePathname();

  return (
    <>
      <Sidebar002 open={open} onClose={close}>
        <Sidebar002Section label="Components" count={4}>
          <Sidebar002Item
            href="/components/button"
            label="Button"
            isActive={pathname === "/components/button"}
            preview="/previews/button.mp4"
          />
          <Sidebar002Item
            href="/components/card"
            label="Card"
            isActive={pathname === "/components/card"}
          />
        </Sidebar002Section>
      </Sidebar002>

      <Trigger />
      {children}
    </>
  );
}

export default function App() {
  return (
    <Sidebar002Provider>
      <Layout>...</Layout>
    </Sidebar002Provider>
  );
}

Edge trigger

By default the sidebar opens when the cursor lingers at the left edge (x ≤ 16 px) for 500 ms. Configure or disable it on the provider:

<Sidebar002Provider edgeTrigger={false}>…</Sidebar002Provider>

<Sidebar002Provider edgeTrigger edgeDelay={300}>…</Sidebar002Provider>

Keyboard shortcut

The default shortcut is s. Change it or disable it:

<Sidebar002Provider keyboardShortcut="b">…</Sidebar002Provider>

<Sidebar002Provider keyboardShortcut={false}>…</Sidebar002Provider>

Preventing outside-click from closing

Wrap the element that opens the sidebar with data-sidebar002-toggle so click events on it don't trigger the close-on-outside-click handler:

<button data-sidebar002-toggle onClick={toggle}>
  Open
</button>

Video preview

Pass a preview URL to any Sidebar002Item to show a cursor-following video card on hover:

<Sidebar002Item
  href="/components/dock"
  label="Dock"
  isActive={false}
  preview="/previews/dock.mp4"
/>

API Reference

Sidebar002Provider

children

React.ReactNode

—

App tree — wraps the layout that contains the sidebar and its trigger.

keyboardShortcut?

string | false

"s"

Key that toggles the sidebar. Pass false to disable.

edgeTrigger?

boolean

true

Open the sidebar when the cursor hovers the left edge.

edgeDelay?

number

500

Milliseconds the cursor must sit at the left edge before opening.

Sidebar002

open

boolean

—

Whether the sidebar panel is visible.

onClose

() => void

—

Called when the sidebar should close (Escape, scroll, or outside click).

children

React.ReactNode

—

Sidebar002Section elements.

className?

string

—

Additional classes on the sidebar panel.

Sidebar002Section

label

React.ReactNode

—

Section heading.

count?

number

—

Optional item count shown dimly after the label.

children

React.ReactNode

—

Sidebar002Item elements.

className?

string

—

Additional classes.

Sidebar002Item

href

string

—

Navigation target.

label

React.ReactNode

—

Text or node shown as the link label.

isActive

boolean

—

Marks this item as the current page.

preview?

string

—

URL to a video shown as a cursor-following card on hover.

className?

string

—

Additional classes on the anchor element.

onClick?

React.MouseEventHandler<HTMLAnchorElement>

—

Click handler for the anchor.

useSidebar002

Hook to read and control sidebar state from anywhere inside a <Sidebar002Provider>.

const { open, toggle, close } = useSidebar002();

Notes

The sidebar panel mounts at position: fixed over the full viewport height. Wrap your app in <Sidebar002Provider> at the layout level so the panel persists across route changes.
The active bar uses layoutId="sb002-active-bar" — it animates between items as the active route changes.
Video previews use autoPlay, loop, and muted so they play immediately without user interaction.
The close-on-outside-click handler ignores elements with data-sidebar002-toggle — use this attribute on your open button.

Credits

Built by leo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.