Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/secanis/ng-simple-sidebar
A simple angular component to generate a sidebar with a hamburger menu.
https://github.com/secanis/ng-simple-sidebar
angular library nglib sidebar simple-sidebar
Last synced: 18 days ago
JSON representation
A simple angular component to generate a sidebar with a hamburger menu.
- Host: GitHub
- URL: https://github.com/secanis/ng-simple-sidebar
- Owner: secanis
- License: mit
- Created: 2020-03-23T16:50:46.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-10T16:16:58.000Z (4 months ago)
- Last Synced: 2024-10-30T09:43:06.602Z (4 months ago)
- Topics: angular, library, nglib, sidebar, simple-sidebar
- Language: TypeScript
- Homepage: https://secanis.github.io/ng-simple-sidebar
- Size: 6.21 MB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-simple-sidebar - A simple Angular component to generate a sidebar with a hamburger menu. (Table of contents / Third Party Components)
- trackawesomelist - ng-simple-sidebar (⭐7) - A simple Angular component to generate a sidebar with a hamburger menu. (Recently Updated / [Jan 30, 2025](/content/2025/01/30/README.md))
- fucking-awesome-angular - ng-simple-sidebar - A simple Angular component to generate a sidebar with a hamburger menu. (Table of contents / Third Party Components)
README
# ng-simple-sidebar
An easy library to implement asidebar with a mobile mode to your Angular app.
[](https://circleci.com/gh/secanis/ng-simple-sidebar)[](https://badge.fury.io/js/ng-simple-sidebar)
[](https://nodei.co/npm/ng-simple-sidebar/)
## Demo
A demo showcase app is available under the following url to click around an test the library.
[https://secanis.github.io/ng-simple-sidebar/](https://secanis.github.io/ng-simple-sidebar/)
## Installation and Setup
To install this library, run ([package on npmjs.com](https://www.npmjs.com/package/ng-simple-sidebar)):
npm install ng-simple-sidebar --save
and then from your angular `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgSimpleSidebarModule } from 'ng-simple-sidebar';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
NgSimpleSidebarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Once your library is imported, you can use it in your angular application:
```html
```
CSS for the basic structure
```css
html, body {
margin: 0;
padding: 0;
}
.content-wrapper {
display: flex;
flex-wrap: nowrap;
}
.content {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
padding: 20px;
}
```
And you can set the options from your application:
```typescript
import { Component, OnInit } from '@angular/core';
// you can import all required interfaces, used by the simple sidebar
import { NgSimpleSidebarService, SimpleSidebarPosition, SimpleSidebarItem } from 'ng-simple-sidebar';
export class AppComponent implements OnInit {
constructor(private ngSimpleSidebarService: NgSimpleSidebarService) {}
ngOnInit() {
this.sidebarItems: SimpleSidebarItem[] = [
{
name: 'Welcome',
icon: 'las la-home',
routerLink: ['/welcome'],
position: SimpleSidebarPosition.top
},
{
name: 'About',
icon: 'las la-address-book',
routerLink: ['/about'],
position: SimpleSidebarPosition.top
},
{
name: 'secanis.ch',
icon: 'las la-external-link-alt',
url: 'https://secanis.ch',
target: '_blank',
position: SimpleSidebarPosition.bottom
}
];
// required, configure items
this.ngSimpleSidebarService.addItems(this.sidebarItems);
// required, configure icons
this.ngSimpleSidebarService.configure({
openIcon: 'las la-bars',
closeIcon: 'las la-times',
});
// optional, configuration and set states
this.ngSimpleSidebarService.open();
this.ngSimpleSidebarService.close();
// optional, access states
sidebarConfig$ = this.ngSimpleSidebarService.getConfiguration();
isOpen$ = this.ngSimpleSidebarService.isOpen();
getTopsideItems$ = this.ngSimpleSidebarService.getTopsideItems();
getBotsideItems$ = this.ngSimpleSidebarService.getBotsideItems();
}
}
```
## Development
To generate prod builds:
```shell
npm run build:lib
npm run build:showcase
```
To build the demo application incl. the lib:
```shell
npm run build:watch // start development server for the library
npm run start // start demo showcase application
```
After that, you can visit the demo application under `http://localhost:4200`.
## License
MIT © [secanis.ch](mailto:[email protected])