6.1.0 • Published 3 years ago
@comparaonline/ui-navigation-topbar v6.1.0
@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.
6.1.0
3 years ago
5.7.0
4 years ago
5.4.14
4 years ago
5.4.11
4 years ago
5.4.9
4 years ago
5.4.8
4 years ago
5.4.4
5 years ago
5.4.3
5 years ago
5.3.3
5 years ago
5.3.1
5 years ago
5.1.2
5 years ago
4.9.1
5 years ago
4.9.0
5 years ago
4.8.5
5 years ago
4.8.4
5 years ago
4.8.3
5 years ago
4.8.2
5 years ago
4.7.1
5 years ago
4.7.0
5 years ago
4.6.0
5 years ago
4.5.0
5 years ago
4.4.5
5 years ago
4.4.0
5 years ago
4.3.3
5 years ago
4.3.2
5 years ago
4.3.1
5 years ago
4.3.0
5 years ago
4.2.3
5 years ago
4.2.2
5 years ago
4.2.1
5 years ago
4.1.1
5 years ago
4.1.0
5 years ago
4.0.5
5 years ago
4.0.4
5 years ago