56 lines
1.2 KiB
React
56 lines
1.2 KiB
React
|
import { FocusableItem, Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
|
||
|
|
|
||
|
|
import states from '../utils/states';
|
||
|
|
|
||
|
|
import Icon from './icon';
|
||
|
|
import Link from './link';
|
||
|
|
|
||
|
|
function NavMenu(props) {
|
||
|
|
return (
|
||
|
|
<Menu
|
||
|
|
{...props}
|
||
|
|
menuButton={
|
||
|
|
<button type="button" class="button plain">
|
||
|
|
<Icon icon="menu" size="l" />
|
||
|
|
</button>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<MenuLink to="/">
|
||
|
|
<Icon icon="home" size="l" /> <span>Home</span>
|
||
|
|
</MenuLink>
|
||
|
|
<MenuLink to="/b">
|
||
|
|
<Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
|
||
|
|
</MenuLink>
|
||
|
|
<MenuLink to="/f">
|
||
|
|
<Icon icon="heart" size="l" /> <span>Favourites</span>
|
||
|
|
</MenuLink>
|
||
|
|
<MenuDivider />
|
||
|
|
<MenuItem
|
||
|
|
onClick={() => {
|
||
|
|
states.showSettings = true;
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Icon icon="gear" size="l" alt="Settings" /> <span>Settings</span>
|
||
|
|
</MenuItem>
|
||
|
|
</Menu>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function MenuLink(props) {
|
||
|
|
return (
|
||
|
|
<FocusableItem>
|
||
|
|
{({ ref, closeMenu }) => (
|
||
|
|
<Link
|
||
|
|
{...props}
|
||
|
|
ref={ref}
|
||
|
|
onClick={({ detail }) =>
|
||
|
|
closeMenu(detail === 0 ? 'Enter' : undefined)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</FocusableItem>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default NavMenu;
|