andrewwallacespeckle
8ca5c99aa1
* Initial Sidebar Implementation * Updates to sidebar * Use NuxtLinks in FE2 not UI-Components * Move sidebar to component * Active State * Responsive menu * Update sidebar links * Add Projects Page. Improve routing * Small fixes * Responsive fixes * TopBar refactor * Topbar improvements * User Menu Updates * Responsive/Topbar improvements * Various minor changes * Update sidebar icon * Revert dui3 change * Potential fix for login issue * Fix login issue. Improve empty state for projects * Add Project & Workspace Invites to notification * Revert "Add Project & Workspace Invites to notification" This reverts commit ac33dd0cb1fc47cd5c6e2925ee2a6bbea328d94f. * Updates to Project Invite Notifications * Add scroll to Sidebar component * Dashboard Card targets * Changes to logo * Small responsive fixes * Remove unused alias * Minor tidy ups * Updates from CR * Dashboard Header * Add padding to non-collapsible headings * Add Project empty state
52 lines
2.0 KiB
Vue
52 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<Menu as="div" class="flex items-center">
|
|
<MenuButton :id="menuButtonId" v-slot="{ open: menuOpen }" as="div">
|
|
<div
|
|
class="relative cursor-pointer p-1 w-8 h-8 flex items-center justify-center rounded-md"
|
|
:class="menuOpen ? 'border border-outline-2' : ''"
|
|
>
|
|
<span class="sr-only">Open notifications menu</span>
|
|
<div class="relative">
|
|
<div v-if="!menuOpen">
|
|
<div
|
|
class="absolute -top-1 right-0 w-1.5 h-1.5 rounded-full bg-primary animate-ping"
|
|
></div>
|
|
<div
|
|
class="absolute -top-1 right-0 w-1.5 h-1.5 rounded-full bg-primary"
|
|
></div>
|
|
</div>
|
|
|
|
<BellIcon v-if="!menuOpen" class="w-5 h-5" />
|
|
<XMarkIcon v-else class="w-5 h-5" />
|
|
</div>
|
|
</div>
|
|
</MenuButton>
|
|
<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 z-50 right-0 md:right-20 top-10 mt-1.5 w-full sm:w-64 origin-top-right bg-foundation-page outline outline-2 outline-primary-muted rounded-md shadow-lg overflow-hidden"
|
|
>
|
|
<div class="p-2 text-heading-sm bg-foundation-page">Notifications</div>
|
|
<!-- <div class="p-2 text-sm">TODO: project invites</div> -->
|
|
<MenuItem>
|
|
<AuthVerificationReminderMenuNotice />
|
|
</MenuItem>
|
|
</MenuItems>
|
|
</Transition>
|
|
</Menu>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
|
|
import { XMarkIcon, BellIcon } from '@heroicons/vue/24/outline'
|
|
|
|
const menuButtonId = useId()
|
|
</script>
|