fix(nav): desktop 'More' was clipped; mobile menu never listed Marketplace
- Desktop: the nav's overflow-x-auto clips its trailing item when the nav grows, which is exactly the 'More' menu. Widened the header (max-w-[1700px] vs the 1400px page container), tightened nav padding to px-3 and nowrap. 'More' is fully visible at 1280/1440/2000px with Marketplace pinned (was missing). - Mobile: the burger menu hard-coded only Map/Lab/Events/Crews + a few extras, so Marketplace (and Mints) were unreachable. It now appends every nav-catalog item not already listed, giving mobile/desktop parity (Marketplace, Mints, …).
This commit is contained in:
parent
0b5230d4ab
commit
4e4c50ab71
2 changed files with 39 additions and 3 deletions
|
|
@ -234,6 +234,15 @@ session with **no other memory of this project**. So:
|
|||
`isInteractiveSigner` is true, so merely opening the notification bell (which
|
||||
marks read) no longer pops Amber twice (encrypt + sign). Interactive signers
|
||||
only prompt for real signed actions.
|
||||
- **Nav parity (fixed 2026-09-27):** the desktop header is `max-w-[1700px]`
|
||||
(wider than the page `container`'s 1400px) and nav items are `px-3` +
|
||||
`whitespace-nowrap`; the nav keeps `min-w-0 overflow-x-auto scrollbar-hide`, so
|
||||
**if it ever overflows it clips the TRAILING item — i.e. the "More" menu**
|
||||
(this is exactly how "More" vanished when MARKETPLACE replaced MINTS). Keep the
|
||||
header wide / padding tight; don't let the nav grow without room. The mobile
|
||||
burger menu (`MOBILE_MENU_LISTED_HREFS`) now **appends catalog items that
|
||||
aren't hard-coded**, so Marketplace/Mints (and any future section) are always
|
||||
reachable on mobile — don't re-hardcode only a subset.
|
||||
- **Mints directory**: `/mints` page lists Cashu mints from the community
|
||||
**MintRadar** project. MintRadar has **no CORS**, so it's fetched same-origin
|
||||
at `/api/mints/*` — prod proxies via `public/_redirects` (`/api/mints/* →
|
||||
|
|
|
|||
|
|
@ -118,6 +118,17 @@ const navItemKeys = [
|
|||
{ href: '/crews', labelKey: 'nav.crews', icon: Users },
|
||||
];
|
||||
|
||||
/**
|
||||
* Hrefs the mobile burger menu already renders by hand. Anything else in the
|
||||
* nav catalog (Marketplace, Mints, …) is appended from the catalog itself, so a
|
||||
* section can never be missing on mobile just because it wasn't hard-coded.
|
||||
*/
|
||||
const MOBILE_MENU_LISTED_HREFS = [
|
||||
'/', '/lab', '/events', '/crews', '/skaters', '/messages', '/contacts',
|
||||
'/collections', '/stash', '/stats', '/glossary', '/about', '/card',
|
||||
'/supporters', '/newsletter', '/settings', '/wallet',
|
||||
];
|
||||
|
||||
function NavLink({
|
||||
href,
|
||||
label,
|
||||
|
|
@ -508,7 +519,7 @@ export function Layout({ children, noPadding }: LayoutProps) {
|
|||
const author = useAuthor(user?.pubkey || '');
|
||||
const displayName = author.data?.metadata?.name ?? genUserName(user?.pubkey);
|
||||
const userAvatar = author.data?.metadata?.picture;
|
||||
const { fixedMapTab, middleTabs } = useNavPreferences();
|
||||
const { fixedMapTab, middleTabs, catalog: navCatalog } = useNavPreferences();
|
||||
const {
|
||||
primaryTabs: desktopPrimaryTabs,
|
||||
hiddenIds: desktopHiddenIds,
|
||||
|
|
@ -534,7 +545,7 @@ export function Layout({ children, noPadding }: LayoutProps) {
|
|||
</a>
|
||||
{/* Desktop Header */}
|
||||
<header className="hidden md:flex sticky top-0 z-50 border-b border-red-500/30 bg-black/95 backdrop-blur">
|
||||
<div className="container flex items-center justify-between h-16 px-4 gap-4 xl:gap-8">
|
||||
<div className="mx-auto flex w-full max-w-[1700px] items-center justify-between h-16 px-4 gap-4 xl:gap-8">
|
||||
{/* Brand lockup — `shrink-0` + `whitespace-nowrap` guarantee the
|
||||
logo never gets squeezed into (or glowed over by) the nav. */}
|
||||
<Link to="/" className="flex items-center gap-3 group shrink-0">
|
||||
|
|
@ -557,7 +568,7 @@ export function Layout({ children, noPadding }: LayoutProps) {
|
|||
key={item.id}
|
||||
to={item.href}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-3 xl:px-4 py-2 rounded-lg transition-all duration-200 text-sm font-bold uppercase tracking-wide',
|
||||
'flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200 text-sm font-bold uppercase tracking-wide whitespace-nowrap',
|
||||
isActive(item.href)
|
||||
? 'text-red-500'
|
||||
: 'text-gray-400 hover:text-red-400'
|
||||
|
|
@ -842,6 +853,22 @@ export function Layout({ children, noPadding }: LayoutProps) {
|
|||
isActive={isActive('/skaters')}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
/>
|
||||
{/* Every catalogued section not already listed above, so
|
||||
nothing (Marketplace, Mints, …) is unreachable on mobile.
|
||||
Desktop has the same parity via its "More" menu. */}
|
||||
{navCatalog
|
||||
.filter((tab) => !MOBILE_MENU_LISTED_HREFS.includes(tab.href))
|
||||
.filter((tab) => !tab.authOnly || !!user)
|
||||
.map((tab) => (
|
||||
<NavLink
|
||||
key={tab.id}
|
||||
href={tab.href}
|
||||
label={tab.labelKey ? t(tab.labelKey) : tab.label}
|
||||
icon={tab.icon}
|
||||
isActive={isActive(tab.href)}
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
/>
|
||||
))}
|
||||
{user && (
|
||||
<NavLink
|
||||
href={`/${nip19.npubEncode(user.pubkey)}`}
|
||||
|
|
|
|||
Loading…
Reference in a new issue