Fix notifications position when sidebar is open (#11286)

* fix notifications position when sidebar is open

* change to sidebarOpen prop
This commit is contained in:
Azri Kahar
2022-02-16 22:26:11 +08:00
committed by GitHub
parent bce3451be9
commit 7bf1bd2326
2 changed files with 11 additions and 4 deletions

View File

@@ -1,12 +1,12 @@
<template>
<transition-group class="notifications-group" name="slide-fade" tag="div">
<transition-group class="notifications-group" :class="{ 'sidebar-open': sidebarOpen }" name="slide-fade" tag="div">
<slot />
<notification-item
v-for="(notification, index) in queue"
:key="notification.id"
v-bind="notification"
:tail="index === queue.length - 1"
:dense="dense"
:dense="sidebarOpen === false"
:show-close="notification.persist === true && notification.closeable !== false"
/>
</transition-group>
@@ -20,7 +20,7 @@ import NotificationItem from '../notification-item';
export default defineComponent({
components: { NotificationItem },
props: {
dense: {
sidebarOpen: {
type: Boolean,
default: false,
},
@@ -49,6 +49,13 @@ export default defineComponent({
direction: ltr;
}
&.sidebar-open {
top: auto;
right: 12px;
bottom: 76px;
left: auto;
}
@media (min-width: 960px) {
top: auto;
right: 12px;

View File

@@ -58,7 +58,7 @@
<v-overlay class="sidebar-overlay" :active="sidebarOpen" @click="sidebarOpen = false" />
<notifications-drawer />
<notifications-group v-if="notificationsPreviewActive === false" :dense="sidebarOpen === false" />
<notifications-group v-if="notificationsPreviewActive === false" :sidebar-open="sidebarOpen" />
<notification-dialogs />
</div>
</template>