Dodano listę wszystkich scenerii

src/components/ui/Options.vue

@@ -1,20 +1,14 @@
 <template>
   <div class="options">
     <div class="option-buttons">
-      <button
-        class="button-filters"
-        :class="{'open': filtersOpen}"
-        @click="filtersOpen = !filtersOpen"
-      >
+      <button class="button" :class="{'open': filtersOpen}" @click="filtersOpen = !filtersOpen">
         <img :src="require('@/assets/icon-filter2.svg')" alt="icon-filter" /> FILTRY
       </button>
     </div>
 
-    <transition name="slide">
-      <keep-alive>
-        <ListFilter v-if="filtersOpen" :exit="() => filtersOpen = !filtersOpen" />
-      </keep-alive>
-    </transition>
+    <keep-alive>
+      <ListFilter v-if="filtersOpen" :exit="() => filtersOpen = !filtersOpen" />
+    </keep-alive>
   </div>
 </template>
 
@@ -38,36 +32,15 @@ export default Vue.extend({
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
 
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-
-.slide-enter,
-.slide-leave-to {
-  transform: translate(-40%, -50%);
-  opacity: 0;
-}
-
 .options {
   font-size: calc(0.6rem + 0.9vw);
-
-  // display: flex;
 }
 
-button {
+.button {
   font-size: 0.8em;
-  padding: 0.3em;
 
   img {
     width: 1.3em;
-    margin: 0.2em;
-  }
-
-  &.open {
-    color: $accentCol;
-    border: none;
-    font-weight: bold;
   }
 }
 </style>