How to get a v-navigation-drawer to appear below an extended v-app-bar?

[daniel-slaugh]

I have a v-navigation-drawer containing filter selections and a main 'ribbon' on the top of my website. I'd like the ribbon to always take up the full width of the webpage and have the navigation drawer just take up the left side of the screen underneath the ribbon. I've tried using the v-app-bar with the 'extended' or 'extension' props for my ribbon but it seems like the vertical height for that component is fixed so it doesn't make room for the ribbon content or the v-navigation-drawer overlaps the ribbon. So the best I've found is to use a v-toolbar for the tabs and a v-window for the ribbon groups.

Any ideas of how to either get the v-app-bar ribbon working as expected or to create a navigation drawer that appears below the ribbon?

Ribbon.vue:

<template>
  <v-toolbar color="blue-grey-lighten-1" density="compact">
    <v-tabs v-model="ribbonTabs" color="white">
      <v-tab v-for="ribbon in ribbons">
        {{ ribbon.name }}
      </v-tab>
    </v-tabs>

    <v-spacer />

    <v-list-item prepend-icon="mdi-logout" @click.prevent="onLogout">
      Logout
    </v-list-item>
  </v-toolbar>

  <v-window v-model="ribbonTabs">
    <!-- Tabs -->
    <v-window-item v-for="(ribbon, index) in ribbons" :key="index">
      <v-card color="blue-grey-darken-1" variant="outlined" rounded="false">
        <v-card-item>
          <v-row dense>
            <!-- Ribbon Groups -->
            <template v-for="group in ribbon.groups" cols="flex">
              <component :is="group" />
              <v-col cols="auto" class="px-3">
                <v-divider vertical thickness="2" />
              </v-col>
            </template>
          </v-row>
        </v-card-item>
      </v-card>
    </v-window-item>
  </v-window>
</template>