Menu navbar with depth
By default the MenuNavbar renders up to 3 layers of navigation levels items who could be styled trough overriding styles.
Example simple MenuNavbar
The most basic implementation renders the multi level menu on all devices.
client/src/components/Header/MenuNavbar.js
...
import React from 'react';
import { MenuQuery } from '@deity/falcon-shop-data';
import { MenuNavbar } from '@deity/falcon-ui-kit';
...
export const MenuNavBar = () => {
return (
<MenuQuery>
{({ data: { menu } }) =>
<MenuNavbar items={menu} />
}
</MenuQuery>
);
};
Exemple of navbar with sidebar support for mobile (demo-v2)
You have full control how to deal with the navigation menu on different devices. To only show the MenuNavbar
on larger screens dispay atributes could be used as follow.
client/src/components/Header/MenuNavbar.js
import React from 'react';
import { MenuQuery } from '@deity/falcon-shop-data';
import { Button, Box, Text, Icon } from '@deity/falcon-ui';
import { MenuNavbar } from '@deity/falcon-ui-kit';
import { useSidebarContainer } from '@deity/falcon-front-kit';
import { T, useI18n } from '@deity/falcon-i18n';
import { SIDEBAR_TYPE } from 'src/components';
import { WideWrapper } from '../WideWrapper';
export const MenuNavBar = () => {
const { t } = useI18n();
const sidebar = useSidebarContainer();
return (
<WideWrapper>
// Don't render navbar on small screen, but show toggle button that
// triggers sidebar navigation
<Button
aria-label={t('navbar.openMobile')}
aria-controls={`sidebar-${SIDEBAR_TYPE.menu}`}
onClick={() => sidebar.open(SIDEBAR_TYPE.menu, undefined, 'left')}
>
<Icon src="menu"/>
<Text><T id="navbar.openMobile" /></Text>
</Button>
// Only display MenuNavbar on medium screens
<Box display={{ xs: 'none', md: 'block' }}>
<MenuQuery>{({ data: { menu } }) => <MenuNavbar items={menu} />}</MenuQuery>
</Box>
</WideWrapper>
);
};
Customize MenuNavbar styling
Trough the theme object styling can be overridden a follow;
client/src/styling/theme.js
export const falconTheme = createTheme({
navbarItem: {
css: {
'> .themed-link': {
// Add underline link in navbar
textDecoration: 'underline',
},
'.themed-list-item > .themed-link': {
// Remove underline of second child layer and change color
textDecoration: 'none',
}
}
},
...
})