-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
136 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,125 @@ | ||
| <template> | ||
| <DashboardHeader /> | ||
| <div> | ||
| <header> | ||
| <Disclosure as="nav" class="bg-white shadow" v-slot="{ open }"> | ||
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | ||
| <div class="flex h-16 justify-between"> | ||
| <div class="flex"> | ||
| <div class="-ml-2 mr-2 flex items-center md:hidden"> | ||
| <!-- Mobile menu button --> | ||
| <DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"> | ||
| <span class="absolute -inset-0.5" /> | ||
| <span class="sr-only">Open main menu</span> | ||
| <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" /> | ||
| <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" /> | ||
| </DisclosureButton> | ||
| </div> | ||
| <div class="flex flex-shrink-0 items-center"> | ||
| <img class="h-14 w-auto" src="/logo.png" alt="GetLicensed" /> | ||
| </div> | ||
| <div class="hidden md:ml-6 md:flex md:space-x-8"> | ||
| <a href="/dashboard" class="inline-flex items-center border-b-2 border-indigo-500 px-1 pt-1 text-sm font-medium text-gray-900">Dashboard</a> | ||
| <!-- <a href="#" class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Team</a>--> | ||
| <!-- <a href="#" class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Projects</a>--> | ||
| <!-- <a href="#" class="inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">Calendar</a>--> | ||
| </div> | ||
| </div> | ||
| <div class="flex items-center"> | ||
| <div class="flex-shrink-0"> | ||
| <button type="button" class="relative inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> | ||
| <PlusIcon class="-ml-0.5 h-5 w-5" aria-hidden="true" /> | ||
| New license | ||
| </button> | ||
| </div> | ||
| <div class="hidden md:ml-4 md:flex md:flex-shrink-0 md:items-center"> | ||
| <!-- <button type="button" class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">--> | ||
| <!-- <span class="absolute -inset-1.5" />--> | ||
| <!-- <span class="sr-only">View notifications</span>--> | ||
| <!-- <BellIcon class="h-6 w-6" aria-hidden="true" />--> | ||
| <!-- </button>--> | ||
|
|
||
| <main class="isolate"> | ||
| <NuxtPage /> | ||
| </main> | ||
| <!-- Profile dropdown --> | ||
| <Menu as="div" class="relative ml-3"> | ||
| <div> | ||
| <MenuButton class="relative flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"> | ||
| <span class="absolute -inset-1.5" /> | ||
| <span class="sr-only">Open user menu</span> | ||
| <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-500"> | ||
| <span class="font-medium leading-none text-white">{{ user.name.substring(0, 2) }}</span> | ||
| </span> | ||
| </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="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg 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 @click="clear" 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> | ||
| </div> | ||
|
|
||
| <DisclosurePanel class="md:hidden"> | ||
| <div class="space-y-1 pb-3 pt-2"> | ||
| <!-- 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" --> | ||
| <DisclosureButton as="a" href="#/dashboard" class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700 sm:pl-5 sm:pr-6">Dashboard</DisclosureButton> | ||
| <!-- <DisclosureButton as="a" href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pl-5 sm:pr-6">Team</DisclosureButton>--> | ||
| <!-- <DisclosureButton as="a" href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pl-5 sm:pr-6">Projects</DisclosureButton>--> | ||
| <!-- <DisclosureButton as="a" href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-500 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700 sm:pl-5 sm:pr-6">Calendar</DisclosureButton>--> | ||
| </div> | ||
| <div class="border-t border-gray-200 pb-3 pt-4"> | ||
| <div class="flex items-center px-4 sm:px-6"> | ||
| <div class="flex-shrink-0"> | ||
| <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-500"> | ||
| <span class="font-medium leading-none text-white">{{ user.name.substring(0, 2) }}</span> | ||
| </span> | ||
| </div> | ||
| <div class="ml-3"> | ||
| <div class="text-base font-medium text-gray-800">{{ user.name }}</div> | ||
| <div class="text-sm font-medium text-gray-500">{{ user.email }}</div> | ||
| </div> | ||
| <!-- <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">--> | ||
| <!-- <span class="absolute -inset-1.5" />--> | ||
| <!-- <span class="sr-only">View notifications</span>--> | ||
| <!-- <BellIcon class="h-6 w-6" aria-hidden="true" />--> | ||
| <!-- </button>--> | ||
| </div> | ||
| <div class="mt-3 space-y-1"> | ||
| <!-- <DisclosureButton as="a" href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6">Your Profile</DisclosureButton>--> | ||
| <!-- <DisclosureButton as="a" href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6">Settings</DisclosureButton>--> | ||
| <DisclosureButton as="a" href="/" @click="clear" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6">Sign out</DisclosureButton> | ||
| </div> | ||
| </div> | ||
| </DisclosurePanel> | ||
| </Disclosure> | ||
| </header> | ||
|
|
||
| <main class="isolate"> | ||
| <NuxtPage /> | ||
| </main> | ||
| </div> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import DashboardHeader from '~/components/DashboardHeader.vue'; | ||
| </script> | ||
|
|
||
| <script setup> | ||
| import { | ||
| Disclosure, | ||
| DisclosureButton, | ||
| DisclosurePanel, | ||
| Menu, | ||
| MenuButton, | ||
| MenuItem, | ||
| MenuItems, | ||
| } from '@headlessui/vue'; | ||
| import { PlusIcon } from '@heroicons/vue/20/solid'; | ||
| import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'; | ||
| const { user, clear } = useUserSession(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters