Duet Sidebar — Glassmorphism Icon Dock & Expandable Menu for React

A glass icon dock that unfurls a full menu panel beside it, for React. Two slabs of tinted glass work as a pair: the dock is always there, and pressing the brand mark opens the panel from the corner nearest it.

• One selection, two slabs. Choosing on either moves the dock's glowing indicator (it stretches as it travels), the dock's tile and the panel's tile with its chevron, together.
• The slabs talk. Hover a dock icon and its row lights in the panel; hover a row and its icon lights in the dock. With the panel closed, the dock has tooltips with shortcuts.
• The unfurl. The panel opens from the corner nearest the mark while light crosses the gap; the wordmark rises, "MENU" settles, the dividers draw and the rows arrive one after another. The mark's play notch turns into a chevron.
• Subscriptions expand in place with LIVE and "new" channels; their dot shows on both slabs and clears once seen.
• Settings and Help push inside the panel, with a breadcrumb back. Themed settings parts are included.
• Account popover with plan, renewal and account switching; sign-out asks first.
• Pinned or overlay, light, dark and auto themes, five glass tints or any hex, full RTL, and a phone layout (a bottom dock with a raised mark and a sheet).

Built with Next.js 16, React 19, motion and @floating-ui/react-dom. The component itself is plain CSS.

Run it

pnpm install
pnpm dev          # http://localhost:5901

Page	What it shows
/	In an app (the default). Duet in a small dark video app, Playtide, panel folded into the dock: navigating really changes the page.
/showcase	Showcase. The dock alone on silk drawn by a WebGL shader, with a dock of options: theme, tint, pinned, search, window dots, RTL and "New uploads".
/phone	Phone. The same component in a 390 px phone frame: the bottom dock, the raised mark and the sheet.

In the sidebar's Settings you can switch the theme, the glass tint and the language (فارسی turns everything right to left).

Use it in your project

Copy components/duet-sidebar/ (or install it from UpFork), then:

pnpm add motion @floating-ui/react-dom

Props, keyboard, theming and accessibility: components/duet-sidebar/README.md.

Where things live

Path	What
components/duet-sidebar/	The component (CSS, hooks, popovers, views, phone layout, tests).
components/demo/	Demo-only code: Playtide's data (data.ts), the bloom shader, the option dock, the app and phone pages, the demo fonts.
public/duet/	Demo photos, cut by pnpm photos (scripts/photos.mjs). Credits are in CREDITS.md.
registry/	What UpFork lists, written by pnpm registry.

Playtide, its channels, people and videos are fictional. Any likeness to a real service is a coincidence.

Checks

pnpm lint && pnpm typecheck && pnpm test && pnpm build