Element on top of v-app-bar

[Lucky-Strike1695]

Hi,

I'd like to know the correct way of placing a header above v-app-bar.
The v-app-bar component is designed - by default - to be the first element rendered, on top of the page/viewport.
On mobile app, I'm all good with that. But on web version for large screens, I want a header to appear above, and then have the v-app-bar below.

I managed to do so by 2 different ways, but I'm not sure that these are correct way of doing so.

Method 1 : width header outside of

<template>
  <!-- Header component outside of v-app -->
  <the-header v-if="mdAndUp"></the-header>

  <v-app>
    <!-- v-app-bar component, with "absolute" prop -->
    <v-app-bar height="96" absolute></v-app-bar>

    <v-main id="main-content">
        <slot />
    </v-main>

    <v-footer height="100"></v-footer>
  </v-app>
</template>

<style>
// Necessary CSS "hack" to prevent the header's height to be added to viewport creating an unnecessary scrollbar 
.v-application__wrap {
  min-height: 0vh !important;
}
</style>

Method 2 : inside of v-app width CSS styling

<v-app>
    <!-- Header component inside of v-app -->
    <the-header id="site-header" v-if="mdAndUp"></the-header>

    <!-- v-app-bar component, with "absolute" prop -->
    <v-app-bar id="app-bar" :class="mdAndUp ? 'on-large' : ''" height="96" absolute></v-app-bar>

    <v-main id="main-content" :class="mdAndUp ? 'on-large' : ''">
        <slot />
    </v-main>
    
    <v-footer height="100"></v-footer>
  </v-app>

Then, in main.css :

#app-bar.on-large{
  margin-top:150px;
}

#main-content.on-large {
  padding-top:250px;
}

I tried to cleanup the code to make it lighter, I hope I did not remove anything necessary for it to work.
On my setup, it does work as intented (even though it f*cks up the footer by messing its height, for whatever reason).

So, what it the best/cleaner way to achieve that ?
Thanks !