diff --git a/apps/docs/components/web-demos/index.generated.tsx b/apps/docs/components/web-demos/index.generated.tsx index b07906e0..0d2a6ae2 100644 --- a/apps/docs/components/web-demos/index.generated.tsx +++ b/apps/docs/components/web-demos/index.generated.tsx @@ -278,6 +278,7 @@ export const WEB_DEMOS: Record = { 'nav-rail/nested': dynamic(() => import('./nav-rail/nested')), 'nav-rail/nested-folded': dynamic(() => import('./nav-rail/nested-folded')), 'nav-rail/overview': dynamic(() => import('./nav-rail/overview')), + 'nav-rail/shell': dynamic(() => import('./nav-rail/shell')), 'nav-rail/thumb': dynamic(() => import('./nav-rail/thumb')), 'nav-rail/variants': dynamic(() => import('./nav-rail/variants')), 'not-found/dissolve': dynamic(() => import('./not-found/dissolve')), diff --git a/apps/docs/components/web-demos/nav-rail/shell.tsx b/apps/docs/components/web-demos/nav-rail/shell.tsx new file mode 100644 index 00000000..ea848884 --- /dev/null +++ b/apps/docs/components/web-demos/nav-rail/shell.tsx @@ -0,0 +1,116 @@ +'use client'; + +import { useState } from 'react'; +import { + BellIcon, + CreditCardIcon, + FolderKanbanIcon, + InboxIcon, + LayoutDashboardIcon, + LayersIcon, + LifeBuoyIcon, + SettingsIcon, + UsersIcon, +} from 'lucide-react'; +import { NavRail } from 'panelui-web/nav-rail'; + +const ITEMS = [ + { id: 'overview', label: 'Overview', icon: LayoutDashboardIcon, note: 'This week across the studio.' }, + { id: 'inbox', label: 'Inbox', icon: InboxIcon, count: 12, note: 'Twelve conversations are waiting on you.' }, + { id: 'projects', label: 'Projects', icon: FolderKanbanIcon, count: 4, note: 'Four projects are in review this morning.' }, + { id: 'people', label: 'People', icon: UsersIcon, note: 'Eight collaborators, two invitations out.' }, + { id: 'billing', label: 'Billing', icon: CreditCardIcon, note: 'The studio plan renews on 1 December.' }, +]; + +export default function NavRailShell() { + const [active, setActive] = useState('overview'); + const current = ITEMS.find((item) => item.id === active) ?? ITEMS[0]!; + + return ( + +
+ + + }>Meridian + + + + + + {ITEMS.map((item) => { + const Icon = item.icon; + return ( + } + onClick={(event) => { + event.preventDefault(); + setActive(item.id); + }} + > + {item.label} + {item.count ? {item.count} : null} + + ); + })} + + + + } onClick={(event) => event.preventDefault()}> + Settings + + + + + + + } label="Help and support"> + Help and support + + + + + + + +
+ +

Meridian

+
+ +
+
+
+

+ Thursday, 6 November +

+

{current.label}

+
+ +
+ +

{current.note}

+ +
+
+

Open reviews

+

07

+
+
+

Time saved

+

+ 6.4h +

+
+
+
+ +
+ + ); +} diff --git a/apps/docs/content/docs/web/components/nav-rail.mdx b/apps/docs/content/docs/web/components/nav-rail.mdx index ef0c8cbd..2e249202 100644 --- a/apps/docs/content/docs/web/components/nav-rail.mdx +++ b/apps/docs/content/docs/web/components/nav-rail.mdx @@ -2,8 +2,289 @@ title: Nav Rail description: A collapsible sidebar of destinations that keeps one active pill sliding between rows, and folds to a column of icons with tooltips. status: new +full: true --- + + +```tsx lineNumbers +'use client'; + +import { useState } from 'react'; +import { + BellIcon, + CreditCardIcon, + FolderKanbanIcon, + InboxIcon, + LayoutDashboardIcon, + LayersIcon, + LifeBuoyIcon, + SettingsIcon, + UsersIcon, +} from 'lucide-react'; +import { NavRail } from '@/components/panelui/nav-rail'; + +const ITEMS = [ + { id: 'overview', label: 'Overview', icon: LayoutDashboardIcon, note: 'This week across the studio.' }, + { id: 'inbox', label: 'Inbox', icon: InboxIcon, count: 12, note: 'Twelve conversations are waiting on you.' }, + { id: 'projects', label: 'Projects', icon: FolderKanbanIcon, count: 4, note: 'Four projects are in review this morning.' }, + { id: 'people', label: 'People', icon: UsersIcon, note: 'Eight collaborators, two invitations out.' }, + { id: 'billing', label: 'Billing', icon: CreditCardIcon, note: 'The studio plan renews on 1 December.' }, +]; + +export default function NavRailShell() { + const [active, setActive] = useState('overview'); + const current = ITEMS.find((item) => item.id === active) ?? ITEMS[0]!; + + return ( + +
+ + + }>Meridian + + + + + + {ITEMS.map((item) => { + const Icon = item.icon; + return ( + } + onClick={(event) => { + event.preventDefault(); + setActive(item.id); + }} + > + {item.label} + {item.count ? {item.count} : null} + + ); + })} + + + + } onClick={(event) => event.preventDefault()}> + Settings + + + + + + + } label="Help and support"> + Help and support + + + + + + + +
+ +

Meridian

+
+ +
+
+
+

+ Thursday, 6 November +

+

{current.label}

+
+ +
+ +

{current.note}

+ +
+
+

Open reviews

+

07

+
+
+

Time saved

+

+ 6.4h +

+
+
+
+ +
+ + ); +} +``` + + + +Use it for the destinations of a product that should stay visible while the work beside them changes: the sections of a studio, the parts of an editor, the pages of an account. It is a `