SONAX Application UI

Sidebar

Demos

Default

import { Sidebar, Layout, Badge, Box, spacing } from 'sxa-ui'

function Demo() {
  return (
     <Layout
      sidebar={
        <Sidebar>
          <Sidebar.Menu>
            <Sidebar.Item label='Item 1'>
              <Sidebar.Item label='Subitem' />
              <Sidebar.Item
                label={'Disabled subitem'}
                disabled
              />
            </Sidebar.Item>
            <Sidebar.Item label='Item 2' />
          </Sidebar.Menu>
          <Sidebar.Footer>
            <Sidebar.Label>Admin</Sidebar.Label>
            <Sidebar.Item
              label={'Benutzer'}
              badge={<Badge label={'1'} state={Badge.states.error} />}
            />
            <Sidebar.Item
              label={'Disabled'}
              disabled
            />
          </Sidebar.Footer>
        </Sidebar>
      }
    >
      <Box style={{
        height: '500px',
        background: '#fff'
      }}/>
    </Layout>
  )
}

export default Demo