Navbar

The Navbar component is a responsive Angular component that displays a navigation menu. It supports smooth scrolling and external links, with mobile-specific visibility adjustments.

Features

Responsive Design: Adjusts visibility and font sizes of menu items based on screen width.
Mobile Optimization: Only the first two menu items are visible on mobile devices.
Scroll Navigation: Smoothly scroll to specific sections of the page.
External Links: Open links in a new browser tab.
Customizable Menu: Accepts an array of menu items for flexible configuration.

Usage

Step 1: Import the Component

Add the NavbarComponent to your Angular project by including it in page component. Remember to add it into imports array.

import { NavbarComponent } from "src/app/components/navbar/navbar.component";
 
@Component({
  ...
  imports: [..., NavbarComponent],
  ...
})

Step 2: Add the Template

Include the component on your page:

<navbar></navbar>

Configuration

Customize the navigation menu by modifying the menuItems array.

menuItems: MenuItem[] = [
  { label: 'Home', id: 'home', type: 'scroll' },
  { label: 'About', id: 'about', type: 'scroll' },
  { label: 'Blog', link: 'https://example.com/blog', type: 'link' },
  { label: 'Contact', id: 'contact', type: 'scroll' },
];

Logo

Add your own logo in the /assets/icons folder.

<img src="./assets/icons/logo.svg" [alt]="config.appName + ' logo'" />

MenuItem Interface

interface MenuItem {
  label: string; // The label of the menu item
  type: "scroll" | "link"; // Type of menu item: scroll or link
  id?: string; // The ID of the target element for scrolling
  link?: string; // The URL for link navigation
}