diff --git a/src/components/nav-menu.css b/src/components/nav-menu.css
new file mode 100644
index 00000000..a3bb8830
--- /dev/null
+++ b/src/components/nav-menu.css
@@ -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;
+ }
+}
diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
index 7d6fbb8a..45793528 100644
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@@ -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) {
{
@@ -97,109 +100,113 @@ function NavMenu(props) {
boundingBoxPadding="8 8 8 8"
unmountOnClose
>
- {!!snapStates.appVersion?.commitHash &&
- __COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
+
+ {!!snapStates.appVersion?.commitHash &&
+ __COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
+ <>
+
+
+ >
+ )}
+
+ Home
+
+ {authenticated && (
<>
-
+ {showFollowing && (
+
+ Following
+
+ )}
+
+ Mentions
+
+
+ Notifications
+ {snapStates.notificationsShowNew && (
+
+ {' '}
+ •
+
+ )}
+
+
+ Lists
+
+
+ Followed Hashtags
+
+
+ Bookmarks
+
+
+ Favourites
+
>
)}
-
- Home
-
- {authenticated && (
- <>
- {showFollowing && (
-
- Following
-
- )}
-
- Mentions
-
-
- Notifications
- {snapStates.notificationsShowNew && (
-
- {' '}
- •
-
+
+
+ Search
+
+
+ Local
+
+
+ Federated
+
+
+ Trending
+
+
+
+ {authenticated && (
+ <>
+
+ {currentAccount?.info?.id && (
+
+ Profile
+
)}
-
-
-
- Lists
-
-
- Followed Hashtags
-
-
- Bookmarks
-
-
- Favourites
-
- >
- )}
-
-
- Search
-
-
- Local
-
-
- Federated
-
-
- Trending
-
- {authenticated && (
- <>
-
- {currentAccount?.info?.id && (
-
- Profile
-
- )}
-
-
-
- >
- )}
+
+
+
+ >
+ )}
+
>
);