README
@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.