add GH release points to timeline & fix padding of nav and logo

This commit is contained in:
Starystars67
2025-12-29 18:52:34 +00:00
parent 6ed1bf7352
commit df371568c7
3 changed files with 74 additions and 24 deletions

View File

@@ -33,30 +33,31 @@ function localRoute(path) {
<template>
<header
class="border-b border-neutral-200 dark:border-neutral-800 bg-white/80 dark:bg-neutral-900/70 backdrop-blur sticky top-0 z-20 overflow-hidden"
class="border-b border-neutral-200 dark:border-neutral-800 bg-white/80 dark:bg-neutral-900/70 backdrop-blur sticky top-0 z-20"
>
<nav class="max-w-7xl mx-auto px-3 sm:px-4 h-16 flex items-center justify-between gap-2 sm:gap-4">
<nav class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
<RouterLink
:to="localRoute('')"
class="flex items-center gap-2 flex-shrink-0"
class="flex items-center gap-2 shrink-0 mr-4"
@click="closeMobileMenu"
>
<!-- Light mode logo (black) -->
<img
src="/src/assets/BeamMP_blk.png"
alt="BeamMP Logo"
class="h-12 sm:h-14 w-auto flex-shrink-0 dark:hidden"
class="h-16 w-auto shrink-0 dark:hidden"
/>
<!-- Dark mode logo (white) -->
<img
src="/src/assets/BeamMP_wht.png"
alt="BeamMP Logo"
class="h-12 sm:h-14 w-auto flex-shrink-0 hidden dark:block"
class="h-16 w-auto shrink-0 hidden dark:block"
/>
</RouterLink>
<!-- Desktop Navigation -->
<div class="hidden xl:flex items-center gap-1 flex-1 justify-end overflow-x-auto">
<!-- Switch to mobile earlier (avoid logo crowding) -->
<div class="hidden xl:flex items-center gap-4">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
@@ -155,6 +156,24 @@ function localRoute(path) {
</a>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink as-child>
<a
href="https://store.beammp.com"
target="_blank"
rel="noopener noreferrer"
aria-label="External link"
:class="
cn(
navigationMenuTriggerStyle(),
'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white'
)
"
>
{{ $t('message.nav.store') }}
</a>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink as-child>
<a
@@ -200,7 +219,7 @@ function localRoute(path) {
</div>
<!-- Mobile Menu Button and Theme Toggle -->
<div class="flex xl:hidden items-center gap-1 sm:gap-2 flex-shrink-0">
<div class="flex xl:hidden items-center gap-2">
<LanguageSelector />
<ThemeToggle />
<button
@@ -225,7 +244,7 @@ function localRoute(path) {
>
<div
v-if="mobileMenuOpen"
class="xl:hidden border-t border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
class="md:hidden border-t border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
>
<div class="px-4 py-3 space-y-1">
<RouterLink
@@ -274,15 +293,6 @@ function localRoute(path) {
>
{{ $t('message.nav.docs') }}
</a>
<a
href="https://store.beammp.com"
target="_blank"
rel="noopener noreferrer"
class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
@click="closeMobileMenu"
>
{{ $t('message.nav.store') }}
</a>
<a
href="https://github.com/BeamMP/BeamMP"
target="_blank"