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,6 +100,7 @@ function NavMenu(props) {
         boundingBoxPadding="8 8 8 8"
         unmountOnClose
       >
+        <section>
           {!!snapStates.appVersion?.commitHash &&
             __COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
               <>
@@ -168,6 +172,8 @@ function NavMenu(props) {
           <MenuLink to={`/${instance}/trending`}>
             <Icon icon="chart" size="l" /> <span>Trending</span>
           </MenuLink>
+        </section>
+        <section>
           {authenticated && (
             <>
               <MenuDivider />
@@ -200,6 +206,7 @@ function NavMenu(props) {
               </MenuItem>
             </>
           )}
+        </section>
       </ControlledMenu>
     </>
   );