From 02b0685f483fc5a4c432ef167d1c7c40936dcfff Mon Sep 17 00:00:00 2001
From: NotXia <35894453+NotXia@users.noreply.github.com>
Date: Mon, 16 Jan 2023 10:14:39 +0100
Subject: [PATCH] Add sections

---
 src/components/Navbar/Navbar.vue              | 23 +++++++++++----
 src/components/Navbar/locale.json             | 18 ++++++++++++
 .../LanguageSelector.vue                      |  7 ++++-
 .../ThemeSwitch.vue                           |  0
 src/router/index.ts                           | 28 +++++++++++++++++--
 src/views/{HomeView.vue => about/About.vue}   |  2 +-
 src/views/{ => about}/locale.json             |  0
 src/views/contacts/Contacts.vue               | 20 +++++++++++++
 src/views/contacts/locale.json                |  8 ++++++
 src/views/home/Home.vue                       | 20 +++++++++++++
 src/views/home/locale.json                    |  8 ++++++
 src/views/projects/Projects.vue               | 20 +++++++++++++
 src/views/projects/locale.json                |  8 ++++++
 src/views/resume/Resume.vue                   | 20 +++++++++++++
 src/views/resume/locale.json                  |  8 ++++++
 tailwind.config.js                            |  1 +
 vite.config.ts                                | 17 +++++++----
 17 files changed, 193 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Navbar/locale.json
 rename src/components/{LanguageSelector => language-selector}/LanguageSelector.vue (95%)
 rename src/components/{ThemeSwitch => theme-switch}/ThemeSwitch.vue (100%)
 rename src/views/{HomeView.vue => about/About.vue} (86%)
 rename src/views/{ => about}/locale.json (100%)
 create mode 100644 src/views/contacts/Contacts.vue
 create mode 100644 src/views/contacts/locale.json
 create mode 100644 src/views/home/Home.vue
 create mode 100644 src/views/home/locale.json
 create mode 100644 src/views/projects/Projects.vue
 create mode 100644 src/views/projects/locale.json
 create mode 100644 src/views/resume/Resume.vue
 create mode 100644 src/views/resume/locale.json

diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
index e20e19a..c1f9c6f 100644
--- a/src/components/Navbar/Navbar.vue
+++ b/src/components/Navbar/Navbar.vue
@@ -10,7 +10,7 @@
 
                 <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>
+                    <span class="sr-only">{{ t("open nav") }}</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>
@@ -20,7 +20,11 @@
             <div class="flex items-center order-1">
                 <div class="hidden w-full md:block md:w-auto" id="navbar-main">
                     <ul class="flex flex-col py-4 pr-4 mt-0 md:flex-row md:space-x-8 md:text-sm md:font-medium bg-transparent">
-                        <NavLink to="/" label="Home"/>
+                        <NavLink to="/" :label="t('home')"/>
+                        <NavLink to="/about" :label="t('about')"/>
+                        <NavLink to="/projects" :label="t('projects')"/>
+                        <NavLink to="/resume" :label="t('resume')"/>
+                        <NavLink to="/contacts" :label="t('contacts')"/>
                     </ul>
                 </div>
             </div>
@@ -32,7 +36,16 @@
 
 <script setup lang="ts">
     import NavLink from "./NavLink.vue";
-    import ThemeSwitch from "../ThemeSwitch/ThemeSwitch.vue";
-    import LanguageSelector from "../LanguageSelector/LanguageSelector.vue";
-    import { Dropdown } from "flowbite";
+    import ThemeSwitch from "../theme-switch/ThemeSwitch.vue";
+    import LanguageSelector from "../language-selector/LanguageSelector.vue";
+    import { initDropdowns } from "flowbite";
+    import { useI18n } from "vue-i18n";
+    import locale from "./locale.json";
+    import { onMounted } from "vue";
+
+    const { t } = useI18n({ messages: locale });
+
+    onMounted(() => {
+        initDropdowns();
+    }) 
 </script>
diff --git a/src/components/Navbar/locale.json b/src/components/Navbar/locale.json
new file mode 100644
index 0000000..b3e38ef
--- /dev/null
+++ b/src/components/Navbar/locale.json
@@ -0,0 +1,18 @@
+{
+    "it": {
+        "open nav": "Apri menù di navigazione",
+        "home": "Home",
+        "projects": "Progetti",
+        "about": "Chi sono",
+        "resume": "CV",
+        "contacts": "Contatti"
+    },
+    "en": {
+        "open nav": "Open navbar",
+        "home": "Home",
+        "projects": "Projects",
+        "about": "About",
+        "resume": "Resumé",
+        "contacts": "Contacts"
+    }
+}
\ No newline at end of file
diff --git a/src/components/LanguageSelector/LanguageSelector.vue b/src/components/language-selector/LanguageSelector.vue
similarity index 95%
rename from src/components/LanguageSelector/LanguageSelector.vue
rename to src/components/language-selector/LanguageSelector.vue
index e175c69..e876941 100644
--- a/src/components/LanguageSelector/LanguageSelector.vue
+++ b/src/components/language-selector/LanguageSelector.vue
@@ -28,8 +28,13 @@
 </template>
 
 <script setup lang="ts">
-    import { Dropdown } from "flowbite";
+    import { initDropdowns } from "flowbite";
     import { setLocale } from "@/utilities/locale_handler";
+    import { onMounted } from "vue";
+
+    onMounted(() => {
+        initDropdowns();
+    })
 
     function changeLocale(e:any) {
         setLocale(e.target.value);
diff --git a/src/components/ThemeSwitch/ThemeSwitch.vue b/src/components/theme-switch/ThemeSwitch.vue
similarity index 100%
rename from src/components/ThemeSwitch/ThemeSwitch.vue
rename to src/components/theme-switch/ThemeSwitch.vue
diff --git a/src/router/index.ts b/src/router/index.ts
index 5f9c94c..8e13646 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,9 @@
 import { createRouter, createWebHashHistory  } from "vue-router"
-import HomeView from "../views/HomeView.vue"
+import Home from "../views/home/Home.vue"
+import About from "../views/about/About.vue"
+import Projects from "../views/projects/Projects.vue"
+import Resume from "../views/resume/Resume.vue"
+import Contacts from "../views/contacts/Contacts.vue"
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -7,7 +11,27 @@ const router = createRouter({
         {
             path: "/",
             name: "home",
-            component: HomeView
+            component: Home
+        },
+        {
+            path: "/about",
+            name: "about",
+            component: About
+        },
+        {
+            path: "/projects",
+            name: "projects",
+            component: Projects
+        },
+        {
+            path: "/resume",
+            name: "resume",
+            component: Resume
+        },
+        {
+            path: "/contacts",
+            name: "contacts",
+            component: Contacts
         }
     ]
 })
diff --git a/src/views/HomeView.vue b/src/views/about/About.vue
similarity index 86%
rename from src/views/HomeView.vue
rename to src/views/about/About.vue
index 7039a1b..46343ff 100644
--- a/src/views/HomeView.vue
+++ b/src/views/about/About.vue
@@ -12,7 +12,7 @@
 
 
 <script setup lang="ts">
-    import Navbar from "@/components/Navbar/Navbar.vue";
+    import Navbar from "@/components/navbar/Navbar.vue";
     import { useI18n } from "vue-i18n";
     import locale from "./locale.json";
 
diff --git a/src/views/locale.json b/src/views/about/locale.json
similarity index 100%
rename from src/views/locale.json
rename to src/views/about/locale.json
diff --git a/src/views/contacts/Contacts.vue b/src/views/contacts/Contacts.vue
new file mode 100644
index 0000000..46343ff
--- /dev/null
+++ b/src/views/contacts/Contacts.vue
@@ -0,0 +1,20 @@
+<template>
+    <Navbar />
+
+    <main>
+        <div class="container mx-auto">
+            <h1 class="text-5xl font-bold">
+                {{ t("hello") }}
+            </h1>
+        </div>
+    </main>
+</template>
+
+
+<script setup lang="ts">
+    import Navbar from "@/components/navbar/Navbar.vue";
+    import { useI18n } from "vue-i18n";
+    import locale from "./locale.json";
+
+    const { t } = useI18n({ messages: locale });
+</script>
\ No newline at end of file
diff --git a/src/views/contacts/locale.json b/src/views/contacts/locale.json
new file mode 100644
index 0000000..6aae77e
--- /dev/null
+++ b/src/views/contacts/locale.json
@@ -0,0 +1,8 @@
+{
+    "en": {
+        "hello": "Hello"
+    },
+    "it": {
+        "hello": "Ciao"
+    }
+}
\ No newline at end of file
diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
new file mode 100644
index 0000000..46343ff
--- /dev/null
+++ b/src/views/home/Home.vue
@@ -0,0 +1,20 @@
+<template>
+    <Navbar />
+
+    <main>
+        <div class="container mx-auto">
+            <h1 class="text-5xl font-bold">
+                {{ t("hello") }}
+            </h1>
+        </div>
+    </main>
+</template>
+
+
+<script setup lang="ts">
+    import Navbar from "@/components/navbar/Navbar.vue";
+    import { useI18n } from "vue-i18n";
+    import locale from "./locale.json";
+
+    const { t } = useI18n({ messages: locale });
+</script>
\ No newline at end of file
diff --git a/src/views/home/locale.json b/src/views/home/locale.json
new file mode 100644
index 0000000..6aae77e
--- /dev/null
+++ b/src/views/home/locale.json
@@ -0,0 +1,8 @@
+{
+    "en": {
+        "hello": "Hello"
+    },
+    "it": {
+        "hello": "Ciao"
+    }
+}
\ No newline at end of file
diff --git a/src/views/projects/Projects.vue b/src/views/projects/Projects.vue
new file mode 100644
index 0000000..46343ff
--- /dev/null
+++ b/src/views/projects/Projects.vue
@@ -0,0 +1,20 @@
+<template>
+    <Navbar />
+
+    <main>
+        <div class="container mx-auto">
+            <h1 class="text-5xl font-bold">
+                {{ t("hello") }}
+            </h1>
+        </div>
+    </main>
+</template>
+
+
+<script setup lang="ts">
+    import Navbar from "@/components/navbar/Navbar.vue";
+    import { useI18n } from "vue-i18n";
+    import locale from "./locale.json";
+
+    const { t } = useI18n({ messages: locale });
+</script>
\ No newline at end of file
diff --git a/src/views/projects/locale.json b/src/views/projects/locale.json
new file mode 100644
index 0000000..6aae77e
--- /dev/null
+++ b/src/views/projects/locale.json
@@ -0,0 +1,8 @@
+{
+    "en": {
+        "hello": "Hello"
+    },
+    "it": {
+        "hello": "Ciao"
+    }
+}
\ No newline at end of file
diff --git a/src/views/resume/Resume.vue b/src/views/resume/Resume.vue
new file mode 100644
index 0000000..46343ff
--- /dev/null
+++ b/src/views/resume/Resume.vue
@@ -0,0 +1,20 @@
+<template>
+    <Navbar />
+
+    <main>
+        <div class="container mx-auto">
+            <h1 class="text-5xl font-bold">
+                {{ t("hello") }}
+            </h1>
+        </div>
+    </main>
+</template>
+
+
+<script setup lang="ts">
+    import Navbar from "@/components/navbar/Navbar.vue";
+    import { useI18n } from "vue-i18n";
+    import locale from "./locale.json";
+
+    const { t } = useI18n({ messages: locale });
+</script>
\ No newline at end of file
diff --git a/src/views/resume/locale.json b/src/views/resume/locale.json
new file mode 100644
index 0000000..6aae77e
--- /dev/null
+++ b/src/views/resume/locale.json
@@ -0,0 +1,8 @@
+{
+    "en": {
+        "hello": "Hello"
+    },
+    "it": {
+        "hello": "Ciao"
+    }
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 6480fdd..46c8f71 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ module.exports = {
   content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./node_modules/flowbite/**/*.js"
   ],
   theme: {
     extend: {},
diff --git a/vite.config.ts b/vite.config.ts
index 89026cb..0dc1c40 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,11 +5,16 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: "/",
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+    base: "/",
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+    },
+    server: {
+        watch: {
+            usePolling: true
+        }
     }
-  }
 })