ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fiddle with height of notification icon

This commit is contained in:
Daniel Egger 2023-05-17 11:53:14 +02:00
parent 3acae49217
commit 4d4b6c5405
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/header/MainNavigationBar.vue
View File

@ -136,16 +136,18 @@ onMounted(() => {
<div class="flex items-stretch justify-start space-x-8">
<!-- Notification Bell & Menu -->
<div v-if="userStore.loggedIn" class="nav-item">
<div v-if="userStore.loggedIn" class="nav-item leading-none">
<NotificationPopover>
<template #toggleButtonContent>
<div class="flex">
<it-icon-notification class="h-6 w-6" />
<div
v-if="notificationsStore.hasUnread"
aria-label="unread notifications"
class="mt-1 h-1.5 w-1.5 rounded-full bg-sky-500"
/>
<div class="relative h-8 w-8">
<div>
<it-icon-notification class="h-8 w-8" />
<div
v-if="notificationsStore.hasUnread"
aria-label="unread notifications"
class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
/>
</div>
</div>
</template>
<template #popoverContent>
@ -156,7 +158,7 @@ onMounted(() => {
<div
v-if="selectedCourseSessionTitle"
class="hidden items-center lg:inline-flex"
class="nav-item hidden items-center lg:inline-flex"
>
<div class="">
{{ selectedCourseSessionTitle }}

2
client/src/components/notifications/NotificationPopover.vue
View File

@ -10,7 +10,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
<PopoverPanel>
<div
class="absolute right-0 mt-2 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:right-2"
class="absolute right-0 z-10 mt-2 bg-white px-4 py-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none lg:right-2"
>
<!-- To close the popover withing your content, use the 'PopoverButton'
https://headlessui.com/vue/popover#closing-popovers-manually