2023-02-10 17:10:13 +03:00
|
|
|
import { FocusableItem, Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
|
|
|
|
|
2023-02-10 19:05:18 +03:00
|
|
|
import { api } from '../utils/api';
|
2023-02-10 17:10:13 +03:00
|
|
|
import states from '../utils/states';
|
|
|
|
|
|
|
|
import Icon from './icon';
|
|
|
|
import Link from './link';
|
|
|
|
|
|
|
|
function NavMenu(props) {
|
2023-02-10 19:05:18 +03:00
|
|
|
const { instance } = api();
|
2023-02-10 17:10:13 +03:00
|
|
|
return (
|
|
|
|
<Menu
|
2023-02-10 19:05:18 +03:00
|
|
|
portal={{
|
|
|
|
target: document.body,
|
|
|
|
}}
|
2023-02-10 17:10:13 +03:00
|
|
|
{...props}
|
2023-02-11 01:25:38 +03:00
|
|
|
viewScroll="close"
|
2023-02-10 17:10:13 +03:00
|
|
|
menuButton={
|
|
|
|
<button type="button" class="button plain">
|
|
|
|
<Icon icon="menu" size="l" />
|
|
|
|
</button>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<MenuLink to="/">
|
|
|
|
<Icon icon="home" size="l" /> <span>Home</span>
|
|
|
|
</MenuLink>
|
2023-02-10 19:05:18 +03:00
|
|
|
<MenuLink to="/notifications">
|
|
|
|
<Icon icon="notification" size="l" /> <span>Notifications</span>
|
|
|
|
</MenuLink>
|
|
|
|
<MenuDivider />
|
2023-02-11 11:48:47 +03:00
|
|
|
<MenuLink to="/l">
|
|
|
|
<Icon icon="list" size="l" /> <span>Lists</span>
|
|
|
|
</MenuLink>
|
|
|
|
<MenuLink to="/ft">
|
|
|
|
<Icon icon="hashtag" size="l" /> <span>Followed Hashtags</span>
|
|
|
|
</MenuLink>
|
2023-02-10 17:10:13 +03:00
|
|
|
<MenuLink to="/b">
|
|
|
|
<Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
|
|
|
|
</MenuLink>
|
|
|
|
<MenuLink to="/f">
|
|
|
|
<Icon icon="heart" size="l" /> <span>Favourites</span>
|
|
|
|
</MenuLink>
|
2023-02-10 19:05:18 +03:00
|
|
|
<MenuDivider />
|
|
|
|
{/* <MenuLink to={`/search`}>
|
|
|
|
<Icon icon="search" size="l" /> <span>Search</span>
|
|
|
|
</MenuLink> */}
|
|
|
|
<MenuLink to={`/${instance}/p/l`}>
|
|
|
|
<Icon icon="group" size="l" /> <span>Local</span>
|
|
|
|
</MenuLink>
|
|
|
|
<MenuLink to={`/${instance}/p`}>
|
|
|
|
<Icon icon="earth" size="l" /> <span>Federated</span>
|
|
|
|
</MenuLink>
|
2023-02-10 17:10:13 +03:00
|
|
|
<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;
|