initial commit (long overdue)

17th Website/src/components/navigation/navitem.vue

@@ -0,0 +1,66 @@
+<!-- <script>
+export const navitem = {
+    props: ['icon', 'link']
+}
+</script>
+
+<script setup>
+import { Icon } from '@iconify/vue'
+
+</script> -->
+
+
+<script>
+import { Icon } from '@iconify/vue'
+import { RouterLink } from 'vue-router';
+
+export default {
+    name: 'navitem',
+    props: {
+        icon: String,
+        link: String,
+        active: Boolean
+    },
+    methods: {
+        setActive() {
+            // Your code here
+            alert(`Hello ${event.target}!`)
+        }
+    },
+    components: {
+        Icon,
+        RouterLink
+    }
+}
+</script>
+
+<template>
+    <RouterLink :to="link" class="button" :class="{active: active}">
+        <Icon :icon="icon" />
+    </RouterLink>
+</template>
+
+
+<style>
+.button {
+    color: var(--white);
+    font-size: 30px;
+    overflow: hidden;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 10px;
+    padding: 5px;
+    transition: color 0.2s ease-in-out;
+}
+
+.button:hover {
+    color: var(--accent-primary);
+}
+
+.active {
+    border: 2px solid var(--accent-primary);
+    border-radius: 10px;
+}
+</style>