Sticky app bars

[DamoClarkson]

Hi, I need to place 3 bars in an app and have them all sticky beneath each other so they stay on screen when I scroll.

Not sure how to do it as 1 of the bars is a tabs bar and the system bar will only show on dev / uat environments and so the body of the main app will need to adjust accordingly like with the "app" property

So I have:

v-system-bar
v-app-bar
v-app-bar with a v-tabs and a v-navigation-drawer for mobile

The tabs have to be separate as the full row for the tabs is a different colour to the app-bar and so I cant use the extension of app-bar to slot them in, they are also dynamic so on mobile they only show icons.

This is my current structure:

<v-app>
<system-message v-if="devEnvironment" :message="message" :type="'error'" ></system-message>
<top-nav-bar :loggedIn="loggedIn"></top-nav-bar>
<main-nav-bar v-if="loggedIn"></main-nav-bar>
<v-main> <v-container> <router-view></router-view> </v-container> </v-main>
</v-app>

thanks