fix(css): adjust blur gradient for panels & navbar

Author: dvcol

src/components/AppComponent.vue

@@ -47,7 +47,7 @@ const onBack = () => {
 <template>
   <header :class="{ open: panel }">
     <RouterView v-slot="{ Component }" name="navbar">
-      <NavbarComponent v-if="isAuthenticated">
+      <NavbarComponent v-if="isAuthenticated" :disabled="panel">
         <template v-if="Component" #drawer="{ parentElement }">
           <Transition name="scale" mode="out-in">
             <KeepAlive>
@@ -130,7 +130,7 @@ header {
   }
 
   &.open > :first-child {
-    background: var(--bg-color-hover);
+    background: var(--bg-gradient-60-90);
     backdrop-filter: blur(var(--bg-blur-20));
   }
 }

src/components/common/navbar/NavbarComponent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NTab, NTabs } from 'naive-ui';
-import { computed, ref, useSlots } from 'vue';
+import { computed, ref, toRefs, useSlots } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDopdown.vue';
@@ -9,6 +9,16 @@ import { Route } from '~/router';
 import { NavbarService } from '~/services/navbar.service';
 import { useI18n } from '~/utils';
 
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const { disabled } = toRefs(props);
+
 const i18n = useI18n('route');
 const route = useRoute();
 const router = useRouter();
@@ -44,7 +54,7 @@ const hasDrawer = computed(() => {
 });
 
 const showDrawer = computed(() => {
-  const show = hasDrawer.value && (isHover.value || isFocus.value);
+  const show = !disabled.value && hasDrawer.value && (isHover.value || isFocus.value);
   NavbarService.open.value = show;
   return show;
 });

src/components/container/ContainerComponent.ce.vue

@@ -164,11 +164,15 @@ const root = ref<HTMLElement>();
   }
 }
 
-.n-drawer {
-  background: linear-gradient(to right, var(--bg-color-60) 5%, var(--bg-color-90));
+.n-drawer-mask {
+  background: var(--bg-gradient-60-90);
   backdrop-filter: blur(var(--bg-blur-20));
 }
 
+.n-drawer {
+  background: transparent;
+}
+
 .n-message-wrapper .n-message,
 .n-notification-container .n-notification,
 .n-tooltip.n-tooltip,

src/styles/base.scss

@@ -27,6 +27,7 @@
   --bg-black-70: rgba(0 0 0 / 70%);
   --bg-black-80: rgba(0 0 0 / 80%);
   --bg-black-90: rgba(0 0 0 / 90%);
+  --bg-gradient-60-90: linear-gradient(to right, var(--bg-color-60) 5%, var(--bg-color-90));
   --bg-red: rgba(255 222 223);
   --bg-red-20: rgba(255 222 223 / 20%);
   --bg-red-30: rgba(255 222 223 / 30%);