Add back button for segments

showbits-thermal-printer-ui/src/components/CSegment.vue

@@ -6,21 +6,55 @@ const mode = ref<"text">();
 </script>
 
 <template>
-  <CSegmentText v-if="mode === 'text'" />
+  <div class="outer">
-  <section v-else class="choose">
+    <button v-if="mode" class="close" @click="mode = undefined">X</button>
-    <p>What do you want to print?</p>
+    <CSegmentText v-if="mode === 'text'" />
-    <div class="list">
+    <section v-else class="choose">
-      <button @click="mode = 'text'">Calendar</button>
+      <p>What do you want to print?</p>
-      <button @click="mode = 'text'">Cellular Automaton</button>
+      <div class="list">
-      <button @click="mode = 'text'">Chat Message</button>
+        <button @click="mode = 'text'">Calendar</button>
-      <button @click="mode = 'text'">Easter Egg</button>
+        <button @click="mode = 'text'">Cellular Automaton</button>
-      <button @click="mode = 'text'">Text</button>
+        <button @click="mode = 'text'">Chat Message</button>
-      <button @click="mode = 'text'">Tic Tac Toe</button>
+        <button @click="mode = 'text'">Easter Egg</button>
-    </div>
+        <button @click="mode = 'text'">Text</button>
-  </section>
+        <button @click="mode = 'text'">Tic Tac Toe</button>
+      </div>
+    </section>
+  </div>
 </template>
 
 <style scoped>
+.outer {
+  position: relative;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  width: 24px;
+  height: 24px;
+
+  color: white;
+  background-color: black;
+
+  border: 2px solid black;
+  border-radius: 100px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close:hover {
+  background-color: #444;
+}
+
+.close:active {
+  background-color: #666;
+}
+
 p {
   margin-bottom: 1ch;
 }