Top Bar

The top bar provides content and actions related to the current screen. It is used for branding, screen titles, navigation, and actions.

TopBar exports components that combine to form the elements that you would expect to commonly see in a TopBar. However, the TopBar is not limited to these components, as any components may sit within the TopBar to create a flexible and custom UI.

By default, TopBar uses a flex layout with flex items placed immediately after each other. To align flex items, an optional className with justifyContent can be passed.

Alternatively, if you want to avoid wrapping groups of items with a div purely for alignment purposes, you could use a spacer. In this example, the styling of the div has been extended so that it stretches to fill the available space.

<TopBar>
  <TopBar.Brand href="atomlearning.co.uk">
    <TopBar.BrandName>Admin Panel</TopBar.BrandName>
  </TopBar.Brand>
  <div className="flex flex-1 justify-self-stretch self-stretch" />
  <div className="flex gap-2">
    <TopBar.ActionIcon icon={Search} label="Search" />
    <TopBar.Divider />
    <TopBar.ActionIcon icon={SwitchOff} label="Light/Dark mode" />
  </div>
</TopBar>

TopBar Size Variant

TopBar has a default size of md which means that the default height of the component is 64px. If size lg is passed to the TopBar it will be 96px in height.

<div className="flex flex-col gap-3 w-full">
<TopBar>
  <TopBar.Brand href="atomlearning.co.uk">
    <TopBar.BrandLogo
      src={
        'https://space-1.atomlearning.com/static/f61e49cfb245016e612a34818e27dcfb.svg'
      }
    />
  </TopBar.Brand>
</TopBar>

<TopBar size="lg">
  <TopBar.Brand href="atomlearning.co.uk">
    <TopBar.BrandLogo
      src={
        'https://space-1.atomlearning.com/static/f61e49cfb245016e612a34818e27dcfb.svg'
      }
    />
  </TopBar.Brand>
</TopBar>

</div>

TopBar.Brand

TopBar.Brand renders a styled link.
In the actual app you can import the logo from `@atom-learning/theme/lib/assets/logo.svg`

<TopBar>
  <TopBar.Brand href="atomlearning.co.uk">
    <TopBar.BrandLogo
      src={
        'https://space-1.atomlearning.com/static/f61e49cfb245016e612a34818e27dcfb.svg'
      }
    />
    <TopBar.BrandName>Admin Panel</TopBar.BrandName>
  </TopBar.Brand>
</TopBar>

TopBar.BrandLogo

TopBar.BrandLogo renders an image with set styles and is primarily intended for the Atom logo.

TopBar.BrandName

TopBar.BrandName renders a Text component with set styles and is primarily intended to display the name of the current app.

TopBar.ActionIcon

TopBar.ActionIcon extends the base ActionIcon component with set props.

Note that instead of needing to include a seperate Icon component as children, an icon can be passed directly to this component as a prop.

TopBar.Divider

Used to divide the ActionIcons

<TopBar>
 <div className="flex gap-2">
    <TopBar.ActionIcon icon={Search} label="Search" />
    <TopBar.Divider />
    <TopBar.ActionIcon icon={SwitchOff} label="Light/Dark mode" />
    <TopBar.Divider />
    <TopBar.ActionIcon icon={Clip} label="Clip" />
  </div>
</TopBar>