@comparaonline/ui-navigation-topbar

Installation

yarn add @comparaonline/ui-navigation-topbar

Usage on Desktop

import { Menu } from '@comparaonline/ui-navigation-topbar/dist/components/Menu';
import { TopbarLayout } from '@comparaonline/ui-navigation-topbar/dist/components/TopBarLayout';

const Logo = () => <img src={LOGO_URL} />

const Navbar = ({ menu }) => {
  return (
    <TopbarLayout left={Logo}>
      <Menu menu={menu}>
    </TopbarLayout>
  );
}

Usage on Mobile

import { MenuContentContainer } from '@comparaonline/ui-navigation-topbar/dist/components/MenuContainer/mobile';
import { TopbarLayout } from '@comparaonline/ui-navigation-topbar/dist/components/TopBarLayout';
import { FontAwesomeIcon } from '@comparaonline/ui-offer-icons';

const Logo = () => <img src={LOGO_URL} />;
const Burger = () => <img src={BURGER_URL} />;

const NavbarMobile = ({ menu }) => {
  const [open, setOpen] = useState(false);
  return (
    <TopbarLayout
      left={MobileLogo}
      right={() => <MenuIcon onClick={() => setOpen(!open)} />}
    >
      <Drawer anchor={'right'} open={open} onClose={() => setOpen(!open)}>
        <Grid container={true}>
          <Grid item={true} xs={12} style={{ marginBottom: 48 }}>
            <FontAwesomeIcon
              icon={['fal', 'times']}
              style={{ marginTop: 16, marginRight: 16 }}
              onClick={() => setOpen(!open)}
            />
          </Grid>
          <Grid itemn={true} xs={12}>
            <MenuContentContainer menu={menuLinks} />
          </Grid>
        </Grid>
      </Drawer>
    </TopbarLayout>
  );
};

Props

Menu and MenuContentContainer mobile accepts a linkComponent where you can override the link component used to show the data in the link.