close notification box whenchanging chain

components/common/NotificationBox/NotificationBoxModal.vue

@@ -1,12 +1,13 @@
 <template>
   <div
+    v-if="isOpen"
     class="notification-modal-container theme-background-color border-left is-flex is-flex-direction-column">
     <header
       class="py-4 px-2rem is-flex is-justify-content-space-between border-bottom mb-4">
       <span class="control-label is-size-6 has-text-weight-bold">
         {{ $t('notification.notifications') }}
       </span>
-      <a class="is-flex is-align-items-center" @click="emit('close')">
+      <a class="is-flex is-align-items-center" @click="closeModal">
         <NeoIcon icon="close" />
       </a>
     </header>
@@ -111,6 +112,7 @@
 import { FilterOption } from './types'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import NeoTag from '@/components/shared/gallery/NeoTag.vue'
+import { usePreferencesStore } from '@/stores/preferences'
 
 import NotificationItem from './NotificationItem.vue'
 import {
@@ -127,8 +129,25 @@ const eventTypes = ref<string[]>([
 const collectionFilter = ref<FilterOption | null>(null)
 const eventFilter = ref<string[]>([])
 const showFilter = ref(false)
+const prefrencesStore = usePreferencesStore()
+const isOpen = computed({
+  get: () => prefrencesStore.getNotificationBoxCollapse,
+  set: (value) => prefrencesStore.setNotificationBoxCollapse(value),
+})
 const emit = defineEmits(['close'])
 
+// properly close modal when being closed from outside,e.g. by changeing chain
+watch(isOpen, (newValue, oldValue) => {
+  if (newValue === false && oldValue === true) {
+    emit('close')
+  }
+})
+
+const closeModal = () => {
+  isOpen.value = false
+  emit('close')
+}
+
 const { collections, events: allEvents, loading } = useNotification()
 
 const toggleCollectionFilter = (target: FilterOption) => {

components/navbar/ChainSelectDropdown.vue

@@ -17,16 +17,19 @@
 
 <script lang="ts" setup>
 import { getChainNameByPrefix } from '@/utils/chain'
+import { usePreferencesStore } from '@/stores/preferences'
 
 const { availableChains } = useChain()
 const { $store } = useNuxtApp()
+const prefrencesStore = usePreferencesStore()
 const router = useRouter()
 
 const selected = computed({
   get: () => $store.getters.getSettings['urlPrefix'],
   set: (value) => {
     $store.dispatch('setUrlPrefix', value)
     router.push({ path: `/${value}` })
+    prefrencesStore.setNotificationBoxCollapse(false)
   },
 })
 

components/navbar/NotificationBoxButton.vue

@@ -11,22 +11,27 @@ import { NotificationBoxModalConfig } from '@/components/common/NotificationBox/
 import { BModalComponent, BModalConfig } from 'buefy/types/components'
 import type Vue from 'vue'
 import { ModalProgrammatic as Modal } from 'buefy'
+import { usePreferencesStore } from '@/stores/preferences'
 const root = ref<Vue<Record<string, string>>>()
 const props = defineProps<{
   showLabel: boolean
 }>()
 const emit = defineEmits(['closeBurgerMenu'])
 const modal = ref<BModalComponent | null>()
+const prefrencesStore = usePreferencesStore()
 function toggleNotificationModal() {
   emit('closeBurgerMenu')
   if (modal.value) {
     modal.value.close()
     modal.value = null
+    prefrencesStore.setNotificationBoxCollapse(false)
   } else {
+    prefrencesStore.setNotificationBoxCollapse(true)
     modal.value = Modal.open({
       parent: root?.value,
       onCancel: () => {
         modal.value = null
+        prefrencesStore.setNotificationBoxCollapse(false)
       },
       ...NotificationBoxModalConfig,
     } as unknown as BModalConfig)

stores/preferences.ts

@@ -4,6 +4,7 @@ import useLocalStorage from '@/composables/useLocalStorage'
 interface State {
   sidebarFilterCollapseOpen: boolean
   mobileFilterCollapseOpen: boolean
+  notificationBoxCollapseOpen: boolean
   layoutClass: string
   galleryLayoutClass: string
   advancedUI: boolean
@@ -35,6 +36,7 @@ export const usePreferencesStore = defineStore('preferences', {
   state: (): State => ({
     sidebarFilterCollapseOpen: true,
     mobileFilterCollapseOpen: false,
+    notificationBoxCollapseOpen: false,
     layoutClass: 'is-one-quarter-desktop is-one-third-tablet',
     galleryLayoutClass:
       'is-one-quarter-desktop is-one-third-tablet is-half-mobile',
@@ -60,6 +62,7 @@ export const usePreferencesStore = defineStore('preferences', {
   getters: {
     getsidebarFilterCollapse: (state) => state.sidebarFilterCollapseOpen,
     getMobileFilterCollapse: (state) => state.mobileFilterCollapseOpen,
+    getNotificationBoxCollapse: (state) => state.notificationBoxCollapseOpen,
     getLayoutClass: (state) => state.layoutClass,
     getGalleryLayoutClass: (state) => state.galleryLayoutClass,
     getTheatreView: (state) => state.theatreView,
@@ -86,6 +89,9 @@ export const usePreferencesStore = defineStore('preferences', {
     setMobileFilterCollapse(payload) {
       this.mobileFilterCollapseOpen = payload
     },
+    setNotificationBoxCollapse(payload) {
+      this.notificationBoxCollapseOpen = payload
+    },
     setLayoutClass(payload) {
       this.layoutClass = payload
     },