- Sidenav menu with profile image and menu options is shown on lhs when in full-screen mode (>700px - tablet size). Otherwise it is hidden and only shows when the burger menu icon is pressed
- Sidenav menu is hidden at a screen width of 700px or less using an observable to compare 700px with actual screen width - see Code Example below
- Profile image is a random female facial image that changes each time app is started or refreshed
- AfterViewInit interface lifecycle hook used once components view is instantiated
- Run
npm i
to install dependencies.
- Create Unsplash account and paste API key in
environment.ts
- Run
ng serve
for a dev server.
- Navigate to
http://localhost:4200/
. The app will automatically reload if you change any of the source files.
npm run build
to create build file with Ahead of Time (AOT) compilation. Source map explorer set to false
navigation.component.ts
nav component showing use of observable that is set true or false and controls if sidebar menu open or closed
// breakpoint observer checks if width is over 700px.
// If so use 'over' mode and close side nav
// If less than 700px use 'side' mode & open side nav
ngAfterViewInit() {
this.observer
.observe(["(max-width: 700px)"])
.pipe(delay(1)) // delay 1mS
.subscribe((res) => {
if (res.matches) {
this.sidenav.mode = "over";
this.sidenav.close();
} else {
this.sidenav.mode = "side";
this.sidenav.open();
}
});
}
- Status: Working.
- To-Do: Nothing
- This project is licensed under the terms of the MIT license.