{"id":43847334,"url":"https://github.com/ubenzer/sidenavjs","last_synced_at":"2026-02-06T06:09:54.425Z","repository":{"id":36026425,"uuid":"40322220","full_name":"ubenzer/sidenavjs","owner":"ubenzer","description":"Android's sidenav implemented as a React component! No dependencies.","archived":false,"fork":false,"pushed_at":"2023-01-06T02:21:58.000Z","size":12339,"stargazers_count":32,"open_issues_count":44,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-23T23:52:31.780Z","etag":null,"topics":["android-sidenav","javascript","reactjs","sidebar","sidenav"],"latest_commit_sha":null,"homepage":"https://ubenzer.github.io/sidenavjs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ubenzer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2015-08-06T19:05:27.000Z","updated_at":"2024-08-16T15:43:29.000Z","dependencies_parsed_at":"2023-01-16T12:00:34.081Z","dependency_job_id":null,"html_url":"https://github.com/ubenzer/sidenavjs","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/ubenzer/sidenavjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubenzer%2Fsidenavjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubenzer%2Fsidenavjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubenzer%2Fsidenavjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubenzer%2Fsidenavjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ubenzer","download_url":"https://codeload.github.com/ubenzer/sidenavjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ubenzer%2Fsidenavjs/sbom","scorecard":{"id":906166,"data":{"date":"2025-08-11","repo":{"name":"github.com/ubenzer/sidenavjs","commit":"fdc8eada1e3a165ab1c329c90895627c226069ce"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"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":"Security-Policy","score":4,"reason":"security policy file detected","details":["Info: security policy file detected: SECURITY.md:1","Warn: no linked content found","Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1","Info: Found text in security policy: SECURITY.md:1"],"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":"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":"Code-Review","score":0,"reason":"Found 0/16 approved changesets -- score normalized to 0","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":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1","Info: no jobLevel write permissions found"],"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":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","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":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/ubenzer/sidenavjs/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/ubenzer/sidenavjs/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/ubenzer/sidenavjs/codeql-analysis.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/ubenzer/sidenavjs/codeql-analysis.yml/master?enable=pin","Info:   0 out of   4 GitHub-owned GitHubAction dependencies pinned"],"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":"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":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"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":7,"reason":"SAST tool detected but not run on all commits","details":["Info: SAST configuration detected: CodeQL","Warn: 0 commits out of 14 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":"102 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-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","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-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-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-9qmh-276g-x5pj","Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h","Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","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-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","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-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","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-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","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-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","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-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"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-24T17:25:25.154Z","repository_id":36026425,"created_at":"2025-08-24T17:25:25.154Z","updated_at":"2025-08-24T17:25:25.154Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29153275,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["android-sidenav","javascript","reactjs","sidebar","sidenav"],"created_at":"2026-02-06T06:09:53.764Z","updated_at":"2026-02-06T06:09:54.415Z","avatar_url":"https://github.com/ubenzer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sidenav.js\n\n[![devDependency Status](https://david-dm.org/ubenzer/sidenavjs/dev-status.svg)](https://david-dm.org/ubenzer/sidenavjs#info=devDependencies)\n[![Build Status](https://travis-ci.org/ubenzer/sidenavjs.svg?branch=master)](https://travis-ci.org/ubenzer/sidenavjs)\n\nSidenav.js is a React component that enables users add to left side navigation to their website that behaves like a native side navigation component of an Android application. **No dependencies!** Only *3K* when minified and gzipped!\nOpen Google Play Store and swipe your finger from the left of the screen. This library tries to provide the exact same behavior.\n\n![Sidenav Screencast Gif](sidenav-preview.gif)\n\n[Hi-res Video](https://www.youtube.com/watch?v=pXpKrVUUHX4)\n\n## Demo\nTo see a live demo click [here](https://ubenzer.github.io/sidenavjs/) or scan the barcode at the end of the page. Don't forget to try it on your mobile phone too! Swipe your finger from the left of the screen towards the right, just like you Open a sidenav in Android!\n\n## Install\n\n```bash\nnpm install --save sidenavjs\nyarn add sidenavjs\n```\n\n## Usage (minimal setup)\n\n```jsx\nimport React, { Component } from 'react'\n\nimport Sidenav from 'sidenavjs'\n\nclass Example extends Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      sidebarOpen: false\n    }\n  }\n\n  onSetSidebarOpen = open =\u003e {\n    this.setState({ sidebarOpen: open })\n  }\n\n  render () {\n    return (\n      \u003cSidenav\n        open={this.state.sidebarOpen}\n        onSetOpen={this.onSetSidebarOpen}\n        sidenav={\n          \u003cdiv\u003esidenav contents\u003c/div\u003e\n        }\n      \u003e\n        \u003cdiv\u003e\n          body contents\n          \u003cbutton onClick={() =\u003e { this.onSetSidebarOpen(true) }}\u003e\n            Click here to open the sidenav\n          \u003c/button\u003e\n        \u003c/div\u003e\n      \u003c/Sidenav\u003e\n    )\n  }\n}\n```\n\n## Features\n1. Mobile first. Means: The library is small and robust, optimized for fluidity and framerate.\n2. Multi-finger handled. Means: We won't confuse your fingers and throw a bunch of exceptions if you\ntouch with more then one finger.\n3. You can open/close sidenav programmatically.\n4. You can a attach callback to learn if the user is touching the sidenav.\n5. You can a attach callback to learn if an animation in progress or not.\n6. Sidenav contains only a minimal CSS bundled with it: You can add your custom classes and styles to make the styling perfect.\n\n## API\nYou can pass a couple of props to Sidenav.\n\n### sidenav\n**Type:** node\n\n**Is required:** Yes\n\n**Default value:** N/A\n\nThe provided node will be shown as the content of the sidenav.\n\n### children\n**Type:** node\n\n**Is required:** Yes\n\n**Default value:** N/A\n\nThe provided node should represent the actual page contents. Sidenav will open alongside the node provided as children. Sidenav expects to be close to the root of the component tree as much as possible. As sidebar opens over the whole page, you should wrap the whole page with the Sidenav component.\n\n### open\n**Type:** boolean\n\n**Is required:** Yes\n\n**Default value:** N/A\n\nIf true the sidenav will be displayed. You can change the value programmatically to open/close sidenav by your custom logic. (e.g. on button click)\n\n### onSetOpen\n**Type:** function(boolean)\n\n**Is required:** Yes\n\n**Default value:** N/A\n\nIf the sidenav's open/close state changes due to the user action (e.g. swiping, touching backdrop etc.) this function is called with a boolean value. Calling the\nfunction with *true* means the sidenav is now opened, and calling with *false* means it is closed. **You are expected to update the `open` value with the value\nprovided by this function.** Please see the example above to see how it works.\n\n### onSetBusy\n**Type:** function(boolean)\n\n**Is required:** No\n\n**Default value:** () =\u003e {} (noop)\n\nIf provided, this function is called by the sidenav when sidenav becomes busy or\nwhen sidenav becomes available again. It will be called with a single boolean variable. `true` represents `sidenav` is busy and `false` represents that it is\navailable again. In the current implementation, sidebar is \"busy\" when an animation is in progress. In the future \"being busy\" may also cover other operations.\n\n### onTouch\n**Type:** function(boolean)\n\n**Is required:** No\n\n**Default value:** () =\u003e {} (noop)\n\nIf provided, this function is called by the sidenav when a touch operation is being handled by the sidenav. It will be called with a single boolean variable. `true` represents `sidenav` is handling a touch and `false` represents that it is\ndone handling. Please note that this doesn't necessarily mean that user is touching the sidenav itself. The user might be dragging from the left side of the screen or touching the backdrop as well. As long as a touch is handled by the library this callback will be notified.\n\n### options\n**Type:** object\n\n**Is required:** No\n\n**Default value:** [Click here](https://github.com/ubenzer/sidenavjs/blob/master/src/index.js#L26)\n\nOptions are used to customize sidenav's behavior to your liking. `options` is an object and accepts a couple of different keys. **Please note that you can't change options after rendering Sidenav component.** This is an intentional choice mostly for performance reasons. If you need to change an option for some reason you should remove and re-render the component.\n\n#### options.extraClosePixels\n**Type:** number\n\nDue to styling that overflows out of sidenav, such as shadows, swiping sidebar out of screen might not be enough. Although sidenav is swiped out of the screen, its shadow might still leak into the screen. Due to this reason, you can provide `extraClosePixels`.\n\n#### options.width\n**Type:** number\n\nThis number determines the width of the sidebar. If not provided, the width of the `sidenav` node will be automatically calculated and used.\n\n#### options.backdropOpacity\n**Type:** number between 0 and 1\n\nThis number determines the opacity of the backdrop when it is fully deployed.\n\n#### options.sidenavClass\n**Type:** string\n\nIf you want to provide a class name for the sidebar element, you can do so.\n\n#### options.sidenavStyle\n**Type:** object\n\nIf you want to provide styling to the sidebar element, you can do so. The object should follow react's style attribute conventions.\n\n#### options.backdropStyle\n**Type:** object\n\nIf you want to provide styling to the backdrop element, you can do so. The object should follow react's style attribute conventions.\n\n#### options.contentStyle\n**Type:** object\n\nIf you want to provide styling to the children (content), you can do so. The object should follow react's style attribute conventions.\n\n#### options.dragStartSensitivity\n**Type:** number\n\nThe number of pixels on the left side of the screen that is sensitive to swiping right. Due to humans fingers being big, swiping from the left side of the screen doesn't really start from the 0th pixel on the left. This setting is used to set how many pixels should trigger dragging from the left, thus displaying the sidenav.\n\nIf the number is too small, people won't be able to easily swipe from left to display the sidenav. If the number is too big regular movements (scrolling etc.) might be mistakenly detected as sidenav swiping.\n\n#### options.swipeSensitivity\n**Type:** number\n\nIf sidenav is swiped with a certain amount of speed, even when it is not half way through it'll still open/close. This number adjusts the sensitivity to that. The number's measurement unit is \"pixel difference per touch event\". I am aware that this doesn't mean much. Better to increase/decrease and find the good fit yourself. :-)\n\n\n#### options.defaultAnimationSensitivity\n**Type:** number\n\nSidenav animation reacts to the swipe speed of the user. If the user takes a rapid action, the animation is gradually speeded up to fit the user's rhythm for a more native-like experience. This number is used to adjust the reaction difference. The number itself is multiplayer in an equation. It is better to play with it and see the difference.\n\n#### options.animationDuration\n**Type:** number\n\nThe default animation duration for the sidebar in milliseconds. This will be adjusted to be slower faster depending on the distance that sidenav needs to animate and speed of the swipe.\n\n## Setting up the development environment\n0. Discuss the change that you want to introduce. You can open an issue for that.\n1. Fork the project.\n2. Run `npm i` in the project root and in `example` folder.\n3. Run `npm start` in the project root and in `example` folder in two different consoles. This will start a test app where you can check your changes alongside with the actual component.\n4. Browse http://localhost:3000 to see your changes.\n5. Develop something.\n6. Make a pull request.\n\n## Contributing\nJust open a PR or a ticket.\n\n## License\n\nMIT © [ubenzer](https://github.com/ubenzer)\n\n## Your barcode to the demo\n![Barcode to Demo](demoqr.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fubenzer%2Fsidenavjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fubenzer%2Fsidenavjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fubenzer%2Fsidenavjs/lists"}