Skip to content

Commit

Permalink
Merge pull request #767 from the-hideout/overflow-menu-fix
Browse files Browse the repository at this point in the history 
Make overflow menu more reliable
  • Loading branch information
@Razzmatazzz
Razzmatazzz authored Dec 2, 2023
2 parents d8d105c + cf17fd3 commit e7d4c4a
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/components/menu/MenuItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ function MenuItem(props) {
}

return (
<li>
<li class={props.className}>
{getCheckbox()}
{getIcon()}
<Link to={props.to} onClick={handleClick}>
Expand Down
21 changes: 19 additions & 2 deletions src/components/menu/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -302,3 +302,20 @@ 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;
}

.MuiPopover-root svg.icon-with-text {
color: #9a8866;
}

.MuiPopover-root .overflow-hidden {
display: none;
}
37 changes: 19 additions & 18 deletions src/components/menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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/"
Expand All @@ -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/"
Expand All @@ -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}}>
<ul style={{left: -20}} className="overflow-hidden">
{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) => {
Expand All @@ -179,15 +179,16 @@ const Menu = () => {
/>
))}
<MenuItem
className="overflow-hidden"
displayText={t('More...')}
key={'menu-item-maps-more'}
to={'/maps'}
/>
</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>
<ul className="overflow-hidden">
{categoryPages.map((categoryPage) => (
<MenuItem
displayText={t(categoryPage.displayText)}
Expand All @@ -198,7 +199,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
Expand Down Expand Up @@ -245,7 +246,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 => {
Expand All @@ -255,63 +256,63 @@ 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)}
>
{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)}
>
{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)}
>
{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)}
>
{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)}
>
{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)}
>
{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)}
>
{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)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/menu/intersection-observer-wrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand Down
4 changes: 1 addition & 3 deletions src/components/menu/overflow-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit e7d4c4a

Please sign in to comment.