mirror of
https://github.com/cheeaun/phanpy.git
synced 2025-01-23 00:56:23 +01:00
Transform nav menu into 2 columns
This commit is contained in:
Lim Chee Aun
parent
a52bd7ca5d
commit
4b45375b4c
2 changed files with 131 additions and 98 deletions
26
src/components/nav-menu.css
Normal file
26
src/components/nav-menu.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@media (min-width: 23em) {
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
/* 1px background image */
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
var(--divider-color),
|
||||
var(--divider-color)
|
||||
);
|
||||
background-size: 1px 1px;
|
||||
background-repeat: repeat-y;
|
||||
background-position: center;
|
||||
}
|
||||
.nav-menu section {
|
||||
width: 50%;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.nav-menu section:last-child > .szh-menu__divider:first-child {
|
||||
display: none;
|
||||
}
|
||||
.nav-menu .szh-menu__item span {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import './nav-menu.css';
|
||||
|
||||
import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
|
||||
import { useRef, useState } from 'preact/hooks';
|
||||
import { useLongPress } from 'use-long-press';
|
||||
|
|
@ -73,6 +75,7 @@ function NavMenu(props) {
|
|||
<Icon icon="menu" size={moreThanOneAccount ? 's' : 'l'} />
|
||||
</button>
|
||||
<ControlledMenu
|
||||
menuClassName="nav-menu"
|
||||
state={menuState}
|
||||
anchorRef={buttonRef}
|
||||
onClose={() => {
|
||||
|
|
@ -97,109 +100,113 @@ function NavMenu(props) {
|
|||
boundingBoxPadding="8 8 8 8"
|
||||
unmountOnClose
|
||||
>
|
||||
{!!snapStates.appVersion?.commitHash &&
|
||||
__COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
|
||||
<section>
|
||||
{!!snapStates.appVersion?.commitHash &&
|
||||
__COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
|
||||
<>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
const yes = confirm('Reload page now to update?');
|
||||
if (yes) {
|
||||
(async () => {
|
||||
try {
|
||||
location.reload();
|
||||
} catch (e) {}
|
||||
})();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="sparkles" size="l" />{' '}
|
||||
<span>New update available…</span>
|
||||
</MenuItem>
|
||||
<MenuDivider />
|
||||
</>
|
||||
)}
|
||||
<MenuLink to="/">
|
||||
<Icon icon="home" size="l" /> <span>Home</span>
|
||||
</MenuLink>
|
||||
{authenticated && (
|
||||
<>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
const yes = confirm('Reload page now to update?');
|
||||
if (yes) {
|
||||
(async () => {
|
||||
try {
|
||||
location.reload();
|
||||
} catch (e) {}
|
||||
})();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon="sparkles" size="l" />{' '}
|
||||
<span>New update available…</span>
|
||||
</MenuItem>
|
||||
{showFollowing && (
|
||||
<MenuLink to="/following">
|
||||
<Icon icon="following" size="l" /> <span>Following</span>
|
||||
</MenuLink>
|
||||
)}
|
||||
<MenuLink to="/mentions">
|
||||
<Icon icon="at" size="l" /> <span>Mentions</span>
|
||||
</MenuLink>
|
||||
<MenuLink to="/notifications">
|
||||
<Icon icon="notification" size="l" /> <span>Notifications</span>
|
||||
{snapStates.notificationsShowNew && (
|
||||
<sup title="New" style={{ opacity: 0.5 }}>
|
||||
{' '}
|
||||
•
|
||||
</sup>
|
||||
)}
|
||||
</MenuLink>
|
||||
<MenuDivider />
|
||||
<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>
|
||||
<MenuLink to="/b">
|
||||
<Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
|
||||
</MenuLink>
|
||||
<MenuLink to="/f">
|
||||
<Icon icon="heart" size="l" /> <span>Favourites</span>
|
||||
</MenuLink>
|
||||
</>
|
||||
)}
|
||||
<MenuLink to="/">
|
||||
<Icon icon="home" size="l" /> <span>Home</span>
|
||||
</MenuLink>
|
||||
{authenticated && (
|
||||
<>
|
||||
{showFollowing && (
|
||||
<MenuLink to="/following">
|
||||
<Icon icon="following" size="l" /> <span>Following</span>
|
||||
</MenuLink>
|
||||
)}
|
||||
<MenuLink to="/mentions">
|
||||
<Icon icon="at" size="l" /> <span>Mentions</span>
|
||||
</MenuLink>
|
||||
<MenuLink to="/notifications">
|
||||
<Icon icon="notification" size="l" /> <span>Notifications</span>
|
||||
{snapStates.notificationsShowNew && (
|
||||
<sup title="New" style={{ opacity: 0.5 }}>
|
||||
{' '}
|
||||
•
|
||||
</sup>
|
||||
<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>
|
||||
<MenuLink to={`/${instance}/trending`}>
|
||||
<Icon icon="chart" size="l" /> <span>Trending</span>
|
||||
</MenuLink>
|
||||
</section>
|
||||
<section>
|
||||
{authenticated && (
|
||||
<>
|
||||
<MenuDivider />
|
||||
{currentAccount?.info?.id && (
|
||||
<MenuLink to={`/${instance}/a/${currentAccount.info.id}`}>
|
||||
<Icon icon="user" size="l" /> <span>Profile</span>
|
||||
</MenuLink>
|
||||
)}
|
||||
</MenuLink>
|
||||
<MenuDivider />
|
||||
<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>
|
||||
<MenuLink to="/b">
|
||||
<Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
|
||||
</MenuLink>
|
||||
<MenuLink to="/f">
|
||||
<Icon icon="heart" size="l" /> <span>Favourites</span>
|
||||
</MenuLink>
|
||||
</>
|
||||
)}
|
||||
<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>
|
||||
<MenuLink to={`/${instance}/trending`}>
|
||||
<Icon icon="chart" size="l" /> <span>Trending</span>
|
||||
</MenuLink>
|
||||
{authenticated && (
|
||||
<>
|
||||
<MenuDivider />
|
||||
{currentAccount?.info?.id && (
|
||||
<MenuLink to={`/${instance}/a/${currentAccount.info.id}`}>
|
||||
<Icon icon="user" size="l" /> <span>Profile</span>
|
||||
</MenuLink>
|
||||
)}
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showAccounts = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="group" size="l" /> <span>Accounts…</span>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showShortcutsSettings = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="shortcut" size="l" />{' '}
|
||||
<span>Shortcuts Settings…</span>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showSettings = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="gear" size="l" /> <span>Settings…</span>
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showAccounts = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="group" size="l" /> <span>Accounts…</span>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showShortcutsSettings = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="shortcut" size="l" />{' '}
|
||||
<span>Shortcuts Settings…</span>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
states.showSettings = true;
|
||||
}}
|
||||
>
|
||||
<Icon icon="gear" size="l" /> <span>Settings…</span>
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</ControlledMenu>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue