From 4b45375b4c17d0776c4e3a1dc7a3aa5fc7f1c4ec Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 20 May 2023 17:46:58 +0800
Subject: [PATCH] Transform nav menu into 2 columns

---
 src/components/nav-menu.css |  26 +++++
 src/components/nav-menu.jsx | 203 +++++++++++++++++++-----------------
 2 files changed, 131 insertions(+), 98 deletions(-)
 create mode 100644 src/components/nav-menu.css

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) {
         <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 }}>
+                    {' '}
+                    &bull;
+                  </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 }}>
-                  {' '}
-                  &bull;
-                </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&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>
-          </>
-        )}
+              <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>
+            </>
+          )}
+        </section>
       </ControlledMenu>
     </>
   );