Mobile Nav

import * as React from 'react'
import { Button, MobileNav, MobileNavTrigger, type NavGroup, type NavItem } from 'ferry-ui'
import { CreditCard, FolderKanban, LayoutDashboard, LogOut, Settings, Users } from 'lucide-react'

const MAIN: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard /> },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

const WORKSPACE: NavItem[] = [
  { id: 'billing', label: 'Billing', icon: <CreditCard /> },
  { id: 'settings', label: 'Settings', icon: <Settings /> },
]

export default function MobileNavHero() {
  // A real app reads the current page from its router. This demo keeps it in state.
  const [page, setPage] = React.useState('overview')
  const withState = (item: NavItem): NavItem => ({
    ...item,
    active: item.id === page,
    onSelect: () => setPage(item.id),
  })
  const groups: NavGroup[] = [
    { id: 'main', items: MAIN.map(withState) },
    { id: 'workspace', label: 'Workspace', items: WORKSPACE.map(withState) },
  ]
  const current = [...MAIN, ...WORKSPACE].find((item) => item.id === page)

  return (
    <div className="min-h-dvh bg-background">
      <header className="flex h-12 items-center gap-2 border-b px-2">
        <MobileNav
          // The trigger hides from 768px. `md:inline-flex` keeps it in view for this demo.
          trigger={<MobileNavTrigger className="md:inline-flex" />}
          groups={groups}
          title="Acme"
          description="Billing portal"
          footer={
            <Button className="w-full" icon={<LogOut />}>
              Sign out
            </Button>
          }
        />
        <span className="text-sm font-medium text-foreground">{current?.label}</span>
      </header>
      <p className="p-6 text-[13px] text-foreground-light">Open the navigation with the menu button.</p>
    </div>
  )
}

import * as React from 'react'
import { Button, MobileNav, type NavItem } from 'ferry-ui'
import { FolderKanban, LayoutDashboard, Users } from 'lucide-react'

const ITEMS: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard />, active: true },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

export default function MobileNavControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <div className="flex min-h-dvh flex-col items-start gap-3 bg-background p-6">
      <Button onClick={() => setOpen(true)}>Open the navigation</Button>
      <p className="text-[13px] text-foreground-light">The drawer is {open ? 'open' : 'closed'}.</p>
      <MobileNav open={open} onOpenChange={setOpen} items={ITEMS} title="Acme" />
    </div>
  )
}

import { MobileNav, MobileNavSection, MobileNavTrigger, type NavItem } from 'ferry-ui'
import { FolderKanban, LayoutDashboard, Users } from 'lucide-react'

const ITEMS: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard />, active: true },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

export default function MobileNavSections() {
  return (
    <div className="min-h-dvh bg-background">
      <header className="flex h-12 items-center gap-2 border-b px-2">
        <MobileNav
          trigger={<MobileNavTrigger className="md:inline-flex" />}
          items={ITEMS}
          title="Acme"
          showThemeToggle
        >
          <MobileNavSection label="Workspace">
            <span className="px-1 text-sm text-foreground">Acme Europe</span>
            <span className="px-1 text-[13px] text-foreground-light">Pro plan, 12 members</span>
          </MobileNavSection>
        </MobileNav>
        <span className="text-sm font-medium text-foreground">Overview</span>
      </header>
    </div>
  )
}

import * as React from 'react'
import { MobileNav, MobileNavTrigger, type NavItem } from 'ferry-ui'
import { FolderKanban, LayoutDashboard, Users } from 'lucide-react'

const PAGES: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard /> },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

export default function MobileNavKeepOpen() {
  const [page, setPage] = React.useState('overview')
  const items = PAGES.map((item) => ({ ...item, active: item.id === page, onSelect: () => setPage(item.id) }))
  const current = PAGES.find((item) => item.id === page)

  return (
    <div className="min-h-dvh bg-background">
      <header className="flex h-12 items-center gap-2 border-b px-2">
        <MobileNav
          trigger={<MobileNavTrigger className="md:inline-flex" />}
          items={items}
          title="Acme"
          closeOnSelect={false}
        />
        <span className="text-sm font-medium text-foreground">{current?.label}</span>
      </header>
    </div>
  )
}

import { MobileNav, MobileNavTrigger, type NavItem } from 'ferry-ui'
import { FolderKanban, LayoutDashboard, Users } from 'lucide-react'

const ITEMS: NavItem[] = [
  { id: 'overview', label: 'Overview', icon: <LayoutDashboard />, active: true },
  { id: 'projects', label: 'Projects', icon: <FolderKanban /> },
  { id: 'members', label: 'Members', icon: <Users /> },
]

export default function MobileNavRightSide() {
  return (
    <div className="min-h-dvh bg-background">
      <header className="flex h-12 items-center justify-between gap-2 border-b px-3">
        <span className="text-sm font-medium text-foreground">Overview</span>
        <MobileNav
          trigger={<MobileNavTrigger className="md:inline-flex" />}
          items={ITEMS}
          title="Acme"
          side="right"
        />
      </header>
    </div>
  )
}