Simple, easily customizable, animated menu.
Clone or download
itikhonenko Merge branch 'fix/improvements' into 'master'
[Fix] Improvements

See merge request igor_tikhonenko/simple-sidenav!2
Latest commit f80b04f Dec 24, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e initial commit Dec 7, 2018
projects/simple-sidenav [Fix] Fix errors in readme Dec 24, 2018
src [Fix] Fix animation module Dec 24, 2018
.editorconfig initial commit Dec 7, 2018
.gitignore initial commit Dec 7, 2018
LICENSE add README Dec 20, 2018
README.md fix typo Dec 24, 2018
angular.json initial setup Dec 7, 2018
package-lock.json [Fix] Fix animation module Dec 24, 2018
package.json [Fix] Fix animation module Dec 24, 2018
tsconfig.json initial setup Dec 7, 2018
tslint.json initial commit Dec 7, 2018

README.md

Simple sidenav

Simple sidenav is a simple, easily customizable, animated menu, with the possibility of infinite nesting that was built specifically for Angular apps.

Demos

Installation

npm install simple-sidenav --save

Usage

Module

# app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SimpleSidenavModule } from 'simple-sidenav';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SimpleSidenavModule,
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

# app.component.ts
import { Component } from '@angular/core';
import { SimpleMenu } from 'simple-sidenav';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  menu: SimpleMenu[] = [...];
  animation: SimpleAnimation = {
    in: { value: 'slide-in-stagger' },
    out: { value: 'slide-out', duration: 200 }
  };

  onClick(item: {id: number|string, name: string, icon: string, index: number}) {
    ...
  }
}

HTML

# app.component.html
<sm-simple-sidenav
  [menu]="menu"
  [activeID]="'2'"
  [animation]="animation"
  [withArrow]="true"
  (onSidenav)="onClick($event)">
</sm-simple-sidenav>

[menu] prop example:

menu: SimpleMenu[] = [
  { "id": "1", "name": "Ruby on Rails", "icon": "assets/images/rails.png", "menu": [
    { "id": "1", "name": "Models", "menu": [
      { "id": "1", "name": "Active Record Basics" },
      { "id": "2", "name": "Active Record Migrations" },
      { "id": "3", "name": "Active Record Validations" },
      { "id": "4", "name": "Active Record Callbacks" },
      { "id": "5", "name": "Active Record Associations" },
      { "id": "6", "name": "Active Record Query Interface", "menu": [...] }
    ] },
    ] },
  { "id": "2", "name": "Angular", "icon": "assets/images/angular.png", "menu": [...] },
  ...
]

NOTE: id must be unique, an icon is optional, a menu can contain an infinite level of nested menu

[activeID] prop example:

If you want menu to be opened by default at some position just pass an id of menu item to [activeID] prop.

[activeID]="'yourMenuItemID'"

[animation] prop example:

We have two types of animation, in and out. Value is a name of animation. Duration is an optional parameter that shows how long the animation should work.

For in: we have two animations for choice slide-in | slide-in-stagger.

For out: just one slide-out.

{
  "in": { "value": "slide-in-stagger" },
  "out": { "value": "slide-out", "duration": "200" }
}

If you don’t want any animations - just pass false into [animation]="false"

API

Props Default value Interface Description Required
[menu] none SimpleMenu[] See example above. true
[animation] false SimpleAnimation Pass object with animation name. See example above. false
(onSidenav) ---- -------- Pass callback function to listen for sidenav clicks. $event contains an id and index of the clicked element. false
[animate] false boolean Set to true if you want to animate the first appearance of the sidenav. false
[withArrow] true boolean Set to false if you want to hide an arrow icon. false
[activeID] none string Pass an ID of menu item if you want it to be opened by default. false

License

Simple sidenav is Copyright © 2015-2018 Codica. It is released under the MIT License.

About Codica

Codica logo

Simple sidenav is maintained and funded by Codica. The names and logos for Codica are trademarks of Codica.

We love open source software! See our other projects or hire us to design, develop, and grow your product.