hide some text when screen is small

app/src/components/game/ControlPalette.vue

@@ -20,29 +20,31 @@ const continuePlay = async () => {
 </script>
 
 <template>
-  <section class="h-[10%] p-3 grid grid-cols-4 gap-4 place-content-between">
+  <section
+    class="h-fit w-fit px-1 py-1 grid grid-cols-4 gap-2 place-content-between"
+  >
     <button id="survey" class="bg-bg-secondary rounded-lg p-2">
       <a title="Survey" :href="surveyUrl" target="_blank" class="h-5 w-5">
         <font-awesome-icon
           :icon="['fas', 'file-invoice']"
-          class="text-text-primary"
+          class="text-text-primary px-1"
         />
-        <p class="text-text-primary inline ml-1">問卷</p>
+        <p class="text-text-primary inline ml-1 hidden md:flex">問卷</p>
       </a>
     </button>
     <button disabled id="solution" class="bg-bg-disabled rounded-lg p-2">
       <font-awesome-icon
         :icon="['far', 'circle-question']"
-        class="text-text-disabled"
+        class="text-text-disabled px-1"
       />
-      <p class="text-text-disabled inline ml-1">解答</p>
+      <p class="text-text-disabled inline ml-1 hidden md:flex">解答</p>
     </button>
     <button id="reset" class="bg-bg-secondary rounded-lg p-2" @click="reset">
       <font-awesome-icon
         :icon="['fas', 'arrow-rotate-left']"
-        class="text-text-primary"
+        class="text-text-primary px-1"
       />
-      <p class="text-text-primary inline ml-1">重來</p>
+      <p class="text-text-primary inline ml-1 hidden md:flex">重來</p>
     </button>
     <button
       id="continue"
@@ -51,9 +53,9 @@ const continuePlay = async () => {
     >
       <font-awesome-icon
         :icon="['far', 'circle-right']"
-        class="text-text-primary"
+        class="text-text-primary px-1"
       />
-      <p class="text-text-primary inline ml-1">繼續</p>
+      <p class="text-text-primary inline ml-1 hidden md:flex">繼續</p>
     </button>
   </section>
 </template>

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>

app/src/views/GamePage.vue

@@ -71,7 +71,7 @@ onMounted(async () => {
       </section> -->
     </div>
     <!-- Terminal and Hint -->
-    <div class="bg-bg h-full w-1/2 rounded-lg">
+    <div class="bg-bg h-full rounded-lg w-1/2">
       <section id="hint" class="h-3/5">
         <HintPart />
       </section>