diff --git a/app/features/tournament/components/TournamentNav.module.css b/app/features/tournament/components/TournamentNav.module.css index 5267abec9..bad3812b1 100644 --- a/app/features/tournament/components/TournamentNav.module.css +++ b/app/features/tournament/components/TournamentNav.module.css @@ -67,7 +67,7 @@ margin: 0; padding: 0; display: flex; - gap: 4px; + gap: var(--s-0-5); flex-wrap: nowrap; white-space: nowrap; } @@ -88,6 +88,7 @@ font-weight: var(--weight-semi); text-decoration: none; cursor: pointer; + min-width: max-content; &:hover { background-color: var(--color-bg-high); @@ -103,6 +104,7 @@ display: inline-flex; align-items: center; justify-content: center; + flex-shrink: 0; } .icon > svg { diff --git a/app/features/tournament/components/TournamentNav.tsx b/app/features/tournament/components/TournamentNav.tsx index e0a7ae883..c2a364e18 100644 --- a/app/features/tournament/components/TournamentNav.tsx +++ b/app/features/tournament/components/TournamentNav.tsx @@ -55,19 +55,15 @@ const PRIORITY_ORDER: NavItemKey[] = [ "register", "lfg", "brackets", + "results", "teams", "divisions", "streams", - "results", "rules", "seeds", "admin", ]; -// xxx: icons shrinking -// xxx: sticky for desktop -// xxx: close popover when changing page - export function TournamentNav({ tournament, hasChildTournaments, @@ -80,6 +76,7 @@ export function TournamentNav({ const { visibleCount, containerRef, measureRef } = useNavOverflow( navItems.length, ); + const [overflowOpen, setOverflowOpen] = React.useState(false); const overflowItems = navItems.slice(visibleCount); @@ -123,9 +120,12 @@ export function TournamentNav({ {overflowItems.length > 0 ? ( } aria-label={t("tournament:nav.moreItems")} className={styles.hamburger} @@ -135,7 +135,11 @@ export function TournamentNav({ @@ -281,9 +285,11 @@ function useNavItems({ function NavItemLink({ item, overflow = false, + onNavigate, }: { item: NavItem; overflow?: boolean; + onNavigate?: () => void; }) { return (