Header

import { Header, Button, Stack, ButtonLink, spacing, Menu, Divider} from 'sxa-ui'
import { RiGlobalLine } from '@remixicon/react'

function Demo() {
  return (
    <Header
      logo={<img src='https://development.service.sonax.com/public/logo.svg' />}
      title='Service Center'
      actions={
        <Menu
          id='ui-locale-select'
          hx-swap-oob='true'
          alignment={Menu.alignments.right}
          trigger={
            <ButtonLink
              label='De'
              iconEnd={RiGlobalLine}
            />
          }
        >
          <Menu.Item
            href='#'
          >
            Deutch DE
          </Menu.Item>
          <Menu.Item
            href='#'
          >
            English EN
          </Menu.Item>
          <Menu.Item
            href='#'
          >
            Español ES
          </Menu.Item>
        </Menu>
      }
    />
  )
}
export default Demo

import {
  Header,
  Button,
  Stack,
  ButtonLink,
  spacing,
  Menu,
  Divider,
  TextInput
} from 'sxa-ui'
import { RiGlobalLine, RiSearchLine } from '@remixicon/react'

function Demo() {
  return (
      <Header
        logo={<img src='https://development.service.sonax.com/public/logo.svg' />}
        title='Service Center'
        search={
          <TextInput placeholder='Placeholder' icon={RiSearchLine} />
        }
        actions={
          <Stack gap={spacing.s} alignItems={Stack.alignItems.center}>
            <ButtonLink
              label='Registrieren'
              href='#sign-up'
              utilClassNames='sxa-mobile-hidden'
            />
            <Button
              label='Anmelden'
              href='#sign-in'
            />
            <Divider direction={Divider.directions.vertical} />
            <Menu
              id='ui-locale-select'
              hx-swap-oob='true'
              alignment={Menu.alignments.right}
              trigger={
                <ButtonLink
                  label='De'
                  iconEnd={RiGlobalLine}
                />
              }
            >
              <Menu.Item
                href='#'
              >
                Deutch DE
              </Menu.Item>
              <Menu.Item
                href='#'
              >
                English EN
              </Menu.Item>
              <Menu.Item
                href='#'
              >
                Español ES
              </Menu.Item>
            </Menu>
          </Stack>
      }
    />
  )
}
export default Demo

import {
  Avatar,
  Header,
  Button,
  Stack,
  ButtonLink,
  spacing,
  Menu,
  Divider,
  TextInput,
  Icon,
} from 'sxa-ui'
import { RiGlobalLine, RiSearchLine, RiUserLine, RiLogoutBoxRLine } from '@remixicon/react'

function Demo() {
  return (
    <Header
      logo={<img src='https://development.service.sonax.com/public/logo.svg' />}
      title='Service Center'
      search={
        <TextInput placeholder='Placeholder' icon={RiSearchLine} />
      }
      actions={
        <Stack gap={spacing.s} alignItems={Stack.alignItems.center}>
          <Menu alignment={Menu.alignments.right} id='user-menu'trigger={
            <Avatar initials={'FG'} />
          }>
            <Menu.Item>
              <Icon i={RiUserLine} utilClassNames='sxa-menu__icon' />Profile
            </Menu.Item>
            <Menu.Item>
              <Icon i={RiLogoutBoxRLine} utilClassNames='sxa-menu__icon' />Abmelden
            </Menu.Item>
          </Menu>
          <Divider direction={Divider.directions.vertical} />
          <Menu
            id='ui-locale-select'
            alignment={Menu.alignments.right}
            trigger={
              <ButtonLink
                label='De'
                iconEnd={RiGlobalLine}
              />
            }
          >
            <Menu.Item
              href='#'
            >
              Deutsch DE
            </Menu.Item>
            <Menu.Item
              href='#'
            >
              English EN
            </Menu.Item>
            <Menu.Item
              href='#'
            >
              Español ES
            </Menu.Item>
          </Menu>
        </Stack>
      }
    />
  )
}
export default Demo