Componentalization

resources/js/components/Header.vue

@@ -10,7 +10,7 @@
             </nav>
 
             <div class="nav-menu">
-                <a href="#about" class="nav-link">About</a>
+                <a href="/about" class="nav-link">About</a>
                 <a href="#contact" class="nav-link">Contact</a>
                 <div
                     class="dropdown"
@@ -32,7 +32,7 @@
 
                     <div class="dropdown-menu" :class="{ 'is-visible': isDropdownVisible }">
                         <a
-                            v-for="continent in sortedContinents"
+                            v-for="continent in continents_with_tours"
                             :key="continent.id"
                             :href="`/tours/${continent.internal_name}`"
                         >
@@ -48,15 +48,10 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, computed, ref } from 'vue';
 import { usePage} from "@inertiajs/vue3";
-import {Continent, GlobalProperties} from "@/types";
+import {GlobalProperties} from "@/types";
 
 const { continents_with_tours } = usePage().props as unknown as GlobalProperties
 
-
-const sortedContinents = computed(() => {
-    return [...continents_with_tours].sort((a, b) => a.name.localeCompare(b.name))
-})
-
 const dropdownOpen = ref(false)
 const windowWidth = ref(window.innerWidth);
 
@@ -128,7 +123,6 @@ const initDropdown = (): void => {
         }
     });
 
-    // Close dropdown when pressing escape
     document.addEventListener('keydown', (e: KeyboardEvent) => {
         if (e.key === 'Escape') {
             dropdown.classList.remove('open');