{"id":13436386,"url":"https://github.com/balloob/react-sidebar","last_synced_at":"2026-10-19T13:03:29.063Z","repository":{"id":31581808,"uuid":"35146591","full_name":"balloob/react-sidebar","owner":"balloob","description":"A sidebar component for React","archived":true,"fork":false,"pushed_at":"2020-03-13T19:23:06.000Z","size":659,"stargazers_count":1450,"open_issues_count":36,"forks_count":222,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-10-14T09:58:37.734Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://balloob.github.io/react-sidebar/example/","language":"JavaScript","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/balloob.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2015-05-06T08:00:21.000Z","updated_at":"2026-10-13T18:57:12.000Z","dependencies_parsed_at":"2022-08-17T19:05:21.004Z","dependency_job_id":null,"html_url":"https://github.com/balloob/react-sidebar","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/balloob/react-sidebar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balloob%2Freact-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balloob%2Freact-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balloob%2Freact-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balloob%2Freact-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/balloob","download_url":"https://codeload.github.com/balloob/react-sidebar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balloob%2Freact-sidebar/sbom","scorecard":{"id":224711,"data":{"date":"2025-08-11","repo":{"name":"github.com/balloob/react-sidebar","commit":"ec2f025b66367f4ecb24ff39402695474e38f6a1"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Code-Review","score":2,"reason":"Found 3/15 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"121 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q","Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-vvj3-85vf-fgmw","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-pgr8-jg6h-8gw6","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T03:27:07.406Z","repository_id":31581808,"created_at":"2025-08-17T03:27:07.406Z","updated_at":"2025-08-17T03:27:07.406Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344794859,"owners_count":38311508,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-14T02:00:06.392Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-07-31T03:00:47.547Z","updated_at":"2026-10-19T13:03:28.744Z","avatar_url":"https://github.com/balloob.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","UI Components","Demos","React","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Uncategorized","Menu","React Components"],"readme":"# React Sidebar [![npm version](https://badge.fury.io/js/react-sidebar.svg)](http://badge.fury.io/js/react-sidebar) [![Build Status](https://travis-ci.org/balloob/react-sidebar.svg)](https://travis-ci.org/balloob/react-sidebar)\n\nReact Sidebar is a sidebar component for React 0.14+. It offers the following features:\n\n- The sidebar can slide over the main content or dock next to it.\n- Touch enabled: swipe to open and close the sidebar like on a native mobile app.\n- Easy to combine with media queries to show the sidebar only when there's enough screen-width ([see example](http://balloob.github.io/react-sidebar/example/responsive_example.html)).\n- Works on both the left and right side.\n- Tiny size: \u003c2.5kB gzipped\n- MIT license\n\n[See a demo here.](http://balloob.github.io/react-sidebar/example/)\n\n## Touch specifics\n\nThe touch interaction of the React Sidebar mimics the interactions that are supported by Android apps that implement the material design spec:\n\n- When the sidebar is closed, dragging from the left side of the screen will have the right side of the sidebar follow your finger.\n- When the sidebar is open, sliding your finger over the screen will only affect the sidebar once your finger is over the sidebar.\n- On release, it will call `onSetOpen` prop if the distance the sidebar was dragged is more than the `dragToggleDistance` prop.\n\nNote: The sidebar touch functionality doesn't work on IOS because of the \"swipe-to-go-back\" feature. Therefore the functionality has been disabled on IOS.\n\n## Installation\n\n`npm install react-sidebar`\n\nIf you use TypeScript, typings are [available on DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-sidebar) and can be installed with:\n\n`npm install @types/react-sidebar`\n\n## Getting started\n\nBy design, React Sidebar does not keep track of whether it is open or not. This has to be done by the parent component. This allows the parent component to make changes to the sidebar and main content based on the open/docked state. An example could be to hide the \"show menu\" button from the main content when the sidebar is docked.\n\nBecause React Sidebar can be toggled by dragging the sidebar into its open/closed position, you will have to pass in an `onSetOpen` method as a prop to allow the sidebar to control the open state in the parent.\n\nThe minimum React component to integrate React Sidebar looks like this:\n\n```jsx\nimport React from \"react\";\nimport Sidebar from \"react-sidebar\";\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n sidebarOpen: true\n };\n this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);\n }\n\n onSetSidebarOpen(open) {\n this.setState({ sidebarOpen: open });\n }\n\n render() {\n return (\n \u003cSidebar\n sidebar={\u003cb\u003eSidebar content\u003c/b\u003e}\n open={this.state.sidebarOpen}\n onSetOpen={this.onSetSidebarOpen}\n styles={{ sidebar: { background: \"white\" } }}\n \u003e\n \u003cbutton onClick={() =\u003e this.onSetSidebarOpen(true)}\u003e\n Open sidebar\n \u003c/button\u003e\n \u003c/Sidebar\u003e\n );\n }\n}\n\nexport default App;\n```\n\n## Responsive sidebar\n\nA common use case for a sidebar is to show it automatically when there is enough screen width available. This can be achieved using media queries via [`window.matchMedia`][mdn-matchmedia]. This again has to be integrated into the parent component so you can use the information to make changes to the sidebar and main content.\n\n[mdn-matchmedia]: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia\n\n```jsx\nimport React from \"react\";\nimport Sidebar from \"react-sidebar\";\n\nconst mql = window.matchMedia(`(min-width: 800px)`);\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n sidebarDocked: mql.matches,\n sidebarOpen: false\n };\n\n this.mediaQueryChanged = this.mediaQueryChanged.bind(this);\n this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);\n }\n\n componentWillMount() {\n mql.addListener(this.mediaQueryChanged);\n }\n\n componentWillUnmount() {\n mql.removeListener(this.mediaQueryChanged);\n }\n\n onSetSidebarOpen(open) {\n this.setState({ sidebarOpen: open });\n }\n\n mediaQueryChanged() {\n this.setState({ sidebarDocked: mql.matches, sidebarOpen: false });\n }\n\n render() {\n return (\n \u003cSidebar\n sidebar={\u003cb\u003eSidebar content\u003c/b\u003e}\n open={this.state.sidebarOpen}\n docked={this.state.sidebarDocked}\n onSetOpen={this.onSetSidebarOpen}\n \u003e\n \u003cb\u003eMain content\u003c/b\u003e\n \u003c/Sidebar\u003e\n );\n }\n}\n\nexport default App;\n```\n\n## Supported props\n\n| Property name | Type | Default | Description |\n| ------------------ | ------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| children | Anything React can render | n/a | The main content |\n| rootClassName | string | n/a | Add a custom class to the root component |\n| sidebarClassName | string | n/a | Add a custom class to the sidebar |\n| contentClassName | string | n/a | Add a custom class to the content |\n| overlayClassName | string | n/a | Add a custom class to the overlay |\n| defaultSidebarWidth | number | 0 | Width in pixles of the sidebar on render. Use this to stop the sidebar from poping in after intial render. (Overrides transitions) |\n| sidebar | Anything React can render | n/a | The sidebar content |\n| onSetOpen | function | n/a | Callback called when the sidebar wants to change the open prop. Happens after sliding the sidebar and when the overlay is clicked when the sidebar is open. |\n| docked | boolean | false | If the sidebar should be always visible |\n| open | boolean | false | If the sidebar should be open |\n| transitions | boolean | true | If transitions should be enabled |\n| touch | boolean | true | If touch gestures should be enabled |\n| touchHandleWidth | number | 20 | Width in pixels you can start dragging from the edge when the sidebar is closed. |\n| dragToggleDistance | number | 30 | Distance the sidebar has to be dragged before it will open/close after it is released. |\n| pullRight | boolean | false | Place the sidebar on the right |\n| shadow | boolean | true | Enable/Disable sidebar shadow |\n| styles | object | [See below](#styles) | Inline styles. These styles are merged with the defaults and applied to the respective elements. |\n| rootId | string | n/a | Add an id to the root component |\n| sidebarId | string | n/a | Add an id to the sidebar |\n| contentId | string | n/a | Add an id to the content. The driving use case for adding an element id to content was to allow react-scroll to scroll the content area of the site using react-sidebar. |\n| overlayId | string | n/a | Add an an id to the overlay |\n\n## Styles\n\nStyles are passed as an object with 5 keys, `root`, `sidebar`, `content`, `overlay` and `dragHandle`, and merged to the following defaults:\n\n```javascript\n{\n root: {\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n overflow: \"hidden\"\n },\n sidebar: {\n zIndex: 2,\n position: \"absolute\",\n top: 0,\n bottom: 0,\n transition: \"transform .3s ease-out\",\n WebkitTransition: \"-webkit-transform .3s ease-out\",\n willChange: \"transform\",\n overflowY: \"auto\"\n },\n content: {\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n overflowY: \"auto\",\n WebkitOverflowScrolling: \"touch\",\n transition: \"left .3s ease-out, right .3s ease-out\"\n },\n overlay: {\n zIndex: 1,\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n opacity: 0,\n visibility: \"hidden\",\n transition: \"opacity .3s ease-out, visibility .3s ease-out\",\n backgroundColor: \"rgba(0,0,0,.3)\"\n },\n dragHandle: {\n zIndex: 1,\n position: \"fixed\",\n top: 0,\n bottom: 0\n }\n};\n```\n\n## Acknowledgements\n\nMy goal was to make a React Component that implements the [material design spec for navigation drawers](https://material.io/design/components/navigation-drawer.html). My initial attempt was to improve [hamburger-basement by arnemart](https://github.com/arnemart/hamburger-basement) but I quickly figured that I better start from scratch. Still, that project helped me a ton to get started.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fballoob%2Freact-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fballoob%2Freact-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fballoob%2Freact-sidebar/lists"}