Is there a way to ensure that the main content remains below the sidebar when it is opened? I searched the official Vuetify website but couldn't find any relevant information. Could the changing padding of the mainContent be causing this issue?
============
app.vue:
<template>
<v-app>
<Header
v-on:leftChange="leftChange"
></Header>
<Left
ref="LeftMethod"
></Left>
<Main/>
</v-app>
</template>
<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Left from "@/components/Left.vue";
import Main from "@/components/Main.vue";
export default {
components:{
'Header' : Header,
'Footer' : Footer,
'Left' : Left,
'Main' : Main
},
methods: {
leftChange() {
this.$refs.LeftMethod.changeA();
},
}
}
</script>
＝＝＝＝＝＝＝＝＝＝
Main:
<template>
<v-content>
<v-container fluid fill-height>
<div>MainContent</div>
</v-container>
</v-content>
</template>
========
Header:
<template>
<v-app-bar app clipped-left>
<v-app-bar-nav-icon @click="leftChange"></v-app-bar-nav-icon>
</v-app-bar>
</template>
<script>
export default {
methods: {
leftChange: function(){
this.$emit('leftChange');
},
}
}
</script>
==============
Left:
<template>
<v-navigation-drawer
app
v-model="a"
clipped
stateless
>
</v-navigation-drawer>
</template>
<script>
export default {
data(){
return {
a: false,
}
},
methods: {
changeA() {
this.a = !this.a;
},
}
}
</script>