Responsive Angular Sidebar Navigation Menu

Here is an example of how to configure the Responsive Angular Sidebar Navigation Menu:

Sidebar Configuration

In the app.component.html file, add the following code to include the sidebar:

<app-sidebar [sidebarConfig]="sidebarConfig"></app-sidebar>

Sidebar Config Object

Create a sidebarConfig object in your app.component.ts file:

import { SidebarConfig } from 'responsive-angular-sidebar';

sidebarConfig: SidebarConfig = {
  breakpoint: 'lg', // The breakpoint to switch to a compact sidebar
  compactSidebar: {
    width: '250px', // The width of the compact sidebar
    overlay: true // Whether to display an overlay when the sidebar is compact
  },
  expandedSidebar: {
    width: '300px', // The width of the expanded sidebar
    overlay: false // Whether to display an overlay when the sidebar is expanded
  }
};

Menu Configuration

Create a menu array in your app.component.ts file:

menu = [
  {
    label: 'Home',
    icon: 'home',
    route: '/home'
  },
  {
    label: 'About',
    icon: 'info',
    route: '/about'
  },
  {
    label: 'Contact',
    icon: 'mail',
    route: '/contact'
  }
];

Sidebar Menu

In the app.component.html file, add the following code to include the sidebar menu:

<app-sidebar-menu [menu]="menu" [sidebarConfig]="sidebarConfig"></app-sidebar-menu>

Responsive Breakpoints

In the app.component.ts file, add the following code to define the responsive breakpoints:

import { BreakpointObserver } from '@angular/cdk/layout';

breakpointObserver: BreakpointObserver = new BreakpointObserver();

breakpointObserver.observe([
  '(min-width: 1200px)', // lg breakpoint
  '(max-width: 1199px)', // xl breakpoint
  '(max-width: 959px)', // md breakpoint
  '(max-width: 759px)', // sm breakpoint
  '(max-width: 479px)' // xs breakpoint
]);

Custom CSS

Add the following CSS to your styles.css file to customize the appearance of the sidebar:

.app-sidebar {
  background-color: #333;
  color: #fff;
  padding: 20px;
  width: 300px;
}

.app-sidebar.menu-item {
  padding: 10px;
  border-bottom: 1px solid #333;
}

.app-sidebar.menu-item:last-child {
  border-bottom: none;
}

.app-sidebar.menu-item.icon {
  margin-right: 10px;
}

Here are the features of the Responsive Angular Sidebar Navigation Menu:

1. Pure Angular, jQuery Not used: The plugin is built using pure Angular, without the need for jQuery.
2. Responsive Design: The menu is fully responsive and works on any device, including phones, tablets, and desktops.
3. Easy to Use and Customizable: The plugin is easy to use and highly customizable, with a variety of options for customizing the layout and design.
4. Single Code for All Devices: The plugin uses a single codebase that works on all devices, eliminating the need for separate codes for different devices.
5. 100% Responsive and Mobile Friendly: The menu is fully responsive and mobile-friendly, making it easy to use on any device.
6. Bootstrap Framework 4 Support: The plugin is designed to work with Bootstrap 4, a popular front-end framework.
7. Drop Down Menu with Toggle Effect: The menu features a dropdown menu with a toggle effect, allowing users to easily navigate through the menu.
8. Dropdown Submenu Levels: The menu supports multiple levels of dropdown submenus, making it easy to create complex navigation menus.
9. Font Awesome Icons Used: The plugin uses Font Awesome icons to add visual interest to the menu.
10. Lightweight and No Image Needed: The plugin is lightweight and does not require any images, making it easy to integrate into any project.
11. Easy Integration for Your Web Projects: The plugin is easy to integrate into any web project, with a simple and intuitive API.
12. Varieties of Navbar Themes: The plugin offers a variety of navbar themes, allowing users to customize the look and feel of the menu.
13. Expanded Menu for Desktop, Tablet, and Phone: The menu features an expanded menu option for desktop, tablet, and phone devices.
14. Collapsible Menu for Any Device: The menu features a collapsible menu option that works on any device.
15. Off-Canvas Menu for Any Device: The menu features an off-canvas menu option that works on any device.
16. Horizontal Navigation Menu: The plugin supports horizontal navigation menus, allowing users to create a menu that spans the width of the screen.
17. Push Responsive Menu Mode: The plugin features a push responsive menu mode that allows users to create a menu that pushes the content to the side when opened.
18. Overlay Responsive Menu Mode: The plugin features an overlay responsive menu mode that allows users to create a menu that overlays the content when opened.
19. Shrink Responsive Menu Mode: The plugin features a shrink responsive menu mode that allows users to create a menu that shrinks the content when opened.
20. Customizable Menu Layout: The plugin allows users to customize the menu layout, with options for wide and boxed layouts.
21. Scrollbar on Vertical Navbar: The plugin features a scrollbar on vertical navbars, making it easy to manage long menu items.

The plugin also includes credits for the technologies used, including:

• Angular 9
• Bootstrap 4
• Font Awesome 5
• SCSS
• jQuery 3.4.1 (for non-Angular version)

Additionally, the plugin includes change logs, which track the updates and changes made to the plugin over time.