Change SizeIndicator modified with v-if

src/views/tools/SizeIndicator.vue

@@ -1,25 +1,72 @@
 <template>
+  <div>
+    <div v-if="screenSize === 'sm'" class="size-code bg-blue-500 text-white">
+      sm
+    </div>
 
-  <div class="size-code sm:block md:hidden bg-blue-500 text-white">
+    <div v-if="screenSize === 'md'" class="size-code bg-green-500 text-white">
-    sm
+      md
+    </div>
+
+    <div v-if="screenSize === 'lg'" class="size-code bg-yellow-500 text-black">
+      lg
+    </div>
+
+    <div v-if="screenSize === 'xl'" class="size-code bg-red-500 text-white">
+      xl
+    </div>
   </div>
-
-  <div class="size-code md:block lg:hidden bg-green-500 text-white">
-    md
-  </div>
-
-  <div class="size-code lg:block xl:hidden bg-yellow-500 text-black">
-    lg
-  </div>
-
-  <div class="size-code xl:block bg-red-500 text-white">
-    xl
-  </div>
-  
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      screenSize: '',
+    };
+  },
+  mounted() {
+    this.detectScreenSize();
+    window.addEventListener('resize', this.detectScreenSize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.detectScreenSize);
+  },
+  methods: {
+    detectScreenSize() {
+      const width = window.innerWidth;
+
+      if (width < 640) {
+        this.screenSize = 'sm';
+      } else if (width >= 640 && width < 1024) {
+        this.screenSize = 'md';
+      } else if (width >= 1024 && width < 1280) {
+        this.screenSize = 'lg';
+      } else {
+        this.screenSize = 'xl';
+      }
+    },
+  },
+};
+</script>
+
 <style scoped>
 .size-code {
-  @apply fixed bottom-0 left-0 z-50 rounded p-2 m-2 w-9 h-9 text-center content-center capitalize font-mono font-semibold
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 50;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: monospace;
+  font-weight: 600;
+  text-transform: capitalize;
+  border-radius: 0.25rem;
 }
 </style>