Navbar

import { Button } from 'topclassui/button'
import { NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarRoot } from 'topclassui/navbar'

/** The drawn bar: the brand, four links with the page being read marked, and one action.
 * Each link is the anchor the part renders; a Next.js app passes render={<Link href="/docs" />}. */
export default function Demo() {
  return (
    <NavbarRoot>
      <NavbarBrand href="/">TopClass UI</NavbarBrand>
      <NavbarLinks>
        <NavbarLink href="/docs" current>Docs</NavbarLink>
        <NavbarLink href="/components">Components</NavbarLink>
        <NavbarLink href="/icons">Icons</NavbarLink>
        <NavbarLink href="/theming">Theming</NavbarLink>
      </NavbarLinks>
      <NavbarActions>
        <Button render={<a href="/login" />}>Sign in</Button>
      </NavbarActions>
    </NavbarRoot>
  )
}

import { AvatarFallback, AvatarRoot } from 'topclassui/avatar'
import { Input } from 'topclassui/input'
import { NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarRoot } from 'topclassui/navbar'

/** A search field and the account at the end of the bar. NavbarActions styles neither: the
 * form is the caller's, and it works with no script because it is a plain GET. */
export default function Demo() {
  return (
    <NavbarRoot>
      <NavbarBrand href="/">TopClass UI</NavbarBrand>
      <NavbarLinks>
        <NavbarLink href="/docs" current>Docs</NavbarLink>
        <NavbarLink href="/components">Components</NavbarLink>
        <NavbarLink href="/icons">Icons</NavbarLink>
      </NavbarLinks>
      <NavbarActions>
        <form role="search" action="/search" className="min-w-0">
          <Input type="search" name="q" size="sm" placeholder="Search" aria-label="Search the docs" />
        </form>
        <AvatarRoot size="sm" aria-label="Omar Abed">
          <AvatarFallback>OA</AvatarFallback>
        </AvatarRoot>
      </NavbarActions>
    </NavbarRoot>
  )
}

import { githubLogo } from 'topclassui/icons/github-logo'
import { Button } from 'topclassui/button'
import { Svg } from 'topclassui/svg'
import { NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarRoot } from 'topclassui/navbar'

/** Six links and two actions: more than a phone has room for. The links scroll sideways
 * inside the bar, and the page stays as wide as the screen. */
export default function Demo() {
  return (
    <NavbarRoot>
      <NavbarBrand href="/">TopClass UI</NavbarBrand>
      <NavbarLinks>
        <NavbarLink href="/docs">Docs</NavbarLink>
        <NavbarLink href="/components" current>Components</NavbarLink>
        <NavbarLink href="/icons">Icons</NavbarLink>
        <NavbarLink href="/theming">Theming</NavbarLink>
        <NavbarLink href="/connectors">Connectors</NavbarLink>
        <NavbarLink href="/changelog">Changelog</NavbarLink>
      </NavbarLinks>
      <NavbarActions>
        <Button variant="ghost" aria-label="GitHub" render={<a href="https://github.com/TopClassUI/topclassui" />}>
          <Svg icon={githubLogo} />
        </Button>
        <Button render={<a href="/login" />}>Sign in</Button>
      </NavbarActions>
    </NavbarRoot>
  )
}

import { NavbarBrand, NavbarLink, NavbarLinks, NavbarRoot } from 'topclassui/navbar'

/** sticky={false}: the bar scrolls away with the page, sends no JavaScript to the browser
 * and leaves --tc-sticky-top alone. */
export default function Demo() {
  return (
    <NavbarRoot sticky={false}>
      <NavbarBrand href="/">TopClass UI</NavbarBrand>
      <NavbarLinks>
        <NavbarLink href="/docs">Docs</NavbarLink>
        <NavbarLink href="/blog" current>Blog</NavbarLink>
        <NavbarLink href="/changelog">Changelog</NavbarLink>
      </NavbarLinks>
    </NavbarRoot>
  )
}

import { Button } from 'topclassui/button'
import { NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarRoot } from 'topclassui/navbar'

const SECTIONS = [
  { id: 'install', title: 'Install', next: 'usage' },
  { id: 'usage', title: 'Usage', next: 'theming' },
  { id: 'theming', title: 'Theming', next: 'questions' },
  { id: 'questions', title: 'Questions', next: 'install' },
] as const

/** A page longer than the screen under a sticky bar. Each link goes to a heading further
 * down, which stops below the bar and not under it; so does a link that Tab scrolls to. */
export default function Demo() {
  return (
    <div>
      <NavbarRoot>
        <NavbarBrand href="#install">Handbook</NavbarBrand>
        <NavbarLinks aria-label="On this page">
          {SECTIONS.map((section) => (
            <NavbarLink key={section.id} href={`#${section.id}`}>{section.title}</NavbarLink>
          ))}
        </NavbarLinks>
        <NavbarActions>
          <Button variant="outline" render={<a href="/handbook/edit" />}>Edit this page</Button>
        </NavbarActions>
      </NavbarRoot>
      {SECTIONS.map((section) => (
        <section key={section.id} aria-labelledby={section.id} className="min-h-dvh px-5 pb-6">
          <h2 id={section.id} className="text-base font-semibold text-body">{section.title}</h2>
          <Button variant="link" render={<a href={`#${section.next}`} />}>Go on to the next part</Button>
        </section>
      ))}
    </div>
  )
}

import { Button } from 'topclassui/button'
import { ar } from 'topclassui/labels/ar'
import { NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarRoot } from 'topclassui/navbar'

/** Arabic: the brand sits at the right, the action at the left, and the nav takes its name
 * from the Arabic labels. No class of its own does it: every one is logical. */
export default function Demo() {
  return (
    <div dir="rtl" lang="ar">
      <NavbarRoot>
        <NavbarBrand href="/">توب كلاس</NavbarBrand>
        <NavbarLinks labels={ar}>
          <NavbarLink href="/docs" current>المستندات</NavbarLink>
          <NavbarLink href="/components">المكوّنات</NavbarLink>
          <NavbarLink href="/icons">الأيقونات</NavbarLink>
          <NavbarLink href="/theming">السمات</NavbarLink>
        </NavbarLinks>
        <NavbarActions>
          <Button render={<a href="/login" />}>تسجيل الدخول</Button>
        </NavbarActions>
      </NavbarRoot>
    </div>
  )
}