CSS - material web components implementing drawer with the hero section - html

Question

I have started working with material web components on a new project for the first time. I am trying to use their persistent drawer with the hero section on a page, where I also have a toolbar.
The template looks like this:
<div id="app">
<aside class="mdc-drawer mdc-drawer--persistent mdc-typography">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content">
Header here
</div>
</header>
<nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
</a>
</nav>
</nav>
</aside>
<header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
<div class="mdc-toolbar__row">
<section class="menu mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section">
Section aligns to center.
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
file_download
print
bookmark
</section>
</div>
</header>
<div class="page-content">
<div class="landing-page-hero">
</div>
</div>
</div>
I don't have much css, I have copied from their demo the css for the page-content and added css for the landing-page-hero:
body {
margin:0;
}
.page-content {
display: inline-flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
}
.landing-page-hero {
min-height: 400px;
height: 45vh;
width: 100vw;
background-image: url('/img/hero-image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: 90% 60%;
display: flex;
align-items: center;
color: $white;
}
For some reason the drawer won't open when I have a div element with the id="app" that wraps the whole page. I am using this div element to mount Vue.
So, if I remove this element, then the drawer opens but only above the image:
But, like I said, I need this element to mount Vue, and when I have it then the drawer is not visible on clicking the menu, and the hero is not immediately below the toolbar, there looks like their is margin-bottom from the drawer that pushes it further down.
How can I make this work? So, that I have a toolbar with the drawer and a hero section immediately below the toolbar?

Answer 1

I have fixed the js issue part with requiring the material package after mounting the Vue on #app element:
window.Vue = require('vue');
const app = new Vue({
el: '#app'
});
window.mdc = require('material-components-web/dist/material-components-web')
window.mdc.autoInit();
require('./material/drawer');
And, then in the css, I have set the display of #app to display: flex, and then it worked.