GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 07:28:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix sticky blur navbar

Browse Source
This commit is contained in:
jxxghp
2023-06-27 07:22:19 +08:00
parent f58713735f
commit 88c87dfe20
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@layouts/components/VerticalNavLayout.vue
+10 -1
View File
@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { useDisplay } from 'vuetify'
import VerticalNav from '@layouts/components/VerticalNav.vue' import VerticalNav from '@layouts/components/VerticalNav.vue'
import { useDisplay } from 'vuetify'
export default defineComponent({ export default defineComponent({
setup(props, { slots }) { setup(props, { slots }) {
@@ -76,6 +76,7 @@ export default defineComponent({
{ {
class: [ class: [
'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid', 'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
'layout-navbar-sticky',
mdAndDown.value && 'layout-overlay-nav', mdAndDown.value && 'layout-overlay-nav',
route.meta.layoutWrapperClasses, route.meta.layoutWrapperClasses,
], ],
@@ -104,6 +105,12 @@ export default defineComponent({
@use "@layouts/styles/placeholders"; @use "@layouts/styles/placeholders";
@use "@layouts/styles/mixins"; @use "@layouts/styles/mixins";
.navbar-blur {
backdrop-filter: blur(1rem);
// background-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
.layout-wrapper.layout-nav-type-vertical { .layout-wrapper.layout-nav-type-vertical {
// TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
block-size: 100%; block-size: 100%;
@@ -118,7 +125,9 @@ export default defineComponent({
} }
.layout-navbar { .layout-navbar {
position: sticky;
z-index: variables.$layout-vertical-nav-layout-navbar-z-index; z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
inset-block-start: 0;
.navbar-content-container { .navbar-content-container {
block-size: variables.$layout-vertical-nav-navbar-height; block-size: variables.$layout-vertical-nav-navbar-height;