AndrewJBateman/angular-material-nav

:clipboard: Angular app using Angular Material & Angular Material Schematics to create a responsive side navigation menu.

⚡ Angular Material Nav

• Angular app using Angular Material & Angular Material Schematics to create a responsive side navigation menu.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Material Nav
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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

📷 Screenshots

📶 Technologies

• Angular v15 JS framework
• Angular Material v15
• Material Design Screen breakpoints & Angular Breakpoint state used to determine when side menu appears
• Angular Material Sidenav modes are default 'over', 'side' and 'push'. Accessibility: add role attribute
• Angular Material Icons list of icons, categorized but not searchable
• Unsplash random face image used for profile

💾 Setup

• 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

💻 Code Examples

• 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();
      }
    });
}

🆒 Features

• sidebar collapses to burger when screen width < 700px (small tablet). App doesn't do much else - just demonstrates @angular breakpointObserver.
• Angular breakpoints using the Material design system explained here

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• Angular Material Breakpoint documentation

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com