diff --git a/src/app.css b/src/app.css index 954fa9e3..36341f8a 100644 --- a/src/app.css +++ b/src/app.css @@ -1433,6 +1433,31 @@ ul.link-list li a .icon { } } +/* NAV MENU BUTTON */ + +.nav-menu-button.with-avatar { + position: relative; +} +.nav-menu-button:is(:hover, :focus):not(:active) { + filter: none !important; +} +.nav-menu-button .avatar { + transition: box-shadow 0.3s ease-out; +} +.nav-menu-button:is(:hover, :focus, .active) .avatar { + box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-light-color); +} +.nav-menu-button.with-avatar .icon { + position: absolute; + bottom: 4px; + right: 8px; + background-color: var(--bg-color); + border-radius: 2px; +} +.nav-menu-button.with-avatar:hover:not(:active, .active) .icon { + transform: translateY(-1px); +} + /* COLUMNS */ #columns { diff --git a/src/components/menu.jsx b/src/components/menu.jsx index bca5dcb5..c3420417 100644 --- a/src/components/menu.jsx +++ b/src/components/menu.jsx @@ -1,17 +1,23 @@ import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu'; +import { useLongPress } from 'use-long-press'; import { useSnapshot } from 'valtio'; import { api } from '../utils/api'; import states from '../utils/states'; -import { getCurrentAccount } from '../utils/store-utils'; +import store from '../utils/store'; +import Avatar from './avatar'; import Icon from './icon'; import MenuLink from './MenuLink'; function NavMenu(props) { const snapStates = useSnapshot(states); const { instance, authenticated } = api(); - const currentAccount = getCurrentAccount(); + 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 @@ -21,6 +27,16 @@ function NavMenu(props) { snapStates.settings.shortcutsColumnsMode && !snapStates.shortcuts.find((pin) => pin.type === 'following'); + const bindLongPress = useLongPress( + () => { + states.showAccounts = true; + }, + { + detect: 'touch', + cancelOnMovement: true, + }, + ); + return (