How to use Vuetify grid system to create both a sidebar and a navbar?

I'm trying to create a background using Vuetify which has both a sidebar and navbar. It should look like this:

At the moment I've created the sidebar with v-navigation-drawer, however I can't get the navbar to go in the right place. How can I add the navbar to the following code so it looks like the image above?

<template>
<div id="app">
    <v-app id="inspire">
        <v-navigation-drawer
            color="#09151E"
            permanent
            expand-on-hover
        >
            <v-divider></v-divider>
            <v-list nav dense>
                <v-list-item link href="#">
                    <v-list-item-icon>
                        <v-icon color="white" small>mdi-lightbulb</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title class="title">Blue</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-card>Navbar</v-card>
    </v-app>
</div>

I know that writing v-card below isn't how it should be written, but using v-row and v-col makes whitespace appear around the corners of the page and doesn't really look good

All you need to do is:

• Create a v-app-bar or a v-toolbar component

• Add app prop to your v-navigation-drawer

Demo: https://codepen.io/aQW5z9fe/pen/GRpQqpG?editors=1010

<v-app-bar app>
  Title
</v-app-bar>

<v-navigation-drawer
  color="#09151E"
  permanent
  expand-on-hover
  app
>
...

You can add clipped-left prop to the app-bar if you want it to appear behind the navigation-drawer instead of being next to it.