1 files changed, 42 insertions, 0 deletions
diff --git a/front-end/src/components/SideMenuItem.vue b/front-end/src/components/SideMenuItem.vue
new file mode 100644
index 0000000..f2ebb89
--- /dev/null
+++ b/front-end/src/components/SideMenuItem.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useStore, TabId } from '../store';
+import { toRefs } from 'vue';
+import { noop } from 'lodash-es';
+import { get, set } from '@vueuse/core';
+
+const props = defineProps<{
+    tab: TabId;
+    name: String,
+    disabled?: Boolean
+}>()
+
+const store = useStore()
+const { activeTab } = storeToRefs(store)
+const { name, disabled, tab } = toRefs(props)
+
+//const isActive = (tab: TabId, activeTab: TabId) => isEqual(activeTab, tab);
+const setActiveTab = (tab: TabId) => get(disabled) ? noop() : set(activeTab, tab)
+
+</script>
+
+<template>
+    <li>
+        <a href="/" @click.prevent="setActiveTab(tab)" class="lia group" :class="{ 'pointer-events-none disabled':disabled }">
+            <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
+                <slot name="icon" />
+            </svg>
+            <span class="ms-3">{{ name }}</span>
+        </a>
+    </li>
+</template>
+
+<style lang="scss">
+    .lia{
+        @apply flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700;
+        &.disabled{
+            @apply opacity-50;
+        }
+    }
+</style>
+\ No newline at end of file