Add navbar

src/components/Navbar/NavLink.vue

@@ -0,0 +1,25 @@
+<template>
+    <li>
+        <router-link :to="props.to" :aria-current="is_active_page ? 'page' : null"
+                    :class="`block py-2 md:p-0 text-right md:text-center text-gray-700 dark:text-slate-50
+                             ${is_active_page ? 'font-bold' : 'font-normal hover:underline'}`">
+            {{ props.label }}
+        </router-link>
+    </li>
+</template>
+
+<script setup lang="ts">
+    import { ref, watch } from "vue";
+    import { useRoute } from "vue-router";
+    const route = useRoute();
+
+    const props = defineProps({
+        to: { type: String, required: true },
+        label: String
+    })
+
+    const is_active_page = ref(route.path === props.to);
+    watch(() => route.path, () => {
+        is_active_page.value = route.path === props.to
+    });
+</script>

src/components/Navbar/Navbar.vue

@@ -0,0 +1,27 @@
+<template>
+    <nav class="bg-white border-gray-200 dark:bg-gray-900 px-2 sm:px-4 py-2.5 ">
+    <div class="container flex flex-wrap items-center justify-between mx-auto">
+        <div></div>
+
+        <button class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 md:hidden dark:text-gray-400"
+                data-collapse-toggle="navbar-main" type="button" aria-controls="navbar-main" aria-expanded="false">
+            <span class="sr-only">Apri menù navigazione</span>
+            <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+            </svg>
+        </button>
+        
+        <div class="hidden w-full md:block md:w-auto" id="navbar-main">
+            <ul class="flex flex-col pt-4 pr-4 mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium bg-transparent">
+                <NavLink to="/" label="Home"/>
+            </ul>
+        </div>
+    </div>
+    </nav>
+</template>
+
+
+<script setup lang="ts">
+    import NavLink from "./NavLink.vue";
+    import "flowbite";
+</script>