Add navbar

package.json

@@ -10,6 +10,7 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "flowbite": "^1.6.2",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
@@ -17,7 +18,10 @@
     "@types/node": "^18.11.12",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.13",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
     "typescript": "~4.7.4",
     "vite": "^4.0.0",
     "vue-tsc": "^1.0.12"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -1,7 +1,15 @@
-<script setup lang="ts">
-import { RouterView } from "vue-router"
-</script>
-
 <template>
-    <RouterView />
+    <div class="bg-white text-gray-900
-</template>
+                dark:bg-gray-900 min-h-screen dark:text-slate-50">
+        <RouterView />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { onMounted } from "vue";
+    import { RouterView } from "vue-router";
+
+    onMounted(() => {
+        document.documentElement.classList.add("dark");
+    })
+</script>

src/assets/base.css

@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/assets/main.css

@@ -1,35 +1,3 @@
-@import './base.css';
+@tailwind base;
-
+@tailwind components;
-#app {
+@tailwind utilities;
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

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>

src/router/index.ts

@@ -8,12 +8,7 @@ const router = createRouter({
             path: "/",
             name: "home",
             component: HomeView
-        },
+        }
-        // {
-        //     path: "/about",
-        //     name: "about",
-        //     component: () => import("../views/AboutView.vue")
-        // }
     ]
 })
 

src/views/HomeView.vue

@@ -1,9 +1,14 @@
-<script setup lang="ts">
-</script>
-
 <template>
+    <Navbar />
+
     <main>
-        
+        <h1 class="text-5xl font-bold">
+            Hello world
+        </h1>
     </main>
 </template>
 
+
+<script setup lang="ts">
+    import Navbar from "@/components/Navbar/Navbar.vue";
+</script>

tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('flowbite/plugin')
+  ],
+  darkMode: "class",
+}