mobile menu (but not justify end while bigger screen, still solving)

app/src/components/header/HeaderPart.vue

@@ -1,5 +1,5 @@
-<script setup>
+<script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, ref } from 'vue'
 
 defineProps({
   title: {
@@ -11,30 +11,20 @@ defineProps({
     required: false,
   },
 })
-let showMenu = false
+const menuOpen = ref(false)
-const ToggleMenu = () => {
+const toggleMenu = () => {
-  console.log(showMenu)
+  menuOpen.value = !menuOpen.value
-  showMenu = true
-  console.log(showMenu)
-}
-const hideMenu = () => {
-  showMenu = false
-}
-const handleItemClick = (item) => {
-  console.log('Clicked:', item)
-  // Add your logic for handling item click here
 }
 </script>
 <template>
   <div
-    id="header"
+    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center sm:justify-start"
-    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center"
   >
-    <div class="flex flex-row items-center gap-3">
+    <div class="flex flex-row items-center gap-3" :class="{ hidden: menuOpen }">
       <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
       <RouterLink
         to="/"
-        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
+        class="text-text-primary inline-block font-bold whitespace-nowrap pt-1 transition ease-in-out hover:scale-110 duration-300"
         style="font-size: 2vh"
       >
         Linux Odyssey
@@ -47,27 +37,23 @@ const handleItemClick = (item) => {
         {{ title }}
       </p>
     </div>
-    <div class="w-full flex gap-3 items-center justify-end hidden sm:flex">
+    <div
+      class="w-full flex flex-col gap-3 items-center justify-end sm:w-auto sm:flex-row sm:block sm:ml-6"
+      :class="{ hidden: !menuOpen }"
+    >
       <component :is="headerComponent" />
     </div>
-    <button class="flex items-center justify-end sm:hidden h-5 w-5">
+    <button
+      type="button"
+      class="flex items-center justify-end h-5 w-5 rounded-md sm:hidden"
+      aria-controls="mobile-menu"
+      aria-expanded="false"
+      @click="toggleMenu"
+    >
       <font-awesome-icon
         :icon="['fas', 'bars']"
         class="text-text-primary h-full w-full"
-        @click="ToggleMenu"
       />
     </button>
   </div>
-  <div v-if="showMenu" class="bg-bg-primary w-full h-1/2 z-50">
-    <!-- Menu items -->
-    <ul>
-      <li
-        v-for="item in menuItems"
-        :key="item.id"
-        @click="handleItemClick(item)"
-      >
-        {{ item.name }}
-      </li>
-    </ul>
-  </div>
 </template>