🚧 Feat : implement navbar

src/components/Navbar.vue

@@ -0,0 +1,100 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <Disclosure as="nav" class="fixed top-0 left-0 w-screen bg-white dark:bg-gray-900 transition duration-200 shadow" v-slot="{ open }">
+    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+      <div class="relative flex justify-between h-16">
+        <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+          <!-- Mobile menu button -->
+          <DisclosureButton class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+            <span class="sr-only">Open main menu</span>
+            <MenuIcon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
+            <XIcon v-else class="block h-6 w-6" aria-hidden="true" />
+          </DisclosureButton>
+        </div>
+        <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+          <div class="flex-shrink-0 flex items-center">
+            <img class="block lg:hidden h-8 w-auto" src="../assets/logo.jpg" alt="Workflow" />
+            <img class="hidden lg:block h-8 w-auto" src="../assets/logo-with-label.svg" alt="Workflow" />
+          </div>
+          <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+            <template v-for="link in links">
+              <NavbarLinkLocal
+                v-if="link.local"
+                :link="link" />
+              <NavbarLinkExternal
+                v-else
+                :link="link" />
+            </template>
+          </div>
+        </div>
+        <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+          <!-- Profile dropdown -->
+          <Menu as="div" class="ml-3 relative">
+            <div>
+              <MenuButton class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <span class="sr-only">Open user menu</span>
+                <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+              </MenuButton>
+            </div>
+            <transition enter-active-class="transition ease-out duration-200" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+              <MenuItems class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <MenuItem v-slot="{ active }">
+                  <a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Your Profile</a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Settings</a>
+                </MenuItem>
+                <MenuItem v-slot="{ active }">
+                  <a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Sign out</a>
+                </MenuItem>
+              </MenuItems>
+            </transition>
+          </Menu>
+        </div>
+      </div>
+    </div>
+
+    <DisclosurePanel class="sm:hidden">
+      <div class="pt-2 pb-4 space-y-1">
+        <template v-for="link in links">
+          <router-link
+            v-if="link.local"
+            :to="link.path"
+            class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
+            {{ link.label }}
+          </router-link>
+          <a
+            href="#"
+            class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
+            rel="nofollow noreferrer noopener">
+            Dashboard
+          </a>
+        </template>
+        <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
+        <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Team</a>
+        <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Projects</a>
+        <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Calendar</a>
+      </div>
+    </DisclosurePanel>
+  </Disclosure>
+</template>
+
+<script setup lang="ts">
+import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import { BellIcon, MenuIcon, XIcon } from '@heroicons/vue/outline'
+import { NavbarLink } from '../types'
+import NavbarLinkExternal from './NavbarLinkExternal.vue'
+import NavbarLinkLocal from './NavbarLinkLocal.vue'
+
+const links: NavbarLink[] = [
+  { label: 'Home', path: '/', local: true },
+  { label: 'Documentation', path: '/documentation', local: true },
+  { label: 'Github', path: '/', local: false }
+]
+</script>
+
+<style>
+.router-link-exact-active {
+  @apply border-indigo-500 text-gray-900 inline-flex
+}
+</style>

src/components/NavbarLinkExternal.vue

@@ -0,0 +1,16 @@
+<template>
+  <a
+    :href="link.path"
+    rel="nofollow noreferrer noopener"
+    class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-200 dark:hover:border-gray-300 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+    {{ link.label }}
+  </a>
+</template>
+
+<script setup lang='ts'>
+import { NavbarLink } from '../types'
+
+defineProps({
+  link: {} as NavbarLink,
+})
+</script>

src/components/NavbarLinkLocal.vue

@@ -0,0 +1,15 @@
+<template>
+  <router-link
+    :to="link.path"
+    class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-200 dark:hover:border-gray-300 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+    {{ link.label }}
+  </router-link>
+</template>
+
+<script setup lang='ts'>
+import { NavbarLink } from '../types'
+
+defineProps({
+  link: {} as NavbarLink,
+})
+</script>

src/main.ts

@@ -3,15 +3,17 @@ import 'virtual:windi-devtools'
 import { createApp } from 'vue'
 import App from './templates/layouts/Base.vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import Manager from './templates/modules/manager/Routes'
+import Default from './templates/modules/default/Routes'
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    ...Manager,
+    ...Default,
   ]
 })
 
+console.log(router.getRoutes())
+
 createApp(App)
   .use(router)
   .mount('#app')

src/templates/modules/default/Routes.ts

@@ -0,0 +1,9 @@
+import { RouteRecordRaw } from 'vue-router'
+import Home from './Home.vue'
+
+const routes: RouteRecordRaw[] = [
+  { path: '/', component: Home },
+  { path: '/documentation', component: Home }
+]
+
+export default routes

src/types/index.ts

@@ -0,0 +1,5 @@
+export type NavbarLink = {
+  label: string
+  path: string
+  local: boolean
+}