From 7bf1bd232663e784026249fb9c76403ee7cf4742 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 16 Feb 2022 22:26:11 +0800
Subject: [PATCH] Fix notifications position when sidebar is open (#11286)

* fix notifications position when sidebar is open

* change to sidebarOpen prop
---
 .../notifications-group/notifications-group.vue     | 13 ++++++++++---
 app/src/views/private/private-view.vue              |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/src/views/private/components/notifications-group/notifications-group.vue b/app/src/views/private/components/notifications-group/notifications-group.vue
index e2294c6a63..fb6265d377 100644
--- a/app/src/views/private/components/notifications-group/notifications-group.vue
+++ b/app/src/views/private/components/notifications-group/notifications-group.vue
@@ -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;
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index 16e6530c77..90a877c72a 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -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>