Variable: AppBar

const AppBar: object

The AppBar component is a wrapper for the page content, that renders a lateral menu containing the list of pages rendered by the app and a top navigation bar containing information related to the current user with a dropdown menu with a list of actions.

It is composed by the AppBarRoot, AppBarDrawer, AppBarMain and AppBarNav components.

A sandbox of this componet is available on our AppBar Story (opens in a new tab)

Type declaration

Name	Type	Default value
`Drawer`	(`props`) => `Element`	AppBarDrawer
`Main`	(`boxProps`) => `Element`	AppBarMain
`Nav`	(`props`) => `Element`	AppBarNav
`Root`	(`props`) => `Element`	AppBarRoot

Example

import { AppBar } from '@concepta/react-material-ui';
 
<AppBar.Root key={pathname}>
  <AppBar.Drawer
    currentId={pathname}
    logo="/logo.svg"
    collapsable
    items={[
      {
        id: '/users',
        icon: <GroupsOutlinedIcon />,
        text: 'Users',
        onClick: () => router.push('/users'),
      },
      {
        id: '/profile',
        icon: <PersonOutlinedIcon />,
        text: 'Profile',
        onClick: () => router.push('/profile'),
      },
    ]}
    expandedWidth={120}
  />
  <AppBar.Main>
    <AppBar.Nav
      text={user.fullName}
      avatar="https://source.unsplash.com/random"
      headerMenuOptions={(handleClose) => (
        <MenuItem
          onClick={() => {
            handleClose();
            doLogout();
            router.replace('/login');
          }}
        >
          Sign Out
        </MenuItem>
      )}
    />
    <Container>{children}</Container>
  </AppBar.Main>
</AppBar.Root>;

See

Defined in

packages/react-material-ui/src/components/AppBar/index.ts:71 (opens in a new tab)

TextFilter SchemaForm