feat: title in reset menu if mobile viewport

src/components/MenuReset.vue

@@ -1,42 +1,47 @@
 <script setup>
   import { globalStore } from "../stores/index.js";
+  import { defineProps } from "vue";
 
+  const props = defineProps(['windowWidth']);
   const store = globalStore();
 </script>
 
 <template>
   <div class="reset-menu">
-    <div class="form-field">
-      <label>
-        loop
-        <input
-          :value="store.loop"
-          type="checkbox"
-          :checked="store.loop"
-          @input="store.toggleLoop()"
-        />
-      </label>
+    <div class="desktop-title" v-if="windowWidth >= 800">Cellular Automata Explorer</div>
+    <div class="reset-input">
+      <div class="loop">
+        <label>
+          loop
+          <input
+            :value="store.loop"
+            type="checkbox"
+            :checked="store.loop"
+            @input="store.toggleLoop()"
+          />
+        </label>
+      </div>
+      <input
+        type="button"
+        name="next"
+        class="next"
+        value="next"
+        @click="store.toggleNext()"
+      />
+      <input
+        type="button"
+        name="stop"
+        class="stop"
+        value="stop"
+        @click="store.toggleStop()"
+      />
+      <input
+        type="button"
+        name="reset"
+        class="reset"
+        value="reset"
+        @click="store.toggleReset()"
+      />
     </div>
-    <input
-      type="button"
-      name="next"
-      class="next"
-      value="next"
-      @click="store.toggleNext()"
-    />
-    <input
-      type="button"
-      name="stop"
-      class="stop"
-      value="stop"
-      @click="store.toggleStop()"
-    />
-    <input
-      type="button"
-      name="reset"
-      class="reset"
-      value="reset"
-      @click="store.toggleReset()"
-    />
   </div>
 </template>