fixes: various bits fixed / improved based on fedback

src/components/AppFooter.vue

@@ -1,6 +1,14 @@
 <script setup>
 import { Github, Facebook, Instagram, createLucideIcon } from 'lucide-vue-next'
-import { RouterLink } from 'vue-router'
+import { getLocalizedPath } from '@/utils/locale'
+import { RouterLink, useRoute } from 'vue-router'
+
+const route = useRoute()
+
+// Generate localized route
+function localRoute(path) {
+  return getLocalizedPath(path, route.params.locale)
+}
 
 const XIcon = createLucideIcon('X', [
   [
@@ -183,7 +191,7 @@ const TikTokIcon = createLucideIcon('TikTok', [
           <p>&copy; 2019 - {{ new Date().getFullYear() }} | BeamMP Mod Team All Rights Reserved</p>
           <div class="flex gap-3">
             <RouterLink
-              to="/about"
+              :to="localRoute('about')"
               class="text-neutral-700 hover:text-beammp-blue transition-colors dark:text-neutral-500 dark:hover:text-blue-400"
             >
               {{ $t('message.footer.about') }}

src/components/AppNavigation.vue

@@ -33,31 +33,30 @@ 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"
+    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"
   >
-    <nav class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
+    <nav class="max-w-7xl mx-auto px-3 sm:px-4 h-16 flex items-center justify-between gap-2 sm:gap-4">
       <RouterLink
         :to="localRoute('')"
-        class="flex items-center gap-2 shrink-0"
+        class="flex items-center gap-2 flex-shrink-0"
         @click="closeMobileMenu"
       >
         <!-- Light mode logo (black) -->
         <img
           src="/src/assets/BeamMP_blk.png"
           alt="BeamMP Logo"
-          class="h-16 w-auto shrink-0 dark:hidden"
+          class="h-12 sm:h-14 w-auto flex-shrink-0 dark:hidden"
         />
         <!-- Dark mode logo (white) -->
         <img
           src="/src/assets/BeamMP_wht.png"
           alt="BeamMP Logo"
-          class="h-16 w-auto shrink-0 hidden dark:block"
+          class="h-12 sm:h-14 w-auto flex-shrink-0 hidden dark:block"
         />
       </RouterLink>
 
       <!-- Desktop Navigation -->
-      <!-- Switch to mobile earlier (avoid logo crowding) -->
-      <div class="hidden lg:flex items-center gap-4">
+      <div class="hidden xl:flex items-center gap-1 flex-1 justify-end overflow-x-auto">
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem>
@@ -194,14 +193,14 @@ function localRoute(path) {
             </NavigationMenuItem>
           </NavigationMenuList>
         </NavigationMenu>
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-1 sm:gap-2 flex-shrink-0">
           <LanguageSelector />
           <ThemeToggle />
         </div>
       </div>
 
       <!-- Mobile Menu Button and Theme Toggle -->
-      <div class="flex lg:hidden items-center gap-2">
+      <div class="flex xl:hidden items-center gap-1 sm:gap-2 flex-shrink-0">
         <LanguageSelector />
         <ThemeToggle />
         <button
@@ -226,7 +225,7 @@ function localRoute(path) {
     >
       <div
         v-if="mobileMenuOpen"
-        class="md:hidden border-t border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
+        class="xl: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
@@ -275,6 +274,15 @@ 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"

src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Check } from "lucide-vue-next";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  defaultValue: { type: [Boolean, String], required: false },
+  modelValue: { type: [Boolean, String, null], required: false },
+  disabled: { type: Boolean, required: false },
+  value: { type: null, required: false },
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  class: { type: null, required: false },
+});
+const emits = defineEmits(["update:modelValue"]);
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        props.class,
+      )
+    "
+  >
+    <CheckboxIndicator class="grid place-content-center text-current">
+      <slot>
+        <Check class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

src/components/ui/checkbox/index.js

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue";