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 && ( <> { const yes = confirm('Reload page now to update?'); if (yes) { (async () => { try { location.reload(); } catch (e) {} })(); } }} > {' '} New update available… )} Home {authenticated && ( <> {showFollowing && ( Following )} Mentions Notifications {snapStates.notificationsShowNew && ( {' '} • )} Lists Followed Hashtags Bookmarks Favourites )} Search Local Federated Trending {authenticated && ( <> {currentAccount?.info?.id && ( Profile )} { states.showAccounts = true; }} > Accounts… { states.showShortcutsSettings = true; }} > {' '} Shortcuts Settings… { states.showSettings = true; }} > Settings… )} ); } export default NavMenu;