github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 06:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

fix(ui): bottom links of drawer scroll with content and disable main content scrolling when drawer is open

Browse source
This commit is contained in:
sophiafema 2025-08-16 15:30:40 +00:00
commit 5cb3c5fb5a
2 changed files with 40 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/assets/main.css
View file

@ -24,6 +24,15 @@
background-color: rgb(var(--v-theme-background, 30, 30, 30)) !important; background-color: rgb(var(--v-theme-background, 30, 30, 30)) !important;
} }
.no-scroll {
position: fixed;
height: calc(100vh - 48px);
top: 0;
right: 0;
overflow: hidden;
pointer-events: none;
}
.theme--dark.v-card { .theme--dark.v-card {
background-color: #1e1e1e !important; background-color: #1e1e1e !important;
} }

40
frontend/components/Layout/LayoutParts/AppSidebar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-navigation-drawer v-model="showDrawer" class="d-flex flex-column d-print-none position-fixed"> <v-navigation-drawer v-model="showDrawer" scrim class="d-flex flex-column d-print-none position-fixed">
<!-- User Profile --> <!-- User Profile -->
<template v-if="loggedIn"> <template v-if="loggedIn">
<v-list-item lines="two" :to="userProfileLink" exact> <v-list-item lines="two" :to="userProfileLink" exact>
@ -82,7 +82,7 @@
</template> </template>
<!-- Bottom Navigation Links --> <!-- Bottom Navigation Links -->
<template v-if="bottomLinks" #append> <template v-if="bottomLinks">
<v-list v-model:selected="bottomSelected" nav density="compact"> <v-list v-model:selected="bottomSelected" nav density="compact">
<template v-for="nav in bottomLinks"> <template v-for="nav in bottomLinks">
<div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title"> <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
@ -156,21 +156,43 @@ export default defineNuxtComponent({
get: () => props.modelValue, get: () => props.modelValue,
set: value => context.emit("update:modelValue", value), set: value => context.emit("update:modelValue", value),
}); });
const MOBILE_WIDTH = 760;
const { width: wWidth } = useWindowSize();
const isMobile = computed(() => wWidth.value <= MOBILE_WIDTH);
// Automatically open drawer on desktop
watch(showDrawer, () => { watch(showDrawer, () => {
if (window.innerWidth < 760 && state.hasOpenedBefore === false) { if (window.innerWidth < MOBILE_WIDTH && state.hasOpenedBefore === false) {
state.hasOpenedBefore = true; state.hasOpenedBefore = true;
} }
}); });
const { width: wWidth } = useWindowSize();
watch(wWidth, (w) => { watch([isMobile], ([mobile]) => {
if (w > 760) { if (mobile) {
showDrawer.value = true;
}
else {
showDrawer.value = false; showDrawer.value = false;
} }
else {
showDrawer.value = true;
}
}); });
// lock main screen, when drawer is open
const getMainEl = () => document.querySelector("main.v-main");
const toggleBodyScroll = (lock: boolean) => {
const main = getMainEl();
if (main) {
main.classList.toggle("no-scroll", lock);
}
};
watch([showDrawer, isMobile], ([open, mobile]) => {
toggleBodyScroll(open && mobile);
}, { immediate: true });
onBeforeUnmount(() => toggleBodyScroll(false)); // onlock on unmount
const allLinks = computed(() => [...props.topLink, ...(props.secondaryLinks || []), ...(props.bottomLinks || [])]); const allLinks = computed(() => [...props.topLink, ...(props.secondaryLinks || []), ...(props.bottomLinks || [])]);
function initDropdowns() { function initDropdowns() {
allLinks.value.forEach((link) => { allLinks.value.forEach((link) => {