Inner Menu

import * as React from 'react'
import { InnerMenu, PageContainer, PageHeader, type NavGroup } from 'ferry-ui'
import { BellRing, CreditCard, KeyRound, ShieldCheck, User, Users } from 'lucide-react'

const GROUPS: NavGroup[] = [
  {
    id: 'account',
    label: 'Account',
    items: [
      { id: 'profile', label: 'Profile', icon: <User /> },
      { id: 'notifications', label: 'Notifications', icon: <BellRing /> },
      { id: 'security', label: 'Security', icon: <ShieldCheck /> },
    ],
  },
  {
    id: 'workspace',
    label: 'Workspace',
    items: [
      { id: 'members', label: 'Members', icon: <Users /> },
      { id: 'billing', label: 'Billing', icon: <CreditCard /> },
      { id: 'api-keys', label: 'API keys', icon: <KeyRound /> },
    ],
  },
]

export default function InnerMenuHero() {
  // The menu does not render the sections. Your state (or your router) holds the current one.
  const [section, setSection] = React.useState('profile')
  const current = GROUPS.flatMap((group) => group.items).find((item) => item.id === section)

  return (
    <div className="flex h-dvh flex-col bg-background md:flex-row">
      <InnerMenu title="Settings" groups={GROUPS} value={section} onValueChange={setSection} />
      <div className="min-w-0 flex-1 overflow-y-auto">
        <PageContainer size="narrow">
          <PageHeader title={current?.label} description="The menu selects the section that shows here." />
        </PageContainer>
      </div>
    </div>
  )
}

import * as React from 'react'
import { Badge, InnerMenu, type NavGroup } from 'ferry-ui'

const GROUPS: NavGroup[] = [
  {
    id: 'reports',
    label: 'Reports',
    items: [
      { id: 'revenue', label: 'Weekly revenue by region and sales channel' },
      { id: 'invoices', label: 'Invoices', badge: <Badge variant="info">12</Badge> },
      { id: 'forecast', label: 'Forecast', badge: <Badge variant="warning">Beta</Badge> },
      { id: 'exports', label: 'Scheduled exports', disabled: true },
    ],
  },
]

export default function InnerMenuStates() {
  const [section, setSection] = React.useState('revenue')

  return (
    <div className="flex h-dvh flex-col bg-background md:flex-row">
      <InnerMenu title="Analytics" groups={GROUPS} value={section} onValueChange={setSection} />
      <div className="min-w-0 flex-1 bg-dot-grid" />
    </div>
  )
}

import * as React from 'react'
import { Badge, Button, InnerMenu, toast, type NavGroup } from 'ferry-ui'
import { Plug, Settings2, Users } from 'lucide-react'

const GROUPS: NavGroup[] = [
  {
    id: 'project',
    items: [
      { id: 'general', label: 'General', icon: <Settings2 /> },
      { id: 'members', label: 'Members', icon: <Users /> },
      { id: 'integrations', label: 'Integrations', icon: <Plug /> },
    ],
  },
]

export default function InnerMenuHeaderFooter() {
  const [section, setSection] = React.useState('general')

  return (
    <div className="flex h-dvh flex-col bg-background md:flex-row">
      <InnerMenu
        title="Project settings"
        groups={GROUPS}
        value={section}
        onValueChange={setSection}
        header={
          <div className="flex items-center justify-between gap-2 px-3">
            <span className="truncate text-sm text-foreground">Billing portal</span>
            <Badge font="mono">Pro</Badge>
          </div>
        }
        footer={
          <div className="flex flex-col items-start gap-2 rounded-lg border border-dashed p-3">
            <p className="text-[13px] text-foreground-light">Do you have a question about a setting?</p>
            <Button size="tiny" onClick={() => toast('The support form opens here')}>
              Contact support
            </Button>
          </div>
        }
      />
      <div className="min-w-0 flex-1 bg-dot-grid" />
    </div>
  )
}

import * as React from 'react'
import { InnerMenu, type NavGroup } from 'ferry-ui'

const GROUPS: NavGroup[] = [
  {
    id: 'account',
    items: [
      { id: 'profile', label: 'Profile' },
      { id: 'notifications', label: 'Notifications' },
      { id: 'security', label: 'Security' },
    ],
  },
]

export default function InnerMenuNoTabs() {
  const [section, setSection] = React.useState('profile')

  return (
    // The container is a row at each width, because the menu stays on the side.
    <div className="flex h-dvh bg-background">
      <InnerMenu
        label="Account settings"
        groups={GROUPS}
        value={section}
        onValueChange={setSection}
        mobileTabs={false}
      />
      <div className="min-w-0 flex-1 bg-dot-grid" />
    </div>
  )
}