import './nav-menu.css'; import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu'; import { useEffect, useRef, useState } from 'preact/hooks'; import { useLongPress } from 'use-long-press'; import { useSnapshot } from 'valtio'; import { api } from '../utils/api'; import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding'; 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 [currentAccount, setCurrentAccount] = useState(); const [moreThanOneAccount, setMoreThanOneAccount] = useState(false); useEffect(() => { const accounts = store.local.getJSON('accounts') || []; const acc = accounts.find( (account) => account.info.id === store.session.get('currentAccount'), ); if (acc) setCurrentAccount(acc); setMoreThanOneAccount(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, setMenuState] = useState(undefined); const boundingBoxPadding = safeBoundingBoxPadding([ 0, 0, snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0, 0, ]); return ( <> { setMenuState(undefined); }} containerProps={{ style: { zIndex: 10, }, onClick: () => { setMenuState(undefined); }, }} portal={{ target: document.body, }} {...props} overflow="auto" viewScroll="close" position="anchor" align="center" boundingBoxPadding={boundingBoxPadding} 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… ) : ( <> Log in )}
); } export default NavMenu;