feat(notification): update styling and adjust based on navbar state

Author: dvcol

src/components/common/navbar/NavbarComponent.vue

@@ -6,6 +6,7 @@ import { useRoute, useRouter } from 'vue-router';
 import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDopdown.vue';
 
 import { Route } from '~/router';
+import { NavbarService } from '~/services/navbar.service';
 import { useI18n } from '~/utils';
 
 const i18n = useI18n('route');
@@ -27,9 +28,18 @@ const routes = [
 
 const isHover = ref(false);
 const isFocus = ref(false);
-const showDrawer = computed(
-  () => route.name && !!slots.drawer && (isHover.value || isFocus.value),
-);
+
+const hasDrawer = computed(() => {
+  const drawer = !!route.name && !!slots.drawer;
+  NavbarService.drawer.value = drawer;
+  return drawer;
+});
+
+const showDrawer = computed(() => {
+  const show = hasDrawer.value && (isHover.value || isFocus.value);
+  NavbarService.open.value = show;
+  return show;
+});
 
 const navElement = ref<HTMLElement>();
 </script>
@@ -69,7 +79,13 @@ const navElement = ref<HTMLElement>();
         <NavbarSettingsDropdown v-if="navElement" :parent-element="navElement" />
       </NTab>
     </NTabs>
-    <div class="drawer" :class="{ visible: showDrawer }">
+    <div
+      class="drawer"
+      :class="{
+        'has-drawer': hasDrawer,
+        'drawer-visible': showDrawer,
+      }"
+    >
       <slot name="drawer" :parent-element="navElement"></slot>
     </div>
   </nav>
@@ -84,19 +100,13 @@ nav {
   text-align: center;
 
   .drawer {
+    @include layout.navbar-transition;
+
     display: flex;
     align-items: center;
     justify-content: center;
     height: 0;
     overflow: hidden;
-    transition: height 0.5s var(--n-bezier);
-    transition-delay: 0.2s;
-
-    &.visible {
-      height: layout.$header-drawer-height;
-      transition: height 0.25s var(--n-bezier);
-      transition-delay: 0s;
-    }
   }
 
   a {

src/components/container/ContainerComponent.ce.vue

@@ -14,6 +14,7 @@ import { computed, ref } from 'vue';
 import LoadingBarProvider from '~/components/container/LoadingBarProvider.vue';
 import MessageProvider from '~/components/container/MessageProvider.vue';
 import NotificationProvider from '~/components/container/NotificationProvider.vue';
+import { NavbarService } from '~/services/navbar.service';
 import { lazyComponent } from '~/utils/lazy.utils';
 
 const AppComponent = lazyComponent(() => import('~/components/AppComponent.vue'));
@@ -25,6 +26,9 @@ const override: GlobalThemeOverrides = {
   // TODO red palette
 };
 
+const { drawer } = NavbarService;
+const drawerOpen = NavbarService.open;
+
 const root = ref<HTMLElement>();
 </script>
 
@@ -35,16 +39,40 @@ const root = ref<HTMLElement>();
 
       <NLoadingBarProvider
         :to="root"
-        :loading-bar-style="{ loading: { '--n-color-loading': 'white' } }"
+        :loading-bar-style="{ loading: { '--n-color-loading': 'var(--vt-c-white)' } }"
       >
         <LoadingBarProvider />
       </NLoadingBarProvider>
 
-      <NMessageProvider :to="root">
+      <NMessageProvider
+        :to="root"
+        :max="2"
+        :container-class="
+          [
+            'message-container',
+            drawer ? 'has-drawer' : '',
+            drawerOpen ? 'drawer-visible' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')
+        "
+      >
         <MessageProvider />
       </NMessageProvider>
 
-      <NNotificationProvider :to="root">
+      <NNotificationProvider
+        :to="root"
+        :max="2"
+        :container-class="
+          [
+            'notification-container',
+            drawer ? 'has-drawer' : '',
+            drawerOpen ? 'drawer-visible' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')
+        "
+      >
         <NotificationProvider />
       </NNotificationProvider>
     </NConfigProvider>
@@ -54,6 +82,7 @@ const root = ref<HTMLElement>();
 <style lang="scss">
 @use '~/styles/base.scss';
 @use '~/styles/mixin' as mixin;
+@use '~/styles/layout' as layout;
 
 :host {
   display: flex;
@@ -88,6 +117,26 @@ const root = ref<HTMLElement>();
   height: 100%;
 }
 
+.notification-container.n-notification-container.n-notification-container {
+  @include layout.navbar-transition($transition: top);
+
+  top: layout.$header-navbar-height;
+
+  &.drawer-visible {
+    top: layout.$header-open-drawer-height;
+  }
+}
+
+.message-container.n-message-container.n-message-container {
+  @include layout.navbar-transition($transition: top);
+
+  top: calc(#{layout.$header-navbar-height} + 12px);
+
+  &.drawer-visible {
+    top: calc(#{layout.$header-open-drawer-height} + 12px);
+  }
+}
+
 .n-dropdown-menu,
 .n-date-panel,
 .n-virtual-list {
@@ -119,6 +168,8 @@ const root = ref<HTMLElement>();
   backdrop-filter: blur(var(--bg-blur));
 }
 
+.n-message-wrapper .n-message,
+.n-notification-container .n-notification,
 .n-tooltip.n-tooltip,
 .n-popover-arrow.n-popover-arrow.n-popover-arrow {
   background: var(--bg-color-60);

src/index.html

@@ -13,6 +13,7 @@
 
 <style>
   body {
+    overscroll-behavior: none;
     display: flex;
     margin: 0;
     color: rgb(235 235 235 / 64%);

src/services/navbar.service.ts

@@ -0,0 +1,6 @@
+import { ref } from 'vue';
+
+export class NavbarService {
+  static readonly open = ref(false);
+  static readonly drawer = ref(false);
+}

src/styles/layout.scss

@@ -1,2 +1,22 @@
 $header-navbar-height: 2.75rem;
-$header-drawer-height: 3.5rem;
+$header-drawer-height: 3.5rem;
+$header-open-drawer-height: calc(#{$header-navbar-height} + #{$header-drawer-height});
+$navbar-transition: 0.5s var(--n-bezier);
+$navbar-transition-visible: 0.25s var(--n-bezier);
+$navbar-transition-delay: 0.5s;
+$navbar-transition-delay-visible: 0s;
+
+@mixin navbar-transition($transition: height) {
+  transition: $transition $navbar-transition;
+  transition-delay: $navbar-transition-delay;
+
+  &.drawer-visible {
+    height: $header-drawer-height;
+    transition: $transition $navbar-transition-visible;
+    transition-delay: $navbar-transition-delay-visible;
+  }
+
+  &:not(.has-drawer) {
+    transition-delay: $navbar-transition-delay-visible;
+  }
+}