jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Split Menu between md and smaller devices

Browse Source
This commit is contained in:
Jan Bader
2022-02-07 16:07:54 +00:00
parent 3c1d83d8a2
commit 95fcb9a586
3 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/App.vue
View File

@ -15,6 +15,9 @@ export default defineComponent({
},
toggleMenu () {
this.$store.commit("toggleMenu");
},
toggleMenuSize () {
this.$store.commit("toggleMenuSize");
}
},
beforeCreate () {
@ -26,7 +29,8 @@ export default defineComponent({
<template>
<div class="box-border w-full">
<div class="flex bg-gray-400 p-4 m-2 rounded-lg">
<span class="flex-1 font-bold text-5xl -my-3" @click="toggleMenu">≡</span>
<span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
<span class="flex-1">{{$store.getters.CurrentBudgetName}}</span>
@ -38,7 +42,7 @@ export default defineComponent({
</div>
<div class="flex flex-col md:flex-row flex-1">
<div :class="$store.state.ShowMenu ? 'visible' : 'hidden'" class="md:w-72 flex-shrink-0 w-full">
<div :class="($store.state.ExpandMenu ? 'md:w-72 ' : 'md:w-36 ') + ($store.state.ShowMenu ? '' : 'hidden')" class="md:block flex-shrink-0 w-full">
<router-view name="sidebar"></router-view>
</div>