Transform nav menu into 2 columns

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;
+  }
+}

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) {
         <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 &&
+        <section>
-          __COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
+          {!!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
+              {showFollowing && (
-                onClick={() => {
+                <MenuLink to="/following">
-                  const yes = confirm('Reload page now to update?');
+                  <Icon icon="following" size="l" /> <span>Following</span>
-                  if (yes) {
+                </MenuLink>
-                    (async () => {
+              )}
-                      try {
+              <MenuLink to="/mentions">
-                        location.reload();
+                <Icon icon="at" size="l" /> <span>Mentions</span>
-                      } catch (e) {}
+              </MenuLink>
-                    })();
+              <MenuLink to="/notifications">
-                  }
+                <Icon icon="notification" size="l" /> <span>Notifications</span>
-                }}
+                {snapStates.notificationsShowNew && (
-              >
+                  <sup title="New" style={{ opacity: 0.5 }}>
-                <Icon icon="sparkles" size="l" />{' '}
+                    {' '}
-                <span>New update available…</span>
+                    &bull;
-              </MenuItem>
+                  </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="/">
+          <MenuDivider />
-          <Icon icon="home" size="l" /> <span>Home</span>
+          <MenuLink to={`/search`}>
-        </MenuLink>
+            <Icon icon="search" size="l" /> <span>Search</span>
-        {authenticated && (
+          </MenuLink>
-          <>
+          <MenuLink to={`/${instance}/p/l`}>
-            {showFollowing && (
+            <Icon icon="group" size="l" /> <span>Local</span>
-              <MenuLink to="/following">
+          </MenuLink>
-                <Icon icon="following" size="l" /> <span>Following</span>
+          <MenuLink to={`/${instance}/p`}>
-              </MenuLink>
+            <Icon icon="earth" size="l" /> <span>Federated</span>
-            )}
+          </MenuLink>
-            <MenuLink to="/mentions">
+          <MenuLink to={`/${instance}/trending`}>
-              <Icon icon="at" size="l" /> <span>Mentions</span>
+            <Icon icon="chart" size="l" /> <span>Trending</span>
-            </MenuLink>
+          </MenuLink>
-            <MenuLink to="/notifications">
+        </section>
-              <Icon icon="notification" size="l" /> <span>Notifications</span>
+        <section>
-              {snapStates.notificationsShowNew && (
+          {authenticated && (
-                <sup title="New" style={{ opacity: 0.5 }}>
+            <>
-                  {' '}
+              <MenuDivider />
-                  &bull;
+              {currentAccount?.info?.id && (
-                </sup>
+                <MenuLink to={`/${instance}/a/${currentAccount.info.id}`}>
+                  <Icon icon="user" size="l" /> <span>Profile</span>
+                </MenuLink>
               )}
-            </MenuLink>
+              <MenuItem
-            <MenuDivider />
+                onClick={() => {
-            <MenuLink to="/l">
+                  states.showAccounts = true;
-              <Icon icon="list" size="l" /> <span>Lists</span>
+                }}
-            </MenuLink>
+              >
-            <MenuLink to="/ft">
+                <Icon icon="group" size="l" /> <span>Accounts&hellip;</span>
-              <Icon icon="hashtag" size="l" /> <span>Followed Hashtags</span>
+              </MenuItem>
-            </MenuLink>
+              <MenuItem
-            <MenuLink to="/b">
+                onClick={() => {
-              <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
+                  states.showShortcutsSettings = true;
-            </MenuLink>
+                }}
-            <MenuLink to="/f">
+              >
-              <Icon icon="heart" size="l" /> <span>Favourites</span>
+                <Icon icon="shortcut" size="l" />{' '}
-            </MenuLink>
+                <span>Shortcuts Settings&hellip;</span>
-          </>
+              </MenuItem>
-        )}
+              <MenuItem
-        <MenuDivider />
+                onClick={() => {
-        <MenuLink to={`/search`}>
+                  states.showSettings = true;
-          <Icon icon="search" size="l" /> <span>Search</span>
+                }}
-        </MenuLink>
+              >
-        <MenuLink to={`/${instance}/p/l`}>
+                <Icon icon="gear" size="l" /> <span>Settings&hellip;</span>
-          <Icon icon="group" size="l" /> <span>Local</span>
+              </MenuItem>
-        </MenuLink>
+            </>
-        <MenuLink to={`/${instance}/p`}>
+          )}
-          <Icon icon="earth" size="l" /> <span>Federated</span>
+        </section>
-        </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&hellip;</span>
-            </MenuItem>
-            <MenuItem
-              onClick={() => {
-                states.showShortcutsSettings = true;
-              }}
-            >
-              <Icon icon="shortcut" size="l" />{' '}
-              <span>Shortcuts Settings&hellip;</span>
-            </MenuItem>
-            <MenuItem
-              onClick={() => {
-                states.showSettings = true;
-              }}
-            >
-              <Icon icon="gear" size="l" /> <span>Settings&hellip;</span>
-            </MenuItem>
-          </>
-        )}
       </ControlledMenu>
     </>
   );