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:
Philipp Fischbeck 2022-01-07 22:09:34 +01:00 committed by GitHub
parent 76d2eecd86
commit 2c17845169
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 17 deletions

View File

@ -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 {

View File

@ -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"),

View File

@ -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>;