hide some text when screen is small

app/src/components/header/HeaderPart.vue

@@ -11,6 +11,19 @@ defineProps({
     required: false,
   },
 })
+let showMenu = false
+const ToggleMenu = () => {
+  console.log(showMenu)
+  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
@@ -34,8 +47,27 @@ defineProps({
         {{ title }}
       </p>
     </div>
-    <div class="w-full flex gap-3 items-center justify-end">
+    <div class="w-full flex gap-3 items-center justify-end hidden sm:flex">
       <component :is="headerComponent" />
     </div>
+    <button class="flex items-center justify-end sm:hidden h-5 w-5">
+      <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>