arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-18 11:17:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

🚧 Work in progress

Browse Source
This commit is contained in:
Freeze455
2021-08-17 10:20:28 +02:00
parent 19a6327297
commit 2cd7d0f3e7
6 changed files with 146 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Navbar.vue
View File

@@ -29,27 +29,18 @@
</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 class="flex space-x-5">
<a
v-for="item in socials"
:key="item.label"
:href="item.href"
target="_blank"
rel="nofollow noreferrer noopener"
class="text-gray-400 hover:text-gray-500">
<span class="sr-only">{{ item.label }}</span>
<component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
</a>
</div>
</div>
</div>
</div>
@@ -85,12 +76,7 @@ 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 }
]
import { socials, links } from '../utils/Navigation'
</script>
<style>