mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
Fix double click on sidebar on smaller screens (#906)
The problem was that on smaller screens or when resizing, v-navigation-drawer would change its value on its own, but these changes were not propagated to AppSidebar. I also added a few missing type definitions for SidebarLinks.
This commit is contained in:
parent
76d2eecd86
commit
2c17845169
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-navigation-drawer class="d-flex flex-column d-print-none" :value="value" clipped app width="240px">
|
||||
<v-navigation-drawer v-model="drawer" class="d-flex flex-column d-print-none" clipped app width="240px">
|
||||
<!-- User Profile -->
|
||||
<template v-if="$auth.user">
|
||||
<v-list-item two-line to="/user/profile" exact>
|
||||
@ -124,9 +124,9 @@
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { computed, defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
|
||||
import { SidebarLinks } from "~/types/application-types";
|
||||
import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
|
||||
|
||||
@ -162,20 +162,32 @@ export default defineComponent({
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
setup(props, context) {
|
||||
// V-Model Support
|
||||
const drawer = computed({
|
||||
get: () => {
|
||||
return props.value;
|
||||
},
|
||||
set: (val) => {
|
||||
context.emit("input", val);
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
dropDowns: {},
|
||||
topSelected: null,
|
||||
secondarySelected: null,
|
||||
bottomSelected: null,
|
||||
};
|
||||
topSelected: null as string[] | null,
|
||||
secondarySelected: null as string[] | null,
|
||||
bottomSelected: null as string[] | null,
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
drawer,
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
@media print {
|
||||
.no-print {
|
||||
|
@ -7,7 +7,6 @@
|
||||
:bottom-links="bottomLinks"
|
||||
:user="{ data: true }"
|
||||
:secondary-header="$t('user.admin')"
|
||||
@input="sidebar = !sidebar"
|
||||
/>
|
||||
|
||||
<TheSnackbar />
|
||||
@ -31,6 +30,7 @@ import { defineComponent, ref, useContext, onMounted } from "@nuxtjs/composition
|
||||
import AppHeader from "@/components/Layout/AppHeader.vue";
|
||||
import AppSidebar from "@/components/Layout/AppSidebar.vue";
|
||||
import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
|
||||
import { SidebarLinks } from "~/types/application-types";
|
||||
|
||||
export default defineComponent({
|
||||
components: { AppHeader, AppSidebar, TheSnackbar },
|
||||
@ -45,7 +45,7 @@ export default defineComponent({
|
||||
sidebar.value = !$vuetify.breakpoint.md;
|
||||
});
|
||||
|
||||
const topLinks = [
|
||||
const topLinks: SidebarLinks = [
|
||||
{
|
||||
icon: $globals.icons.viewDashboard,
|
||||
to: "/admin/dashboard",
|
||||
@ -105,7 +105,7 @@ export default defineComponent({
|
||||
},
|
||||
];
|
||||
|
||||
const bottomLinks = [
|
||||
const bottomLinks: SidebarLinks = [
|
||||
{
|
||||
icon: $globals.icons.heart,
|
||||
title: i18n.t("about.support"),
|
||||
|
@ -2,8 +2,10 @@ import { TranslateResult } from "vue-i18n";
|
||||
|
||||
export interface SideBarLink {
|
||||
icon: string;
|
||||
to: string;
|
||||
to?: string;
|
||||
href?: string;
|
||||
title: TranslateResult;
|
||||
children?: SideBarLink[];
|
||||
}
|
||||
|
||||
export type SidebarLinks = Array<SideBarLink>;
|
||||
|
Loading…
x
Reference in New Issue
Block a user