🧹 moved files around

src/components/ui/NavigationIcon.vue

@@ -1,81 +0,0 @@
-<template>
-  <router-link
-    :to="{ path: route.route }"
-    :key="route.title"
-    v-if="route.requiresAuth == undefined || (route.requiresAuth && loggedIn)"
-  >
-    <li class="navigation-link" :class="{ active: route.route == active }">
-      <component class="navigation-icon" :is="route.icon"></component>
-      <span>{{ route.title }}</span>
-    </li>
-  </router-link>
-</template>
-
-<script>
-import { mapGetters, mapActions } from "vuex";
-
-export default {
-  name: "NavigationIcons",
-  props: {
-    active: {
-      type: String,
-      required: false
-    },
-    route: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    ...mapGetters("user", ["loggedIn"])
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import "src/scss/media-queries";
-
-.navigation-link {
-  display: grid;
-  place-items: center;
-  min-height: var(--header-size);
-  list-style: none;
-  padding: 1rem 0.15rem;
-  text-align: center;
-  background-color: var(--background-color-secondary);
-  transition: transform 0.3s ease, color 0.3s ease, stoke 0.3s ease,
-    fill 0.3s ease, background-color 0.5s ease;
-
-  &:hover {
-    transform: scale(1.05);
-  }
-
-  &:hover,
-  &.active {
-    background-color: var(--background-color);
-
-    span,
-    .navigation-icon {
-      color: var(--text-color);
-      fill: var(--text-color);
-    }
-  }
-
-  span {
-    text-transform: uppercase;
-    font-size: 11px;
-    margin-top: 0.25rem;
-    color: var(--text-color-70);
-  }
-}
-
-a {
-  text-decoration: none;
-}
-
-.navigation-icon {
-  width: 28px;
-  fill: var(--text-color-70);
-  transition: inherit;
-}
-</style>

src/components/ui/sidebarListElem.vue

@@ -1,82 +0,0 @@
-<template>
-  <li
-    class="sidebar-list-element"
-    @click="event => $emit('click', event)"
-    :class="{ active, disabled }"
-  >
-    <slot></slot>
-  </li>
-</template>
-
-<script>
-export default {
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-@import "src/scss/media-queries";
-
-li.sidebar-list-element {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  color: var(--text-color-50);
-  font-size: 12px;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--text-color-5);
-  cursor: pointer;
-
-  &:first-of-type {
-    padding-top: 0;
-  }
-
-  div > svg,
-  svg {
-    width: 26px;
-    height: 26px;
-    margin-right: 1rem;
-    transition: all 0.3s ease;
-    fill: var(--text-color-70);
-  }
-
-  &:hover,
-  &.active {
-    color: var(--text-color);
-
-    div > svg,
-    svg {
-      fill: var(--text-color);
-      transform: scale(1.1, 1.1);
-    }
-  }
-
-  &.active > div > svg,
-  &.active > svg {
-    fill: var(--color-green);
-  }
-
-  &.disabled {
-    cursor: default;
-  }
-
-  .pending {
-    color: #f8bd2d;
-  }
-
-  .meta {
-    margin-left: auto;
-    text-align: right;
-  }
-}
-</style>