Ionic/Vue - Show permanent Toolbar above InAppBrowser - vue.js

Question

I am seriously struggling to figure out how to layout the InAppBrowser in a small section of the screen.
I want to have a permament IonicToolbar above the InAppBrowser and eventually add my own navigation buttons.
I'm very new to Iconic/Vue and whatever I've tried so far just seems to show the browser on top of the IonToolbar and IonPage
BaseLayout
<template>
<ion-page>
<ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
</ion-header>
<ion-content>
<slot />
</ion-content>
</ion-page>
</template>
<script>
import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
} from "#ionic/vue";
export default {
props: ["pageTitle", "defaultBackLink"],
components: {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
},
};
</script>
BrowserLayout
<template>
<in-app-browser></in-app-browser>
</template>
<script>
import { InAppBrowser } from "#ionic-native/in-app-browser";
function beforeloadCallBack(params, callback) {
console.log(">>> beforeload: " + params.url.toString());
if (params.url.includes("https://www.google.com/")) {
console.log(">>> beforeload: allowed");
callback(params.url);
} else {
console.log(">>> beforeload: restricted");
alert("The URL is restricted!");
}
}
export default {
components: {
InAppBrowser,
},
setup() {
const options = {
location: "no",
zoom: "no",
hardwareback: "yes",
mediaPlaybackRequiresUserAction: "no",
hidenavigationbuttons: "yes",
hideurlbar: "yes",
toolbar: "no",
fullscreen: "no",
beforeload: "yes",
};
let browser = InAppBrowser.create(
"https://www.google.com",
"_blank",
options
);
browser.on("loadstop").subscribe((event) => {
console.log(">>> onLoadStop:" + event.url.toString());
});
browser.on("loadstart").subscribe((event) => {
console.log(">>> onLoadStart:" + event.url.toString());
});
browser.on("beforeload").subscribe((params) =>
beforeloadCallBack(params, () => {
return params.url;
})
);
},
};
</script>
HomePage
<template>
<base-layout>
<browser-layout></browser-layout>
</base-layout>
</template>
<script>
import BrowserLayout from "#/components/browser/BrowserLayout.vue";
import BaseLayout from "#/components/base/BaseLayout.vue";
export default {
components: {
BaseLayout,
BrowserLayout,
},
};
</script>