Skip to main content

App Bar Component

This document outlines the specifications for the AppBarComponent, an Angular component designed to provide a customizable app bar or navigation bar for web applications.

Purpose​

The AppBarComponent serves as a prominent navigation and information hub within web applications. It typically contains branding elements, navigation menus, and additional controls to enhance user experience and facilitate navigation throughout the application.

Usage​

Integrate the AppBarComponent into your Angular applications to establish a consistent and easily accessible navigation interface for users.

Inputs​

  1. title: (Optional) The title or branding text displayed within the app bar.

  2. logoUrl: (Optional) The URL of the logo or branding image displayed within the app bar.

  3. showMenu: (Optional) Controls the visibility of the navigation menu within the app bar. Defaults to true.

  4. menuItems: (Optional) An array of objects representing the items in the navigation menu. Each object should have the following properties:

    • label: (Required) The label or display text for the menu item.
    • link: (Required) The URL or route link associated with the menu item.
    • icon: (Optional) The icon to be displayed alongside the menu item label.

  5. userMenu: (Optional) An array of objects representing items in the user menu dropdown. Each object should have the following properties:

    • label: (Required) The label or display text for the user menu item.
    • action: (Optional) A callback function to be executed when the user selects the menu item.
    • icon: (Optional) The icon to be displayed alongside the user menu item label.

Events​

  1. menuItemClick: Fired when a menu item in the navigation menu is clicked. Emits the selected menu item object.

  2. userMenuItemClick: Fired when a user menu item in the dropdown is clicked. Emits the selected user menu item object.

Example​

<app-app-bar
  [title]="'My Application'"
  [logoUrl]="'assets/logo.png'"
  [showMenu]="true"
  [menuItems]="appMenuItems"
  [userMenu]="userDropdownItems"
  (menuItemClick)="onMenuItemClick($event)"
  (userMenuItemClick)="onUserMenuItemClick($event)"
></app-app-bar>

Notes​

  • Customize the styling and layout of the app bar to align with the overall design language and branding of your application.
  • Implement the menuItemClick and userMenuItemClick event handlers to respond to user interactions with the navigation menu items and user menu dropdown items, respectively.
// Example menu items for navigation menu
appMenuItems = [
  { label: 'Home', link: '/home', icon: 'home' },
  { label: 'About', link: '/about', icon: 'info' },
  { label: 'Contact', link: '/contact', icon: 'email' }
];

// Example items for user menu dropdown
userDropdownItems = [
  { label: 'Profile', action: this.navigateToProfile, icon: 'person' },
  { label: 'Settings', action: this.navigateToSettings, icon: 'settings' },
  { label: 'Logout', action: this.logout, icon: 'logout' }
];

onMenuItemClick(menuItem: any) {
  // Handle menu item click event
}

onUserMenuItemClick(menuItem: any) {
  // Handle user menu item click event
}

navigateToProfile() {
  // Navigate to user profile page
}

navigateToSettings() {
  // Navigate to settings page
}

logout() {
  // Perform logout action
}