import {
ControlledMenu,
MenuDivider,
MenuItem,
useClick,
useMenuState,
} from '@szhsin/react-menu';
import { useRef } from 'preact/hooks';
import { useLongPress } from 'use-long-press';
import { useSnapshot } from 'valtio';
import { api } from '../utils/api';
import states from '../utils/states';
import store from '../utils/store';
import Avatar from './avatar';
import Icon from './icon';
import MenuLink from './menu-link';
function NavMenu(props) {
const snapStates = useSnapshot(states);
const { instance, authenticated } = api();
const accounts = store.local.getJSON('accounts') || [];
const currentAccount = accounts.find(
(account) => account.info.id === store.session.get('currentAccount'),
);
const moreThanOneAccount = accounts.length > 1;
// Home = Following
// But when in multi-column mode, Home becomes columns of anything
// User may choose pin or not to pin Following
// If user doesn't pin Following, we show it in the menu
const showFollowing =
(snapStates.settings.shortcutsColumnsMode ||
snapStates.settings.shortcutsViewMode === 'multi-column') &&
!snapStates.shortcuts.find((pin) => pin.type === 'following');
const bindLongPress = useLongPress(
() => {
states.showAccounts = true;
},
{
threshold: 600,
detect: 'touch',
cancelOnMovement: true,
},
);
const buttonRef = useRef();
const [menuState, toggleMenu] = useMenuState();
const anchorProps = useClick(menuState.state, toggleMenu);
return (
<>
{
toggleMenu(false);
}}
containerProps={{
onClick: () => {
toggleMenu(false);
},
}}
portal={{
target: document.body,
}}
{...props}
overflow="auto"
viewScroll="close"
boundingBoxPadding="8 8 8 8"
unmountOnClose
>
{!!snapStates.appVersion?.commitHash &&
__COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
<>
>
)}
Home
{authenticated && (
<>
{showFollowing && (
Following
)}
Mentions
Notifications
{snapStates.notificationsShowNew && (
{' '}
•
)}
Lists
Followed Hashtags
Bookmarks
Favourites
>
)}
Search
Local
Federated
Trending
{authenticated && (
<>
{currentAccount?.info?.id && (
Profile
)}
>
)}
>
);
}
export default NavMenu;