Responsywność, sidebar

src/components/Order.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="rozkaz">
-    <OrderNVue v-if="orderType == 'N'" />
-    <OrderSVue v-if="orderType == 'S'" />
+    <keep-alive>
+      <component :is="chosenOrderComponent"></component>
+    </keep-alive>
 
     <section class="info">
       <table class="info-table">
@@ -60,12 +61,6 @@ import OrderSVue from './OrderS.vue';
 export default defineComponent({
   components: { OrderNVue, OrderSVue },
 
-  data() {
-    return {
-      orderType: 'N',
-    };
-  },
-
   setup() {
     const store = useStore();
 
@@ -74,6 +69,12 @@ export default defineComponent({
       info: store.orderInfo,
     };
   },
+
+  computed: {
+    chosenOrderComponent() {
+      return this.store.chosenOrderType == 'OrderS' ? OrderSVue : OrderNVue;
+    },
+  },
 });
 </script>
 
@@ -81,13 +82,15 @@ export default defineComponent({
 @import '../styles/global.scss';
 
 .rozkaz {
-  width: 500px;
+  max-width: 500px;
   background-color: white;
   color: black;
 
   padding: 0.5em;
   box-shadow: 0 0 15px 2px white;
 
+  font-family: initial;
+
   h2 {
     margin: 0;
     padding: 0;
@@ -98,6 +101,10 @@ export default defineComponent({
     border: 2px solid black;
     border-bottom: none;
   }
+
+  @media screen and (max-width: 550px) {
+   font-size: 3vw;
+  }
 }
 
 .flex-row {
@@ -125,9 +132,9 @@ input {
 }
 
 select {
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
-  font-size: 0.8rem;
+  margin-top: 0.5em;
+  margin-right: 0.5em;
+  font-size: 0.8em;
 }
 
 .table-section {

src/components/OrderN.vue

@@ -212,6 +212,8 @@ import { useStore } from '../store/store';
 type OrderRowRange = 1 | 2 | 3 | 4 | 5;
 
 export default defineComponent({
+  name: 'OrderN',
+  
   setup() {
     const store = useStore();
     const order = reactive(store.orderN);

src/components/OrderS.vue

@@ -91,6 +91,8 @@ import { defineComponent } from 'vue';
 import { useStore } from '../store/store';
 
 export default defineComponent({
+  name: 'OrderS',
+
   setup() {
     const store = useStore();
     return {

src/components/SideBar.vue

@@ -0,0 +1,113 @@
+<template>
+  <section class="sidebar">
+    <div class="sidebar_content">
+      <button
+        v-for="orderType in orderTypeList"
+        :key="orderType.id"
+        @click="selectOrderType(orderType.id)"
+        :data-selected="store.chosenOrderType == orderType.id"
+      >
+        {{ orderType.name }}
+
+        <div class="bar"></div>
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store/store';
+
+export default defineComponent({
+  data() {
+    return {
+      orderTypeList: [
+        {
+          id: 'OrderN',
+          name: 'N',
+        },
+        {
+          id: 'OrderS',
+          name: 'S',
+        },
+        {
+          id: 'OrderO',
+          name: 'O',
+        },
+      ],
+    };
+  },
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  methods: {
+    selectOrderType(type: string) {
+      this.store.chosenOrderType = type;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/global.scss';
+
+.sidebar {
+  position: absolute;
+  top: 50%;
+  left: 0;
+
+  transform: translateY(-50%);
+  width: 50px;
+  max-height: 250px;
+  height: 95vh;
+}
+
+.sidebar_content {
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  gap: 0.25em;
+
+  font-size: 1.5em;
+  font-weight: bold;
+  height: 100%;
+
+  & > button {
+    position: relative;
+    overflow: hidden;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: white;
+    background-color: #000000aa;
+
+
+    .bar {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      height: 100%;
+      width: 4px;
+
+      transform: translateX(100%);
+      transition: all 200ms ease-in-out;
+    }
+
+    &[data-selected='true'] .bar {
+      transform: translateX(0);
+
+      background-color: $accentCol;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>