Application layout fixed header of angular components with angularDart - dart

Question

I am trying to fixed the header and drawer in the app layout with the following code, but the header navigation is not responsive, the navigation items shifts to its right out of the screen. As the results are in the second image after running the additional code.
/* Drawer */
material-drawer .adf-drawer {
position: fixed;
}
/* Header */
material-content header {
position: fixed;
}
Header error image
Drawer error image
app_layout.html
<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
<material-list *deferredContent class="adf-drawer">
<div group class="mat-drawer-spacer"></div>
<div group>
<material-list-item>
<material-icon icon="inbox"></material-icon>Inbox
</material-list-item>
<material-list-item>
<material-icon icon="star"></material-icon>Star
</material-list-item>
<material-list-item>
<material-icon icon="send"></material-icon>Sent Mail
</material-list-item>
<material-list-item>
<material-icon icon="drafts"></material-icon>Drafts
</material-list-item>
</div>
<div group>
<div label>Tags</div>
<material-list-item>
<material-icon icon="star"></material-icon>Favorites
</material-list-item>
</div>
</material-list>
</material-drawer>
<material-content>
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title visible-desktop">AngularDart + Firebase</span>
<span class="material-header-title visible-mobile">AD + FB</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
Link 2
</nav>
<nav class="material-navigation">
<material-button icon>
<material-icon icon="more_vert"></material-icon>
</material-button>
</nav>
<login-logout></login-logout>
</div>
</header>
<div>
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
legere iriure blandit. Veri iisque accusamus an pri.
</div>
<div class="controls">
<h3>Options</h3>
<material-toggle [(checked)]="end" label="end">
</material-toggle>
</div>
</material-content>
app_layout.dart
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';
import 'package:yns_app/src/component/login-logout/login_logout_component.dart';
#Component(
selector: 'app-layout',
directives: const [
materialDirectives,
DeferredContentDirective,
MaterialButtonComponent,
MaterialIconComponent,
MaterialListComponent,
MaterialListItemComponent,
MaterialPersistentDrawerDirective,
MaterialToggleComponent,
LoginLogoutComponent,
],
templateUrl: 'app_layout.html',
styleUrls: const [
'app_layout.css',
'package:angular_components/app_layout/layout.scss.css',
])
class AppLayoutComponent {
bool end = false;
}
app_layout.scss
#import 'package:angular_components/css/material/material';
:host {
display: block;
overflow: hidden;
}
.controls {
align-items: flex-start;
display: flex;
flex-direction: column;
}
a:link, a:visited, a:active, a:hover {
color: $mat-white;
text-decoration: none;
}
/* Drawer */
material-drawer .adf-drawer {
position: fixed;
}
/* Header */
material-content header {
position: fixed;
}

Answer 1

app_component.html
<material-content>
<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
<material-list *deferredContent class="adf-drawer">
<div group class="mat-drawer-spacer"></div>
<div group>
<material-list-item>
<material-icon icon="inbox"></material-icon>Inbox
</material-list-item>
<material-list-item>
<material-icon icon="star"></material-icon>Star
</material-list-item>
<material-list-item>
<material-icon icon="send"></material-icon>Sent Mail
</material-list-item>
<material-list-item>
<material-icon icon="drafts"></material-icon>Drafts
</material-list-item>
</div>
<div group>
<div label>Tags</div>
<material-list-item>
<material-icon icon="star"></material-icon>Favorites
</material-list-item>
</div>
</material-list>
</material-drawer>
<header class="material-header shadow">
<div class="material-header-row">
<material-button icon
class="material-drawer-button" (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title visible-desktop">AngularDart + Firebase</span>
<span class="material-header-title visible-mobile">AD + FB</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
Link 2
</nav>
<nav class="material-navigation">
<material-button icon>
<material-icon icon="more_vert"></material-icon>
</material-button>
</nav>
<login-logout></login-logout>
</div>
</header>
<div>
Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
legere iriure blandit. Veri iisque accusamus an pri.
</div>
<div class="controls">
<h3>Options</h3>
<material-toggle [(checked)]="end" label="end">
</material-toggle>
</div>
</material-content>
app_component.css
material-content material-drawer {
position: fixed;
}
material-content header {
position: fixed;
}