{"id":24730981,"url":"https://github.com/secanis/ng-simple-sidebar","last_synced_at":"2025-10-09T23:30:53.615Z","repository":{"id":40452746,"uuid":"249489669","full_name":"secanis/ng-simple-sidebar","owner":"secanis","description":"A simple angular component to generate a sidebar with a hamburger menu.","archived":false,"fork":false,"pushed_at":"2024-10-10T16:16:58.000Z","size":6513,"stargazers_count":7,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T09:43:06.602Z","etag":null,"topics":["angular","library","nglib","sidebar","simple-sidebar"],"latest_commit_sha":null,"homepage":"https://secanis.github.io/ng-simple-sidebar","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/secanis.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-23T16:50:46.000Z","updated_at":"2024-09-21T08:01:31.000Z","dependencies_parsed_at":"2024-02-28T00:32:35.748Z","dependency_job_id":"4c0d4378-b64c-4bf1-99b0-25463d1a6b79","html_url":"https://github.com/secanis/ng-simple-sidebar","commit_stats":{"total_commits":86,"total_committers":2,"mean_commits":43.0,"dds":"0.38372093023255816","last_synced_commit":"877316f9bd35d4adfd49ff674c436e32456f7704"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/secanis%2Fng-simple-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/secanis%2Fng-simple-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/secanis%2Fng-simple-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/secanis%2Fng-simple-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/secanis","download_url":"https://codeload.github.com/secanis/ng-simple-sidebar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235879923,"owners_count":19059723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","library","nglib","sidebar","simple-sidebar"],"created_at":"2025-01-27T16:01:44.343Z","updated_at":"2025-10-09T23:30:48.234Z","avatar_url":"https://github.com/secanis.png","language":"TypeScript","readme":"# ng-simple-sidebar\n\nAn easy library to implement asidebar with a mobile mode to your Angular app.\n\n[![CircleCI](https://circleci.com/gh/secanis/ng-simple-sidebar.svg?style=svg)](https://circleci.com/gh/secanis/ng-simple-sidebar)[![npm version](https://badge.fury.io/js/ng-simple-sidebar.svg)](https://badge.fury.io/js/ng-simple-sidebar)![typescript types](https://badgen.net/npm/types/ng-simple-sidebar)![npm license](https://badgen.net/npm/license/ng-simple-sidebar)\n\n[![NPM](https://nodei.co/npm/ng-simple-sidebar.png?compact=true)](https://nodei.co/npm/ng-simple-sidebar/)\n\n## Demo\n\nA demo showcase app is available under the following url to click around an test the library.\n\n[https://secanis.github.io/ng-simple-sidebar/](https://secanis.github.io/ng-simple-sidebar/)\n\n## Installation and Setup\n\nTo install this library, run ([package on npmjs.com](https://www.npmjs.com/package/ng-simple-sidebar)):\n\n\tnpm install ng-simple-sidebar --save\n\nand then from your angular `AppModule`:\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n// Import your library\nimport { NgSimpleSidebarModule } from 'ng-simple-sidebar';\n\n@NgModule({\n\tdeclarations: [\n\t\tAppComponent\n\t],\n\timports: [\n\t\tBrowserModule,\n\n\t\t// Specify your library as an import\n\t\tNgSimpleSidebarModule\n\t],\n\tproviders: [],\n\tbootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nOnce your library is imported, you can use it in your angular application:\n\n```html\n\u003c!-- You can now use your library component in app.component.html --\u003e\n\u003cdiv class=\"content-wrapper\"\u003e\n\t\u003clib-ng-simple-sidebar\u003e\u003c/lib-ng-simple-sidebar\u003e\n\t\u003cdiv class=\"content\"\u003e\n        \u003crouter-outlet\u003e\u003c/router-outlet\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nCSS for the basic structure\n\n```css\nhtml, body {\n    margin: 0;\n    padding: 0;\n}\n\n.content-wrapper {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n}\n\n.content {\n    display: flex;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    padding: 20px;\n}\n```\n\nAnd you can set the options from your application:\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n// you can import all required interfaces, used by the simple sidebar\nimport { NgSimpleSidebarService, SimpleSidebarPosition, SimpleSidebarItem } from 'ng-simple-sidebar';\n\nexport class AppComponent implements OnInit {\n    constructor(private ngSimpleSidebarService: NgSimpleSidebarService) {}\n\n    ngOnInit() {\n        this.sidebarItems: SimpleSidebarItem[] = [\n            {\n                name: 'Welcome',\n                icon: 'las la-home',\n                routerLink: ['/welcome'],\n                position: SimpleSidebarPosition.top\n            },\n            {\n                name: 'About',\n                icon: 'las la-address-book',\n                routerLink: ['/about'],\n                position: SimpleSidebarPosition.top\n            },\n            {\n                name: 'secanis.ch',\n                icon: 'las la-external-link-alt',\n                url: 'https://secanis.ch',\n                target: '_blank',\n                position: SimpleSidebarPosition.bottom\n            }\n        ];\n        // required, configure items\n        this.ngSimpleSidebarService.addItems(this.sidebarItems);\n\n        // required, configure icons\n        this.ngSimpleSidebarService.configure({\n            openIcon: 'las la-bars',\n        \tcloseIcon: 'las la-times',\n        });\n\n        // optional, configuration and set states\n         this.ngSimpleSidebarService.open();\n         this.ngSimpleSidebarService.close();\n\n        // optional, access states\n        sidebarConfig$ = this.ngSimpleSidebarService.getConfiguration();\n\t    isOpen$ = this.ngSimpleSidebarService.isOpen();\n        getTopsideItems$ = this.ngSimpleSidebarService.getTopsideItems();\n        getBotsideItems$ = this.ngSimpleSidebarService.getBotsideItems();\n    }\n}\n```\n\n\n## Development\n\nTo generate prod builds:\n\n```shell\nnpm run build:lib\nnpm run build:showcase\n```\n\nTo build the demo application incl. the lib:\n\n```shell\nnpm run build:watch\t\t// start development server for the library\nnpm run start\t\t\t// start demo showcase application\n```\n\nAfter that, you can visit the demo application under `http://localhost:4200`.\n\n\n## License\n\nMIT © [secanis.ch](mailto:support@secanis.ch)\n","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Jan 30, 2025](/content/2025/01/30/README.md)","Layout Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsecanis%2Fng-simple-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsecanis%2Fng-simple-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsecanis%2Fng-simple-sidebar/lists"}