From 2b2f6c28a9177cb3ba335bbb7c22cfc7f51a852a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 4 Mar 2024 16:41:06 +0800
Subject: [PATCH] Time to re-organize this main menu

Will need to gather feedback
---
 src/components/nav-menu.jsx | 147 +++++++++++++++++++++---------------
 1 file changed, 85 insertions(+), 62 deletions(-)

diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
index 46d5deed..6e6b52cf 100644
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@@ -1,6 +1,11 @@
 import './nav-menu.css';
 
-import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
+import {
+  ControlledMenu,
+  MenuDivider,
+  MenuItem,
+  SubMenu,
+} from '@szhsin/react-menu';
 import { memo } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useLongPress } from 'use-long-press';
@@ -169,7 +174,7 @@ function NavMenu(props) {
           <MenuLink to="/">
             <Icon icon="home" size="l" /> <span>Home</span>
           </MenuLink>
-          {authenticated && (
+          {authenticated ? (
             <>
               {showFollowing && (
                 <MenuLink to="/following">
@@ -192,44 +197,64 @@ function NavMenu(props) {
                   </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>Likes</span>
-              </MenuLink>
-            </>
-          )}
-          <MenuDivider />
-          <MenuLink to={`/search`}>
-            <Icon icon="search" size="l" /> <span>Search</span>
-          </MenuLink>
-          <MenuLink to={`/${instance}/p/l`}>
-            <Icon icon="building" 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 to="/l">
+                <Icon icon="list" size="l" /> <span>Lists</span>
+              </MenuLink>
+              <MenuLink to="/b">
+                <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
+              </MenuLink>
+              <SubMenu
+                overflow="auto"
+                gap={-8}
+                label={
+                  <>
+                    <Icon icon="more" size="l" />
+                    <span class="menu-grow">More…</span>
+                    <Icon icon="chevron-right" />
+                  </>
+                }
+              >
+                <MenuLink to="/f">
+                  <Icon icon="heart" size="l" /> <span>Likes</span>
+                </MenuLink>
+                <MenuLink to="/ft">
+                  <Icon icon="hashtag" size="l" />{' '}
+                  <span>Followed Hashtags</span>
+                </MenuLink>
+                <MenuDivider />
+                <MenuItem
+                  onClick={() => {
+                    states.showGenericAccounts = {
+                      id: 'mute',
+                      heading: 'Muted users',
+                      fetchAccounts: fetchMutes,
+                      excludeRelationshipAttrs: ['muting'],
+                    };
+                  }}
+                >
+                  <Icon icon="mute" size="l" /> Muted users&hellip;
+                </MenuItem>
+                <MenuItem
+                  onClick={() => {
+                    states.showGenericAccounts = {
+                      id: 'block',
+                      heading: 'Blocked users',
+                      fetchAccounts: fetchBlocks,
+                      excludeRelationshipAttrs: ['blocking'],
+                    };
+                  }}
+                >
+                  <Icon icon="block" size="l" />
+                  Blocked users&hellip;
+                </MenuItem>{' '}
+              </SubMenu>
+              <MenuDivider />
               <MenuItem
                 onClick={() => {
                   states.showAccounts = true;
@@ -237,31 +262,32 @@ function NavMenu(props) {
               >
                 <Icon icon="group" size="l" /> <span>Accounts&hellip;</span>
               </MenuItem>
-              <MenuItem
-                onClick={() => {
-                  states.showGenericAccounts = {
-                    id: 'mute',
-                    heading: 'Muted users',
-                    fetchAccounts: fetchMutes,
-                    excludeRelationshipAttrs: ['muting'],
-                  };
-                }}
-              >
-                <Icon icon="mute" size="l" /> Muted users&hellip;
-              </MenuItem>
-              <MenuItem
-                onClick={() => {
-                  states.showGenericAccounts = {
-                    id: 'block',
-                    heading: 'Blocked users',
-                    fetchAccounts: fetchBlocks,
-                    excludeRelationshipAttrs: ['blocking'],
-                  };
-                }}
-              >
-                <Icon icon="block" size="l" />
-                Blocked users&hellip;
-              </MenuItem>
+            </>
+          ) : (
+            <>
+              <MenuDivider />
+              <MenuLink to="/login">
+                <Icon icon="user" size="l" /> <span>Log in</span>
+              </MenuLink>
+            </>
+          )}
+        </section>
+        <section>
+          <MenuDivider />
+          <MenuLink to={`/search`}>
+            <Icon icon="search" size="l" /> <span>Search</span>
+          </MenuLink>
+          <MenuLink to={`/${instance}/trending`}>
+            <Icon icon="chart" size="l" /> <span>Trending</span>
+          </MenuLink>
+          <MenuLink to={`/${instance}/p/l`}>
+            <Icon icon="building" size="l" /> <span>Local</span>
+          </MenuLink>
+          <MenuLink to={`/${instance}/p`}>
+            <Icon icon="earth" size="l" /> <span>Federated</span>
+          </MenuLink>
+          {authenticated ? (
+            <>
               <MenuDivider className="divider-grow" />
               <MenuItem
                 onClick={() => {
@@ -290,9 +316,6 @@ function NavMenu(props) {
           ) : (
             <>
               <MenuDivider />
-              <MenuLink to="/login">
-                <Icon icon="user" size="l" /> <span>Log in</span>
-              </MenuLink>
               <MenuItem
                 onClick={() => {
                   states.showSettings = true;