Started project

client/src/App.vue

@@ -0,0 +1,16 @@
+<script setup>
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import Navbar from './components/Navbar.vue'
+</script>
+
+<template>
+  <Navbar />
+  <div class="container">
+    <router-view></router-view>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

client/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

client/src/components/Navbar.vue

@@ -0,0 +1,16 @@
+<template>
+    <nav class="relative container mx-auto p-6">
+        <div class="flex items-center justify-between">
+            <!-- Logo -->
+            <div class="pt-2">
+                <img src="vite.svg" alt="Vite Logo" >
+            </div>
+            <!-- Menu Items -->
+            <div class="hidden md:flex space-x-6">
+                <router-link class="hover:text-red-500 active:text-blue-500" to="/">Home</router-link>
+                <router-link class="hover:text-red-500 active:text-blue-500" to="/quiz">Take the Quiz</router-link>
+                <router-link class="hover:text-red-500 active:text-blue-500" to="/about">About</router-link>
+            </div>
+        </div>
+    </nav>
+</template>

client/src/components/icons/Menu.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg-icon type="mdi" :path="path"></svg-icon>
+</template>
+
+
+<script>
+import SvgIcon from '@jamescoyle/vue-icon'
+import { mdiMenu } from '@mdi/js'
+
+export default {
+    name: "menu",
+
+    components: {
+        SvgIcon
+    },
+
+    data() {
+        return {
+            path: mdiMenu,
+        }
+    }
+}
+</script>

client/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router'
+createApp(App).use(router).mount('#app')

client/src/router/index.js

@@ -0,0 +1,30 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Home from '../views/Home.vue'
+import About from '../views/About.vue'
+import Quiz from '../views/Quiz.vue'
+
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: Home
+    },
+    {
+        path: '/about',
+        name: 'About',
+        component: About
+    },
+    {
+        path: '/quiz',
+        name: 'Quiz',
+        component: Quiz
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+export default router

client/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/src/views/About.vue

@@ -0,0 +1,7 @@
+<template>
+
+    <div class="home">
+        <h1>About</h1>
+    </div>
+
+</template>

client/src/views/Home.vue

@@ -0,0 +1,7 @@
+<template>
+
+    <div class="home">
+        <h1>Home</h1>
+    </div>
+
+</template>

client/src/views/Quiz.vue

@@ -0,0 +1,7 @@
+<template>
+
+    <div class="quiz">
+        <h1>Quiz</h1>
+    </div>
+
+</template>