{"id":13480823,"url":"https://github.com/arkon/ng-sidebar","last_synced_at":"2025-03-27T11:30:58.681Z","repository":{"id":48032176,"uuid":"63270742","full_name":"arkon/ng-sidebar","owner":"arkon","description":"[Inactive] Angular sidebar component.","archived":true,"fork":false,"pushed_at":"2021-11-15T18:37:43.000Z","size":4853,"stargazers_count":388,"open_issues_count":26,"forks_count":136,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-10-14T09:01:38.728Z","etag":null,"topics":["angular","component","sidebar"],"latest_commit_sha":null,"homepage":"https://echeung.me/ng-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/arkon.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}},"created_at":"2016-07-13T18:38:45.000Z","updated_at":"2024-03-13T08:24:54.000Z","dependencies_parsed_at":"2022-08-12T17:10:29.738Z","dependency_job_id":null,"html_url":"https://github.com/arkon/ng-sidebar","commit_stats":null,"previous_names":[],"tags_count":84,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arkon%2Fng-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arkon","download_url":"https://codeload.github.com/arkon/ng-sidebar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245835976,"owners_count":20680302,"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","component","sidebar"],"created_at":"2024-07-31T17:00:45.452Z","updated_at":"2025-03-27T11:30:58.412Z","avatar_url":"https://github.com/arkon.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","UI Components"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Menu"],"readme":"# ng-sidebar\n\n⚠️　**This package is deprecated and not maintained.** ⚠️\n\n---\n\n[![NPM](https://nodei.co/npm/ng-sidebar.png?compact=true)](https://nodei.co/npm/ng-sidebar)\n\n**[Demo](https://echeung.me/ng-sidebar)**\n\n*Formerly called [ng2-sidebar](https://github.com/arkon/ng2-sidebar)*\n\nAn Angular sidebar component.\n\n\n## Installation\n\n```shell\nnpm install --save ng-sidebar\n```\n\n### SystemJS configuration\n\nIf you're using SystemJS, be sure to add the appropriate settings to your SystemJS config:\n\n```js\nconst map = {\n  // ...\n  'ng-sidebar': 'node_modules/ng-sidebar',\n  // ...\n};\n\nconst packages = {\n  // ...\n  'ng-sidebar': {\n    main: 'lib/index',\n    defaultExtension: 'js'\n  },\n  // ...\n};\n```\n\n\n## Changelog\n\nSee the [releases page](https://github.com/arkon/ng-sidebar/releases) on GitHub.\n\n\n## Usage\n\nAdd `SidebarModule` to your app module:\n\n```typescript\nimport { SidebarModule } from 'ng-sidebar';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, SidebarModule.forRoot()],\n  bootstrap: [AppComponent],\n})\nclass AppModule {}\n```\n\nIn your app component, simply use add a `\u003cng-sidebar-container\u003e` wrapper, then place your `\u003cng-sidebar\u003e`(s) and content within it.\nYour page content should be in some container with a `ng-sidebar-content` attribute.\n\n```typescript\n@Component({\n  selector: 'app',\n  template: `\n    \u003c!-- Container for sidebar(s) + page content --\u003e\n    \u003cng-sidebar-container\u003e\n\n      \u003c!-- A sidebar --\u003e\n      \u003cng-sidebar [(opened)]=\"_opened\"\u003e\n        \u003cp\u003eSidebar contents\u003c/p\u003e\n      \u003c/ng-sidebar\u003e\n\n      \u003c!-- Page content --\u003e\n      \u003cdiv ng-sidebar-content\u003e\n        \u003cbutton (click)=\"_toggleSidebar()\"\u003eToggle sidebar\u003c/button\u003e\n      \u003c/div\u003e\n\n    \u003c/ng-sidebar-container\u003e\n  `\n})\nclass AppComponent {\n  private _opened: boolean = false;\n\n  private _toggleSidebar() {\n    this._opened = !this._opened;\n  }\n}\n```\n\nIf nothing seems to show up, your wrappers' heights may be collapsing. Try adding a height (e.g. `height: 100vh;`) to the wrapper `\u003cng-sidebar-container\u003e` or other wrapper elements you may have. (See [issue #100](https://github.com/arkon/ng-sidebar/issues/100) for more info.)\n\nA directive is also provided to easily close the sidebar by clicking something inside it:\n\n```html\n\u003cng-sidebar\u003e\n  \u003ca closeSidebar\u003eCloses the sidebar\u003c/a\u003e\n\u003c/ng-sidebar\u003e\n```\n\nYou can also use the `open()` and `close()` functions:\n\n```html\n\u003cng-sidebar #sidebar\u003e\n  \u003cbutton (click)=\"sidebar.close()\"\u003eClose sidebar\u003c/button\u003e\n\u003c/ng-sidebar\u003e\n\n\u003cbutton (click)=\"sidebar.open()\"\u003eOpen sidebar\u003c/button\u003e\n```\n\n\n## Functions\n\nThe sidebar has a few public functions:\n\n| Function | Description |\n| -------- | ----------- |\n| `open()` | Opens the sidebar. |\n| `close()` | Closes the sidebar. |\n| `triggerRerender()` | Manually trigger a re-render of the container. Useful if the sidebar contents might change. |\n\n\n## Styling\n\nVarious class names are attached to the sidebar and container for easier styling.\n\nIf you are using Angular's default emulated view encapsulation, you may have to use the `\u003e\u003e\u003e` selector to target the sidebar's classes. Check out [Angular's documentation](https://angular.io/guide/component-styles#deep) for more details. Note that the `/deep/` selector [will soon be deprecated](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/68qSZM5QMRQ/pT2YCqZSomAJ).\n\n### Sidebar\n\n| Class name | Description |\n| ---------- | ----------- |\n| `ng-sidebar` | Always on the sidebar element. |\n| `ng-sidebar--opened` | When `opened` is `true`. |\n| `ng-sidebar--closed` | When `opened` is `false`. |\n| `ng-sidebar--left` | When `position` is `'left'` (or the `'start'`/`'end'` aliases are equivalent to `'left'`). |\n| `ng-sidebar--right` | When `position` is `'right'` (or the `'start'`/`'end'` aliases are equivalent to `'right'`). |\n| `ng-sidebar--top` | When `position` is `'top'`. |\n| `ng-sidebar--bottom` | When `position` is `'bottom'`. |\n| `ng-sidebar--over` | When `mode` is `'over'`. |\n| `ng-sidebar--push` | When `mode` is `'push'`. |\n| `ng-sidebar--slide` | When `mode` is `'slide'`. |\n| `ng-sidebar--docked` | When the sidebar is docked (i.e. it is \"closed\" and `dock` is `true`). |\n| `ng-sidebar--inert` | Ignores pointer clicks. Class is applied when the sidebar is closed. |\n| `ng-sidebar--animate` | When `animate` is `true` for a sidebar. |\n\n### Backdrop\n\n| Class name | Description |\n| ---------- | ----------- |\n| `ng-sidebar__backdrop` | Class of the backdrop `div`. Note that the `div` is only in the DOM when the backdrop is shown. |\n\n### Page content\n\n| Class name | Description |\n| ---------- | ----------- |\n| `ng-sidebar__content` | Class of the wrapper `div` for the page content. |\n| `ng-sidebar__content--animate` | When `animate` is `true` for the container. |\n\n\n\n## Options\n\n### `\u003cng-sidebar-container\u003e`\n\n### Inputs\n\n| Property name | Type | Default | Description |\n| ------------- | ---- | ------- | ----------- |\n| contentClass | string | | Additional class name on the `div` wrapping the page contents. |\n| backdropClass | string | | Additional class name on the overlay element. |\n| showBackdrop | boolean | `false` | Controls the backdrop state of the sidebar container. This should be two-way bound. |\n| allowSidebarBackdropControl | boolean | `true` | Determines if the container component respects the sidebar's `showBackdrop` input option. |\n| animate | boolean | `true` | Animates the container sliding. |\n\n#### Outputs\n\n| Property name | Callback arguments | Description |\n| ------------- | ------------------ | ----------- |\n| showBackdropChange | `showBackdrop: boolean` | Emitted when `showBackdrop` is modified. This allows for you to do \"two-way binding\" (i.e. `[(showBackdrop)]`). |\n| onBackdropClicked | | Emitted when a backdrop is clicked. |\n\n\n### `\u003cng-sidebar\u003e`\n\n#### Inputs\n\n| Property name | Type | Default | Description |\n| ------------- | ---- | ------- | ----------- |\n| opened | boolean | `false` | Controls the opened state of the sidebar. This should be two-way bound. |\n| mode | `'over'`, `'push'`, `'slide'` | `'over'` | See the \"Modes\" section. |\n| dock | boolean | `false` | Show the sidebar as docked when closed. |\n| dockedSize | string | `'0px'` | When `mode` is set to `'dock'`, this value indicates how much of the sidebar is still visible when \"closed\". |\n| position | `'left'`, `'right'`, `'top'`, `'bottom'`, `'start'`, `'end'` | `'start'` | What side the sidebar should be docked to. `'start'` and `'end'` are aliases that respect the page's language (e.g. `start` is the same as `left` for English, but would be `right` for Hebrew. |\n| autoCollapseHeight | number | | Window height in pixels in which to automatically close the sidebar. |\n| autoCollapseWidth | number | | Window width in pixels in which to automatically close the sidebar. |\n| autoCollapseOnInit | boolean | `true` | Collapse sidebar based on `autoCollapseHeight` and/or `autoCollapseWidth` on initial render as needed. |\n| animate | boolean | `true` | Animate the opening/closing of the sidebar. |\n| sidebarClass | string | | Additional class name on the sidebar element. |\n| ariaLabel | string | | Value for the sidebar's `aria-label` attribute. |\n| trapFocus | boolean | `false` | Keeps focus within the sidebar when open. Note that this only works if there's one sidebar open at a time. |\n| autoFocus | boolean | `true` | Automatically focus the first focusable element in the sidebar when opened. |\n| showBackdrop | boolean | `false` | If a translucent black backdrop overlay should appear over the page contents when the sidebar is opened.  This is ignored if the sidebar's parent container has its `allowSidebarBackdropControl` property set to `true`. |\n| closeOnClickBackdrop | boolean | `false` | Whether clicking on the backdrop of the open sidebar will close it. |\n| closeOnClickOutside | boolean | `false` | Whether clicking outside of the open sidebar will close it. |\n| keyClose | boolean | `false` | Close the sidebar when a keyboard button is pressed. |\n| keyCode | number | `27` | The [key code](http://keycode.info/) for `keyClose`. |\n\n#### Outputs\n\n| Property name | Callback arguments | Description |\n| ------------- | ------------------ | ----------- |\n| onContentInit | | Corresponds with `ngAfterContentInit` lifecycle event of the sidebar component. |\n| openedChange | `opened: boolean` | Emitted when `opened` is modified. This allows for you to do \"two-way binding\" (i.e. `[(opened)]`). |\n| onOpenStart | | Emitted when the sidebar is opening. |\n| onOpened | | Emitted when the sidebar is opened. |\n| onCloseStart | | Emitted when the sidebar is closing. |\n| onClosed | | Emitted when the sidebar is closed. |\n| onTransitionEnd | | Emitted when the animation for opening or closing ends. |\n| onModeChange | `mode: string` | Emitted when `mode` is changed. |\n| onPositionChange | `position: string` | Emitted when `position` is changed. |\n\n#### Modes\n\n##### `over`\n\nThis is the default mode. The sidebar slides in over the page contents.\n\n##### `push`\n\nThe page contents is pushed to make space for the sidebar.\n\n##### `slide`\n\nThe entire page slides over to show the sidebar. Note that this only works if you have one sidebar open at a time.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkon%2Fng-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farkon%2Fng-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farkon%2Fng-sidebar/lists"}