From 01105f424a5df6b2904c001f3a863637e2dec4bc Mon Sep 17 00:00:00 2001
From: Razzmatazz <razz@badkarma.xyz>
Date: Fri, 1 Dec 2023 08:14:24 -0600
Subject: [PATCH 1/3] Make overflow menu more reliable

---
 src/components/menu/index.css                 | 13 ++++++--
 src/components/menu/index.js                  | 32 +++++++++----------
 .../menu/intersection-observer-wrapper.js     |  2 +-
 src/components/menu/overflow-menu.js          |  4 +--
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 9f951b477..d53eb69f6 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -269,13 +269,13 @@ ul.menu {
     max-width: 100%;
 }
 
-.visible-menu-item {
+.visible-menu-item, .visible-overflow {
     order: 0;
     visibility: visible;
     opacity: 1;
 }
 
-.invisible-menu-item {
+.invisible-menu-item, .invisible-overflow {
     order: 100;
     visibility: hidden;
     pointer-events: none;
@@ -302,3 +302,12 @@ ul.menu {
 .in-overflow-menu:hover {
     background-color: transparent;
 }
+
+/* margin unless it is the only item showing */
+nav.navigation ul.menu li.more-dropdown-wrapper:not(:nth-child(1 of li.visible-menu-all)) {
+    margin-left: -50px;
+}
+
+nav.navigation ul.menu li:nth-last-child(1 of li.visible-menu-item):not(:nth-last-child(1 of li.overflow-member)) {
+    padding-right: 50px;
+}
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index 3f85fd496..fd083bec3 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -114,7 +114,7 @@ const Menu = () => {
             <nav key="main-navigation" className="navigation">
                 <ul className={`menu`}>
                 <IntersectionObserverWrapper>
-                    <li key="menu-home" data-targetid="home">
+                    <li key="menu-home" data-targetid="home" className="overflow-member">
                         <Link className="branding" to="/">
                         {/* Tarkov.dev */}
                         <img
@@ -127,7 +127,7 @@ const Menu = () => {
                         />
                     </Link>
                     </li>
-                    <li className="submenu-wrapper"  key="menu-settings" data-targetid="settings">
+                    <li className="submenu-wrapper overflow-member"  key="menu-settings" data-targetid="settings">
                         <Link
                             aria-label="Settings"
                             to="/settings/"
@@ -140,7 +140,7 @@ const Menu = () => {
                             />
                         </Link>
                     </li>
-                    <li className="submenu-wrapper"  key="menu-remote" data-targetid="remote">
+                    <li className="submenu-wrapper overflow-member"  key="menu-remote" data-targetid="remote">
                         <Link
                             aria-label="Remote control"
                             to="/control/"
@@ -149,13 +149,13 @@ const Menu = () => {
                             <Icon path={mdiRemote} size={1} className="icon-with-text" />
                         </Link>
                     </li>
-                    <li className="submenu-wrapper" key="menu-ammo" data-targetid="ammo">
+                    <li className="submenu-wrapper overflow-member" key="menu-ammo" data-targetid="ammo">
                         <Link to="/ammo/">{t('Ammo')}</Link>
                         <ul style={{left: -20}}>
                             {getAmmoMenu()}
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-maps" data-targetid="maps">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-maps" data-targetid="maps">
                         <Link to="/maps/">{t('Maps')}</Link>
                         <ul style={{left: -40}}>
                             {Object.values(uniqueMaps.reduce((unique, map) => {
@@ -185,7 +185,7 @@ const Menu = () => {
                             />
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-items" data-targetid="items">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-items" data-targetid="items">
                         <Link to="/items/">{t('Items')}</Link>
                         <ul>
                             {categoryPages.map((categoryPage) => (
@@ -198,7 +198,7 @@ const Menu = () => {
                             ))}
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-traders" data-targetid="traders">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-traders" data-targetid="traders">
                         <Link to="/traders">{t('Traders')}</Link>
                         <ul>
                             <MenuItem
@@ -245,7 +245,7 @@ const Menu = () => {
                             />
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-bosses" data-targetid="bosses">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-bosses" data-targetid="bosses">
                         <Link to="/bosses/">{t('Bosses')}</Link>
                         <ul>
                             {bosses.filter(boss => boss.maps.length > 0).sort((a,b) => a.name.localeCompare(b.name)).map(boss => {
@@ -255,7 +255,7 @@ const Menu = () => {
                             })}
                         </ul>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-barters" data-targetid="barters">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-barters" data-targetid="barters">
                         <Link 
                             to="/barters/" 
                             //onClick={setIsOpen.bind(this, false)}
@@ -263,7 +263,7 @@ const Menu = () => {
                             {t('Barter profit')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-hideout-profit" data-targetid="crafts">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-hideout-profit" data-targetid="crafts">
                         <Link
                             to="/hideout-profit/"
                             //onClick={setIsOpen.bind(this, false)}
@@ -271,7 +271,7 @@ const Menu = () => {
                             {t('Hideout profit')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-tasks" data-targetid="tasks">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-tasks" data-targetid="tasks">
                         <Link
                             to="/tasks"
                             //onClick={setIsOpen.bind(this, false)}
@@ -279,7 +279,7 @@ const Menu = () => {
                             {t('Tasks')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-loot-tier" data-targetid="loot-tier">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-loot-tier" data-targetid="loot-tier">
                         <Link
                             to="/loot-tier/"
                             //onClick={setIsOpen.bind(this, false)}
@@ -287,7 +287,7 @@ const Menu = () => {
                             {t('Loot tiers')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-hideout-costs" data-targetid="hideout">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-hideout-costs" data-targetid="hideout">
                         <Link
                             to="/hideout"
                             //onClick={setIsOpen.bind(this, false)}
@@ -295,7 +295,7 @@ const Menu = () => {
                             {t('Hideout build costs')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-wipe-length" data-targetid="wipe-length">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-wipe-length" data-targetid="wipe-length">
                         <Link
                             to="/wipe-length"
                             //onClick={setIsOpen.bind(this, false)}
@@ -303,7 +303,7 @@ const Menu = () => {
                             {t('Wipe length')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-bitcoin-farm" data-targetid="bitcoin">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-bitcoin-farm" data-targetid="bitcoin">
                         <Link
                             to="/bitcoin-farm-calculator"
                             //onClick={setIsOpen.bind(this, false)}
@@ -311,7 +311,7 @@ const Menu = () => {
                             {t('Bitcoin Farm Profit')}
                         </Link>
                     </li>
-                    <li className="submenu-wrapper submenu-items" key="menu-api" data-targetid="api">
+                    <li className="submenu-wrapper submenu-items overflow-member" key="menu-api" data-targetid="api">
                         <Link
                             to="/api/"
                             //onClick={setIsOpen.bind(this, false)}
diff --git a/src/components/menu/intersection-observer-wrapper.js b/src/components/menu/intersection-observer-wrapper.js
index d84206457..d0da80e97 100644
--- a/src/components/menu/intersection-observer-wrapper.js
+++ b/src/components/menu/intersection-observer-wrapper.js
@@ -47,7 +47,7 @@ export default function IntersectionObserverWrapper({ children }) {
           {React.Children.map(children, (child) => {
             return React.cloneElement(child, {
               className: classnames(child.props.className, {
-                'visible-menu-item': !!visibilityMap[child.props["data-targetid"]],
+                'visible-menu-item visible-menu-all': !!visibilityMap[child.props["data-targetid"]],
                 'invisible-menu-item': !visibilityMap[child.props["data-targetid"]],
                 //[classes.showOverflow]: visible && showOverflow
               })
diff --git a/src/components/menu/overflow-menu.js b/src/components/menu/overflow-menu.js
index e144a128b..abe752a16 100644
--- a/src/components/menu/overflow-menu.js
+++ b/src/components/menu/overflow-menu.js
@@ -28,9 +28,7 @@ export default function OverflowMenu({ children, className, visibilityMap }) {
         Object.values(visibilityMap).some((v) => v === false),
     [visibilityMap]);
     
-    if (!shouldShowMenu) {
-        return null;
-    }
+    className += ` ${shouldShowMenu ? 'visible-overflow visible-menu-all' : 'invisible-overflow'}`;
   return (
     <li className={className}>
       <Link

From 7e1b076f4f54455f9428b0e9a811b1850c4949ce Mon Sep 17 00:00:00 2001
From: Razzmatazz <razz@badkarma.xyz>
Date: Fri, 1 Dec 2023 12:05:41 -0600
Subject: [PATCH 2/3] hide ammo and items submenus when in overflow

---
 src/components/menu/index.css | 8 ++++++++
 src/components/menu/index.js  | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index d53eb69f6..31a52156d 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -311,3 +311,11 @@ nav.navigation ul.menu li.more-dropdown-wrapper:not(:nth-child(1 of li.visible-m
 nav.navigation ul.menu li:nth-last-child(1 of li.visible-menu-item):not(:nth-last-child(1 of li.overflow-member)) {
     padding-right: 50px;
 }
+
+.MuiPopover-root svg.icon-with-text {
+    color: #9a8866;
+}
+
+.MuiPopover-root .overflow-hidden {
+    display: none;
+}
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index fd083bec3..186a21740 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -151,7 +151,7 @@ const Menu = () => {
                     </li>
                     <li className="submenu-wrapper overflow-member" key="menu-ammo" data-targetid="ammo">
                         <Link to="/ammo/">{t('Ammo')}</Link>
-                        <ul style={{left: -20}}>
+                        <ul style={{left: -20}} className="overflow-hidden">
                             {getAmmoMenu()}
                         </ul>
                     </li>
@@ -187,7 +187,7 @@ const Menu = () => {
                     </li>
                     <li className="submenu-wrapper submenu-items overflow-member" key="menu-items" data-targetid="items">
                         <Link to="/items/">{t('Items')}</Link>
-                        <ul>
+                        <ul className="overflow-hidden">
                             {categoryPages.map((categoryPage) => (
                                 <MenuItem
                                     displayText={t(categoryPage.displayText)}

From 8a07bf2f33491d203850ff7f525822781c62c7b0 Mon Sep 17 00:00:00 2001
From: Razzmatazz <razz@badkarma.xyz>
Date: Fri, 1 Dec 2023 13:01:15 -0600
Subject: [PATCH 3/3] hide "more" maps menu item in overflow

---
 src/components/menu/MenuItem.jsx | 2 +-
 src/components/menu/index.js     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/menu/MenuItem.jsx b/src/components/menu/MenuItem.jsx
index 17dd46e2d..936bca432 100644
--- a/src/components/menu/MenuItem.jsx
+++ b/src/components/menu/MenuItem.jsx
@@ -74,7 +74,7 @@ function MenuItem(props) {
     }
 
     return (
-        <li>
+        <li class={props.className}>
             {getCheckbox()}
             {getIcon()}
             <Link to={props.to} onClick={handleClick}>
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
index 186a21740..16c521c55 100644
--- a/src/components/menu/index.js
+++ b/src/components/menu/index.js
@@ -179,6 +179,7 @@ const Menu = () => {
                                 />
                             ))}
                             <MenuItem
+                                className="overflow-hidden"
                                 displayText={t('More...')}
                                 key={'menu-item-maps-more'}
                                 to={'/maps'}