refactor: move project to frontend directory

frontend/src/components/sidebar/SideBarNavItem.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {Prop} from 'vue-property-decorator';
+
+@Options({
+  name: 'SideBarNavItem',
+  components: {},
+})
+export default class SideBarNavItem extends Vue {
+  @Prop({required: false})
+  faIcon!: string;
+  @Prop({required: false})
+  text!: string;
+}
+</script>
+
+<template>
+  <li class="nav-item sidebar-nav-item">
+    <slot>
+      <div class="d-flex flex-row p-2 align-items-center">
+        <i :class="[faIcon]" class="sidebar-nav-item-icon text-center fa"></i>
+        <span class="sidebar-nav-item-text me-auto">{{ text }}</span>
+        <slot name="end"/>
+      </div>
+    </slot>
+  </li>
+</template>
+
+<style lang="scss" scoped>
+.sidebar-nav-item-text {
+  opacity: 1;
+  overflow: hidden;
+  max-width: 10em;
+  transition: display ease-in-out 0.25s, opacity ease-in-out 0.25s, max-width ease-in-out 0.25s;
+}
+
+.sidebar-nav-item-icon {
+  width: 2em;
+  text-align: center;
+}
+</style>