Navbar dla OrderMessage i OrderList

src/components/OrderList.vue

@@ -11,8 +11,8 @@
         <br />
         Dodano: {{ new Date(order.createdAt).toLocaleString('pl-PL') }}
         <br />
-        <button class="g-button" @click="selectLocalOrder(order)">Wybierz</button>
-        <button class="g-button" @click="removeOrder(order)">Usuń</button>
+        <button class="g-button action" @click="selectLocalOrder(order)">Wybierz</button>
+        <button class="g-button action" @click="removeOrder(order)">Usuń</button>
       </li>
     </ul>
   </section>

src/components/OrderMessage.vue

@@ -5,8 +5,8 @@
     <div class="message_body" v-html="fullOrderMessage"></div>
 
     <div class="message_actions">
-      <button class="g-button" @click="saveOrder"><img :src="saveIcon" alt="save icon" />Zapisz ten rozkaz</button>
-      <button class="g-button" @click="copyMessage">Kopiuj wiadomość rozkazu</button>
+      <button class="g-button action" @click="saveOrder"><img :src="saveIcon" alt="save icon" />Zapisz ten rozkaz</button>
+      <button class="g-button action" @click="copyMessage">Kopiuj wiadomość rozkazu</button>
     </div>
 
     <transition name="monit-anim">

src/components/SideBar.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="sidebar">
     <div class="sidebar_content">
-      <button class="option-save" @click="toggleOrderMode" :data-selected="store.orderMode == 'OrderList'">
+      <!-- <button class="option-save" @click="toggleOrderMode" :data-selected="store.orderMode == 'OrderList'">
         <img :src="saveIcon" alt="save icon" />
-      </button>
+      </button> -->
 
       <button
         v-for="orderType in orderTypeList"
@@ -23,13 +23,9 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store/store';
 
-import saveIcon from '../assets/icon-save.svg';
-
 export default defineComponent({
   data() {
     return {
-      saveIcon,
-
       orderTypeList: [
         {
           id: 'orderN',
@@ -56,10 +52,6 @@ export default defineComponent({
     selectOrderType(type: any) {
       this.store.chosenOrderType = type;
     },
-
-    toggleOrderMode() {
-      this.store.orderMode = this.store.orderMode == 'OrderMessage' ? 'OrderList' : 'OrderMessage';
-    },
   },
 });
 </script>

src/mixins/orderStorageMixin.ts

@@ -66,6 +66,7 @@ export default defineComponent({
 
     selectLocalOrder(order: LocalStorageOrder) {
       this.store.chosenOrderType = order.orderType;
+
       const localOrder = JSON.parse(JSON.stringify(order));
       const localOrderBody = localOrder['orderBody'];
       const localOrderFooter = localOrder['orderFooter'];
@@ -105,6 +106,8 @@ export default defineComponent({
       for (let key in this.store.orderFooter) {
         (this.store.orderFooter as any)[key] = localOrderFooter[key];
       }
+
+      this.store.orderMode = 'OrderMessage';
     },
   },
 });

src/styles/global.scss

@@ -26,20 +26,31 @@ button {
   cursor: pointer;
   font-weight: bold;
   font-size: 1em;
+}
 
-  &.g-button {
+button.g-button {
+  text-align: center;
+  color: white;
+
+  &.action {
     outline: 2px solid white;
-    background: none;
-    color: white;
-
-    text-align: center;
-
     padding: 0.5em;
+
+    &:focus-visible {
+      outline: 2px solid $accentCol;
+    }
   }
 
-  &:focus-visible {
-    outline: 2px solid $accentCol;
-    color: $accentCol;
+  &.option {
+    margin: 0 0.25em;
+
+    &:focus-visible {
+      outline: 1px solid $accentCol;
+    }
+
+    &[data-active='true'] {
+      color: $accentCol;
+    }
   }
 }
 

src/views/Home.vue

@@ -8,6 +8,20 @@
       </div>
 
       <div class="message_container">
+        <div class="message_nav">
+          <span v-for="(action, i) in navActions">
+            <b v-if="i > 0">&bull;</b>
+
+            <button
+              class="g-button option"
+              :data-active="store.orderMode == action.mode"
+              @click="selectOrderMode(action.mode)"
+            >
+              {{ action.value }}
+            </button>
+          </span>
+        </div>
+
         <transition name="order-anim" mode="out-in">
           <keep-alive>
             <Component :is="orderModeComponent" />
@@ -29,6 +43,29 @@ import { useStore } from '../store/store';
 export default defineComponent({
   components: { OrderVue, SideBar },
 
+  data() {
+    return {
+      navActions: [
+        {
+          mode: 'OrderMessage',
+          value: 'TREŚĆ ROZKAZU',
+        },
+        {
+          mode: 'OrderList',
+          value: 'ZAPISANE ROZKAZY',
+        },
+      ],
+    };
+  },
+
+  methods: {
+    selectOrderMode(mode: string) {
+      console.log(mode);
+
+      this.store.orderMode = mode;
+    },
+  },
+
   setup() {
     return {
       store: useStore(),
@@ -74,12 +111,18 @@ export default defineComponent({
     margin-bottom: 1em;
 
     @media screen and (max-width: 550px) {
-      margin: 0.5em;
+      margin: 1em;
     }
   }
 
   .message_container {
     width: 500px;
   }
+
+  .message_nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>