mirror of
https://github.com/DiscordFactory/website-documentation.git
synced 2026-01-23 05:20:27 +01:00
🚧 Feat : implement navbar
This commit is contained in:
Freeze455
100
src/components/Navbar.vue
Normal file
100
src/components/Navbar.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user