@angulogic/ng-sidebar v1.0.1

@angulogic/ng-sidebar

@angulogic/ng-sidebar is a dynamic, interactive, and highly configurable Angular sidebar component designed to provide a rich navigation experience in your Angular applications. It supports nested menus, search functionality, favorites management, theme toggling, responsive view modes, and resizable/auto-position capabilities.

Table of Contents

• Features
• Installation
• Usage
  • Basic Usage
  • Advanced Configuration
  • CSS Customization
• API Documentation
  • Models
  • Events
  • Methods
• Development
• Contributing
• License
• Maintainers

Features

• Dynamic Menu Navigation:
  Create multiple sidebar sections with nested menu items and submenus.

• Search & Favorites:
  Integrated search functionality with configurable matching strategies (contains, startsWith, endsWith, equal) and a favorites management system.

• Custom Banner & User Profile:
  Display a customizable banner (logo and title) and user profile section with click callbacks.

• Responsive & Flexible:
  Supports various view modes such as toggle, hover, mobile, and fix. Auto-positioning adapts the layout dynamically.

• Resizable Sidebar:
  End users can resize the sidebar while respecting minimum and maximum width constraints.

• Theme Switching:
  Built-in light/dark theme support along with an optional theme picker.

• Extensible Callbacks:
  Provides hooks for events like menu item clicks, toggles, search start/end, resizing events, and theme changes.

Installation

Install @angulogic/ng-sidebar via npm:

npm install @angulogic/ng-sidebar

Setup

You can add it to your angular.json for icons and fonts

"assets": [
    {
    "glob": "*/",
    "input": "./node_modules/@angulogic/ng-sidebar/assets",
    "output": "/assets/"
  }
],

Usage

Basic Usage

import { NgSidebarModule } from '@angulogic/ng-sidebar';
import { SidebarModel } from '@angulogic/ng-sidebar';

@NgModule({
  imports: [NgSidebarModule],
})
export class AppModule {}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  sidebarModel: SidebarModel = {
    bannerOptions: {
      title: 'My App',
      logo: 'assets/logo.png',
    },
    userOptions: {
      name: 'John Doe',
      avatar: 'assets/avatar.png',
    },
    sidebarData: [
      {
        title: 'Main Menu',
        data: [
          { name: 'Dashboard', route: '/dashboard' },
          { name: 'Settings', route: '/settings' },
        ],
      },
    ],
    options: {
      expand: true,
      theme: 'light',
    },
  };
}

<ng-sidebar [options]="sidebarModel"></ng-sidebar>

Advanced Configuration

You can customize the sidebar with content projection using directives like:

<ng-sidebar [options]="sidebarModel">
  <div al-sidebar-banner>Custom Banner Content</div>
  <div al-sidebar-top-user>Custom User Content</div>
  <div al-sidebar-menu>Custom Menu Content</div>
</ng-sidebar>

CSS Customization

You can customize the appearance of the sidebar by overriding CSS variables:

ng-sidebar {
  --primary: red !important;
  --bg-color: #f0f0f0 !important;
}

Available CSS Variables

API Documentation

Models

For more details on the available models, refer to the source code documentation.

Methods

Development

Run Locally

git clone https://github.com/skarahan35/angulogic.git
npm install
npm run start

Build for Production

cd projects/ng-sidebar
npm run build

Contributing

We welcome contributions to @angulogic/ng-sidebar!

1. Fork the repository.
2. Create a new branch: git checkout -b feature/your-feature-name
3. Make your changes and commit: git commit -m 'Add new feature'
4. Push to your branch: git push origin feature/your-feature-name
5. Open a pull request.

License

@angulogic/ng-sidebar is licensed under the MIT License.

Maintainers

• Serkan Karahan
• Ergül Ferik

Enjoy building with @angulogic/ng-sidebar! 🚀