{"_id":"@crave/farmblocks-sidenav","_rev":"143-cd3837c0c35b9000827a77ea1b6d81c8","name":"@crave/farmblocks-sidenav","dist-tags":{"canary":"3.2.9-alpha-react-responsive-6256.1.3","latest":"3.2.9"},"versions":{"0.1.1-alpha-side-nav-js-5314.1.84":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5314.1.84","description":"","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1","react-responsive":"^8.0.1"},"devDependencies":{"react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"9c72f3064549f72fd26638c3e900375d8ada2b17","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5314.1.84","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-bmCHlEI69SO+pXNfokodDVrEVnydBPxQDn9u5BL0ZRcm9Xo/Zsl7jBlJc+FUiPbSi86yhcEI6pIYOiPpUh/v9g==","shasum":"ed27910120615baed3e49b999b3359de6e6d516e","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5314.1.84.tgz","fileCount":11,"unpackedSize":23873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoOQWCRA9TVsSAnZWagAAkgQP+gNQWg7G2/j1xcv6xkxV\nlyCniMdA8v8R+wn3E3wr+OYUECueIuiLdQIDs1imv0lRMpj78iy4jwwRSCYS\nO7nigbyika+uBsODfc4jBN6+1HzkSR4nfWTSgd8SE2LDDe1UiqRfEIcHtgSs\n+mkNooGvaiK8p5HqegCTiX+2GB6L/fDqQ4IMy8XU9NX/PKVQ/wTDqjMg9nGJ\nI5XlmOcI1dPCIE+pCtaae7CrqvcxodHbq0sQik4D6+yVraqS9MFixHOvd0WK\nDfyxtIKSVqN4dSWU2KmFNd/9BMCFSOCAcydCeKaee1iIX9XGfyjzOUXyQEFH\nk1MyRZyPxg3NCpZhlYoAsyThiqD45e26QOLy2w2YAuycQpUzGF9HC6fAw6e/\nwS6IJE878q4RGht7G5QbqlohvBxw/dEua6+0ChSfu6TWdcUhbDo4x5qSIVGl\nC/bQRc85zuH6GmgSdPQDpK3yoWBpMhewIQw1gJqR0rbi7BGOz0Kz2z+FFxix\nEsKb5/h+1XcHfiFFjAOvhKb4nR9szhhdJdBOj9vuzpzhmQLERqqPgqosNqis\nm25mXiRX8a1LNIVrdOqZPIf9RtD9gyel4ICSP2ADI+0xw3mCexzQ7cqxEufp\n8eWjqC4A31oyFWLm/Oe8WxyrIBUHWqi4ih5pUkpfdmXKksvFPaeQ9TKdLrEG\nXH94\r\n=dNkk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEHIORLRjHACu/8NxfvBh2lP1RbmeI8CJs8KW5aAYDphAiBDpWtv8nsumP9hFzwcRvBjN5ZzO1rt8eL0NdyRTxQa/Q=="}]},"maintainers":[{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5314.1.84_1570825237425_0.7785124914300392"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5315.1.81":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5315.1.81","description":"","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1","react-responsive":"^8.0.1"},"devDependencies":{"react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"5dee8badbadad375ce013ca52b0d0f9c97290820","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks SideNav\n\n\n\n## Installation\n\n```\nnpm install @crave/farmblocks-sidenav\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5315.1.81","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-uMwcm7fqK+ius3S7HKRkVEmmtxE+OB9jcBgqa9z2a11ypk+MsTRf0Qp4aG6AhNQLVlJuBETQzH9qZReNshHQRA==","shasum":"10447825fb2a3ce009c1204c2e548d5ac30dd4aa","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5315.1.81.tgz","fileCount":11,"unpackedSize":25160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoOmWCRA9TVsSAnZWagAApNcP/2JSOGsDlcC5ue8C/K4W\nGAXmx5BDv7F5zDxFI6JHjHEYl0pK3PtvxdDNUzfCLM9ACUDSBNehlHcwu3Xq\nnhWJJ+Fu3fTksZyCsLeV/Diciy3aE0N9jD3w5nNO9XmYpYMhu4etYavZIPwa\nRuDyYycGZu+0hHqZ3X4CUbOzvNqYce7Rr4ikYNLuo9ZilkcqKgVW3QQKW6kw\nBs7JMklzjA/mc2oT/F7SEhE75ZKfKguQmIQxOtta+ULoHiVNh3bpUCr8w8xG\nHcwD+RbVAH3ytPQCYlLfNPJFqb5uuDmytH58AKB95UmSgWA0sVcjijiJOHDv\n3/sL54OtRXlRljkIrQJiPV0vnFbfXI2v9i2M2+vJ7+I16lH1H4VD/Mzj7JbH\ncF/X8Ijq9Aj1mCvcN9vfwoFbxa3Jg7TwYkyl6wHL9kmM1nl7wWA+10OPCvog\nnPSOtZ72I7dqm1zWPJUIj553xQ7zC0ECZ7IO7e2/W0+YNr5UBetCTuIyaYAp\n3Qj0cu5YJ1cviQZ+iUbdiVl7LqhXWJddqm0jGjCuHaJwffL4gTDs7dzFRccf\nITQr/7kfSuHGex+y4jLhz1vRHZ+zcRcnAef1Tq+j1MeRhJG3qkssMijOr1VH\ndyOPCEqdvFAMeZQzrPx47F/cUuOui8gU4N3feYA5GUdSric/LmlJees2NEx3\nQw8m\r\n=mlti\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSuxrrtKaaaXj0lW0t5uDG6IAA6T0rCs62mgXdf8xKOwIgFNt2MNXU6Xe4eKXdaZ7M585o7RDhOspSaYVwmcZxkLw="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5315.1.81_1570826645542_0.7622634695834059"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5317.1.74":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5317.1.74","description":"","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1","react-responsive":"^8.0.1"},"devDependencies":{"react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"035224d422fb0ad25f0a74a8055e627221743e35","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks SideNav\n\n\n\n## Installation\n\n```\nnpm install @crave/farmblocks-sidenav\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5317.1.74","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-EZ/5i0hFGWN1bN3NaENUCqVEMSWjgcsrM57dFU2TLUZV8RGvL6QXwBDhdcu17eso3ZJi94YE5s4qz/qchi2iNA==","shasum":"6c018cad217501748ec8f1f5c53020ab5ba4d777","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5317.1.74.tgz","fileCount":11,"unpackedSize":25160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdo5nXCRA9TVsSAnZWagAASWwQAKLsggV2lOIbcPmCJtvQ\nco6PWfXM+shl+5nn7/iMLyKgeFG5KLNTrITxopyDQrPQDXi7htOmLBvWiww1\nEBklxUWAZj53PCHZMpPNCLVu6/m1TubyJ6S5HPGCmlSnXS6ViNJZXfIb09GB\nMqocyaC/tA9IrzzzwKwlcovpeSe88j7Nzu0fvZs9Gk/0bqLKuIqRVbi7syZX\n5UGCL0Sj7GrYUXCNcl/oUmDvX4nHvIFnTV6JYCQcBgQhQoRtteTN4xJrtIfT\nqMWUZ9ve54iSKda86yYPWu5apZMAlOCaqWidZMOS8b/iONF6PFKqh71mRTqg\nxQ/NxI0yJqqXIC1/NLjPkYbKuhMaBoCMwccZVSMjsP2Or+cSpCWxYKPYxhm1\nl8AnUEy3q0em+pL1r8zMv/NddJklhBTTreJpyyljKMrhaPA47qI39lCr7cmM\ncvFG5gd62nOg4jA6J95Ny2/nix4O+lrUISdCFOjZ8/gNpPEIGrUHQwwZMvE1\ngciwEBq+OE4Oh+i8hgM+90lQPK7dp25hDe1tb3ucaeh99J2f2bu0SrLroolB\nmRXwyMEOG9EhTq/obaCFyLN0dWK3ydYnT7ijNIvFM823BTTC+bW3Z6qCnwE0\nwo1ljTCSQtAgnosU3dplPPXQ+4JDwSn9S/I2eFbpj8tFi6lV9XjKurogiShc\njx8m\r\n=1/DB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzCkm1L1ZL2gfXP8iF5p9gPWyd63/7oLwo/6aAzEimsAIhAKG+xiIUMU/IVoNMyLeTb6ZKUGil/DullGZa9b3v2E7Q"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5317.1.74_1571002838629_0.4926916384193951"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5328.1.84":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5328.1.84","description":"","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"a222dfe3da03e2feff107f2d2bc48c4400bda51b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks SideNav\n\n\n\n## Installation\n\n```\nnpm install @crave/farmblocks-sidenav\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5328.1.84","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-j3y6GYemxqMEN9m/apHRYFAz4jXyuOInUvPJUx18Qv6JX1w8mYmFOGCVxgzGJKkTM82GLEptL1qM8T2gEWNHig==","shasum":"3c633903a0f84b7fa669b67afa5f350086b24805","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5328.1.84.tgz","fileCount":12,"unpackedSize":26254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpIsGCRA9TVsSAnZWagAAa4gP/itSuDX42YCjuMauGHmI\n336pNp+LIBxaJZeSwdyjTUvwyWRLpACUJ1z/xKTfTHFxI4GX7vD6s+UEmW2b\n+27KDrGs51s9ueNEUvNgT90aBAB4jacWIrnESbG/cBzqW0x0ceXy0jrpRTZ6\nkL/Vr1fdi5Ott0XgUY4Js/MWKlTA7/wZfYWuXtrujdFJQO+PbSTxHsnR5NdC\nR1+Ovol3gbeEFy5G4KPVT88y9UAAXwoJ4Xi80SB9E//i5Ibplf8FlqkjAdXJ\nJZXjXnB8gX3AHmI5isIqFtVvU9MjAACfmANW6lydHj3OmEy1UJd5yQJoQ6av\npKuGe5Zlphx/NRzI6kSyYwePXvz6SPE11o458NT7JKFu5fEtacUdNvXDlnRc\nQMw/4UJL+XhDY+FXLm3n9i1jejcCBCu8YAZ1n7UzIPFHH6/0V0vYIyYLPR6A\nkl7ZXfoSA0ejE/PMuLTVgl6rc0QnMU96dY4CFmAz7qQF8HmbOPTavctfX9uP\ntgZvcV9WhCCh/7u0R2ugMFL80EsGPAN0oSdqg6reqN4a6zNn8wwCPktsA02U\nUPmd1P+phU3uioHqluDr01aSOyCt1X5bUKtNdysN23JRghcBRyBmv/gjEcFW\narpc+gMhJ0bFSzin3TXuky2eqmDn0eO5x5dE/O1wnEsyvYekm7HkxnTxPeze\n47tc\r\n=GEch\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGU3lHWQ2BbrFgbhJJ5wrouiuh8YfLRqP2f5CDJysCv7AiEAlUE4zwQqlaUmzAkjcT0232rJASUi4YNp9wTqvNDVxwM="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5328.1.84_1571064582421_0.818295725224504"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5339.1.81":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5339.1.81","description":"","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"230b47a96d1b7f3928b7934c01adae91e94dd861","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks SideNav\n\n\n\n## Installation\n\n```\nnpm install @crave/farmblocks-sidenav\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5339.1.81","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-1uRQ3ASpTKJTLwwry73aUz700jO2qPuxdEqrUxJ4OUufvVhYAdibodmfWV7Y8Oz984lc2vfDcgNPep7ahcS61A==","shasum":"37390c18d5741a7873b831222b35a399cc9fbe58","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5339.1.81.tgz","fileCount":13,"unpackedSize":28047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpRR5CRA9TVsSAnZWagAA1DMP/jn9ZOJKZzqb6VPY0oc5\nF5AQDrzanhJ6QX3LEN9GQGihaxgHwLf6cK1J5CY8eJAGl3D0J8DqgUdg6ZbG\nwOhu1zl5wGOtxRW3q4wmAfbMy0ddFJpWfNMZYJbqI2N70+h70J5nzvjFQns7\neX5zOHuXmu3lRlJ7sohZSgnBxZ39SD7N2+F6pkerxm48Fz+134NrYMg7Vhkt\nnH9giwTsm0NZL3VYEdmZ8b7LNo1TFl9rLs/lLz5uD8DTL3g3POTJbXbcKPY5\niIvi7QOlgPLzq2Hmlvv18t7GIJ45ghYrn6jD3rlqbTwTJhghCFFLj55qdq5O\nwh9MkrTYniG1USbxf7GwDEdlQEW+40Du/rpqe1KU0/rnRPqRw4IBAayD5jiH\nLgIhD8Xy256lhr8x/x6tTnjrq84BhWe8Zbzq4KMJ2uYfJeEwVlE6iDVcm/BQ\nMC1E+C0MBu9d2iVutsqcXMCRqyx19fcfgpZR009A/dbkWRltfxe6CCm/uRiX\nWcdWaVvgej3i5ow0wx+fk4UaQfjUR2gAYChlk/dK8/stc2wivFlk73/kaYt7\nBOa9idTrwsypDn5BU600m/c8XMWTLLDpFywVoBnRra65vSm+f/CNEgeSIS63\nflUZxKhS6k7faKJFaupoHjp+6CzOUPTUHi1bTHrlp9n/+eXCgdJEXe3wKT5r\naoto\r\n=/hao\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTPn/XKEP2GfeBM+7lo4V0lhRdM3x1uWWf9oU23W2xrAIhANue7aHOB5ELXVJLHptQSNFdM5ojcCkRsmIr/CCDdr+f"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5339.1.81_1571099768581_0.6603627665840883"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5343.1.77":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5343.1.77","description":"","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-modal":"^2.1.6","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"1199b8ead9814f985fce4efecbe8f7435cad548e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"\n\n# Farmblocks SideNav\n\n\n\n## Installation\n\n```\nnpm install @crave/farmblocks-sidenav\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5343.1.77","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-k74wfi+sAr0zElxFNY1yVPA2LjL8L2+7zuNqMVkMD7nbSvwDKG7OLAIzR1zy3OP4CpjWNVlwm3VXW0Qed836Fg==","shasum":"3597e1478028f3366d43d8cd55e58466c74d41f5","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5343.1.77.tgz","fileCount":12,"unpackedSize":26859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpc4yCRA9TVsSAnZWagAAJOAP/if6UC6Sx8fpaE130Eph\ntzl3wcpok0114A00r81ISZr65tF0H9EbYEe9+qIkCj9EQPhKcNbszqG5LwZE\nbdjs+yBzE4cJ5rxErpHVLKYv7DTd6M6BKavEKWicT/cU8J2FNCWh63gNgZvt\nOlk+3a31ROXVSFiaFTLRwPzI6RZVvaCjxx/LpCs8xk8QqPyH/r7z++m7fbQu\nRdbVchP2I4cIZ3NsItjRGjOsHG52rzsQX0GgBXDD5wSSpFzNwwpgV4+VDmBF\nVbEE12uy6Nw21RALwQedRoe8tx/WINEaPSzoJEgFbJGgLSi0MvOOOA8n47cl\noYS97vo/mkSkM+NuIYKPndbfJJz4aR1Bir6YUyWX+q29BxmBVIaMQA5aDTUn\nJB32ZjTjzm/X0JFIQ8VB0xu1A7O9ZI3MXTdl90o/clKlKX6JR4KEzrt0g9KP\n9xORtF3s5tdT92qGyjUIkhfig2zTTcJP3Doy5JXZI2TJmffkvr7eeMsH/Jte\nWO2yEwWu/LJtdHtAeeSNkxAk8RCNigpul1vVgdKB/k9XJyOOBkgnHy0KFK7g\nJWsfNPEF9nnUURraQqPGrEuoZUC3MHjhPng7H3bs8tsNIgAuK+5EabYB2hXw\ntLvck6z7peGhgtLQZZMXQ6EyJXGav903RAiG98T/yDfi1Z8ag9wdB6Qg8BrS\nELHl\r\n=6Pfr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYcZxU12zd6snJ5bBhkpMoZmaOWwZ5/ScXb/fx4+zCuAIgTsf3ox0lM40WaVAmEka82ihdj96/80QLOX1ZB0ZzsKQ="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5343.1.77_1571147313922_0.3159831504449784"},"_hasShrinkwrap":false},"0.1.1-alpha.2717":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha.2717","description":"Sidebar navigation menu","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-modal":"^2.1.6","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"7089f8ec4fca12d408c259c322eb805b96595e17","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"# Farmblocks SideNav\n\nSidebar navigation menu\n\n## Installation\n\n```\nnpm install @crave/farmblocks-sidenav\n\nDocs https://cravefood.github.io/farmblocks/?path=/story/sidenav--side-nav-push\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha.2717","_nodeVersion":"10.7.0","_npmVersion":"lerna/3.18.1/node@v10.7.0+x64 (darwin)","dist":{"integrity":"sha512-BQravnOVyUBqtAJPAr0vEf5rNg6TxRD+tlpPVKx8X1zXZH+OFTw8LJqAMmhxzx7KoLoNyE36MVkWq80oi/5NAg==","shasum":"51636a017cd604dbb39ef06479bb92b1e89ba243","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha.2717.tgz","fileCount":4,"unpackedSize":2815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp1HZCRA9TVsSAnZWagAAYYsP/jluDPBhirKRqnFTtxMH\nb50El8D/+PpL4o9lz5tvWzEgLI+Qv5IG4HIDDkKvz7i4ejfq73h5fmHM/ww6\n8XC+ycEaRrQIl1csbcl/z4HkhQKps09VuPAldQiHPdntOWi+7Y+ver490iJu\nYRP67G4iZwIoC1s0XiCxM0mtXcDru1r5Qqk8nPVf8R39bwDZDUTPWz+jtf8D\nZo8j0O9sLawcBHJ57T0u93hG5rGe14zx/TsctVv/CRCYv207EuuRdWx8AllA\nsE1rlFKi3fKlB9Tg2C4NORb/rwMiWMxFGFn0yGYE7o1Dz/Ww8nTrlktR8P3A\n0WPDdvDQ33zWPT5pHXrw85ZhRn5Nb6gJboiDKLEJC5+8A6lqIOjWEZRSs6nw\nWQBFdnEyoMVsny6jNa58e4Dydxl4jAhqHY/l1MB7MM88yp1ovW4zG2Hwl2NT\notz3ig51aSXqLSoFQVQB5FSHDb3uZCUX10Fzo7czBeMd+Cc0hUy9iYrvSn4u\nNZCHvr1JbrMMBPxNL3BBJh/EOj0SVTS0GrjsugLNM5wFhtagLp8K9gJyEwaa\nBwmchvh7d9lTcnaGtRT5K1sK+LErDC8j37QrticYZz/TZk9UQxckqYW0X5j+\n8xu0ijGrrY2o22QLSUJZtjlqDlQoxcuNlkbW+SpSH7h8ZZBexMiFviAtPvZn\nLIib\r\n=KJlc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDb2zQ/4/hMgI5f0TWbMXNWvJO2PtnqSQXFPFrUChr5nQIhALCE4CsYI+xhy/h7kl8zFwS/HBYNV04h9IL3y9J8HrQr"}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha.2717_1571246553232_0.4463539390489397"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5368.1.72":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5368.1.72","description":"Sidebar navigation menu","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-modal":"^2.1.6","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"8387f5910bd083dc991890f81a1187526778fd5d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"# Farmblocks SideNav\n\nSidebar navigation menu\n\n## Installation\n\n```\nnpm install @crave/farmblocks-sidenav\n\nSee [Docs](https://cravefood.github.io/farmblocks/?path=/story/sidenav--side-nav-push)\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5368.1.72","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-hJIUp88KeagAeLW4C5kdPeeMPRPvR+ewI/uZv442zkefaDyKA17ld0pVCyFA2JK5Ebd73Y6E/lyr8uo8AhxsDg==","shasum":"b5ac67763b26434e556da724e8540239417e323c","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5368.1.72.tgz","fileCount":12,"unpackedSize":29565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp1yqCRA9TVsSAnZWagAAsqoP/2pKKE+KQySDBeRzqoN7\n3xPkvRVdTNkQZ1fkrGyZreCf75/oSsi1V8rmyu9g9595CQ6U00b4c8llQ5vX\nNWyZeAM+2IkDT+q2MWqmQircwBqyC5nBxi/4C54jWfkaGf8x9UVCDokGlgW5\nxR6Yyk9w2i4y6XIKJ15GsT9NMsuCEdHr3DuaQnZYYgXtYZ5sTtEZ5cUWlEgb\nOu0gDcMPWFBwnvGgW6/GkQGPpACf341A9/fT58yVe4Vv5SSECRAi+VqmhIMz\nd2dNOmonY49NuYoB4wmVRUxQMpMF7OoAybU+sg59PI/EvcS57u3J19iIMMjD\nuF8H2g70ClmC7t2FQJemM1rIElI121soahhTT+e6yXCew2eQ/KFWj6qLXLkF\n/4yPJ3k/78+gSBIA0MzA5fOupalz5HDua64VXqRwGIoswxBkYTtvLCPCV07Q\nXSvp5lrr5PDiBQhTuoTMph3kb5g1opiK073jOMpEm8Dd6tpqSUPEzoDEts9L\ndGtLkqvq3w+MDAqGEzlXiwnzjRjAW3bqa4Flye/XwWpaxwn0ljkNYp3wDTE5\nxY2TPw0spaL6QuKrw37tRbv5GgxO9b+o33aJ/PUqxFMhYvTuZFf6EkejsV+J\nmJFmfMIg/nZEKrXT2VsbI06YCEAgp4R6TLYgi1XHiwsSsDaq5DgtvLnzjggn\nDcK/\r\n=Uck1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKTDug/ANCazCxeKsTEelPewpg0n8fWSV18p9fBfXyfAiEA206AITfksxLf/OVUjq8hIN3Ai9YFzZvbK3TN1x1MQcw="}]},"maintainers":[{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"fczuardi","email":"fabricio@fabricio.org"},{"name":"felipegameiro","email":"felipegameiro@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5368.1.72_1571249321422_0.16748072647819723"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5370.1.70":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5370.1.70","description":"Sidebar navigation menu","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.0","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"c60959969e5dd4fdccfdc755c0023f8e0321c027","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"# Farmblocks SideNav\n\nSidebar navigation menu\n\n## Installation\n\n```\nnpm install @crave/farmblocks-sidenav\n\nSee [Docs](https://cravefood.github.io/farmblocks/?path=/story/sidenav--side-nav-push)\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5370.1.70","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-CAntPpm9OsH0KSqT5iv18bqg0U7prjuL7oOnIibLVC47wCj0xadxidw3nPKLtVpAFZMhCS4eHuVMEmG8mUAYCQ==","shasum":"17696d2f8a77346e0ea31f7afca5e606ff8bbf82","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5370.1.70.tgz","fileCount":12,"unpackedSize":29592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp2gkCRA9TVsSAnZWagAADVsP/2BAfwDqdqZSDC6ZmriC\n12Wv/2cW5FXjc5TxYVwH1z7rOI9a5dgoDNBSTSYXG4TItrxdhwb6UHr6RMiG\nWQwCcp/omBU0IQ7RwGaje5oth+2ONA3gRewaC3/amr/eNFodJk66VPmf3cho\nM3lNhjDyUuidLgURFQ1vEMi9Yd1DoEDqhDetE7GRxlAOzpFnGq8ei50+1Rf3\nOhtNkgzAc/2Uqn6N5fJQZiaz+xnL8nfTjTXHBb8H+ovrT0O/A5rvKseesVsL\n4wAiTh+8jVkw2RlNIiHtemHGCCTqj1nqOo7vSAwF6SL6SInaDXCeJgRXz5rH\n6W/OICVi5TIgUX4wiePcOUeTShJg5i0FJQyw6LN3gyxgZLg5cJmH9q50y8ID\naxGV1osxxid68pmtBAMLB3UH3t+WfRfQkFGYFq1QrfGkv6YHot46pIhyrQDl\nkjPkZ1L5W5oH4+fJvme6+L5V3pOckijWBpvNmHPzpo5/hZmAikOQAqh1xpsP\nQFVjowlH0hj7BehYZ1Bc51wT4Brj0X5OUkMKhNvsex4GZBYnfwK3ndraR7R6\nUnugcVHcpmg++0GS+xpz2DXGfiA8Z+H7FY4bQ5fk+L5SmYZOiJE0jg0lA4D0\nRsb9lu/Lu/BS/J/P/dP7L1k/mDydoesIb9WgIYVOjIcUSqtSL8nwYfSRYWk2\nBAF3\r\n=TV0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHAXjnEQZz4SyrhCzf9rvdfBr8IpjoH8p7hNoON/XdgAiA7V70cVGGC5zawudEkQdE6WVdvN8uVSVyzRCZtwD1ytA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5370.1.70_1571252260400_0.9443252587095299"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5424.1.62":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5424.1.62","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.1","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"0de2079410e0fa626eda3905e95e6166f971f5b0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nSimplest example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nSimplest example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nGood Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ | _String_) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_String_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_String_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_String_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5424.1.62","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-yNc21ssuOWFLJ4ZiShXVmphtXmapYzKWCSIIcFlR1/rSEX+pVNBiM+ag1qtYjADk6QNNb451XP9zl+sjEDMT8Q==","shasum":"1234583c4a61801540aed0d2b58f6e57e0ea3018","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5424.1.62.tgz","fileCount":22,"unpackedSize":40367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsJLuCRA9TVsSAnZWagAAglUQAIzZQW5J1QYuH1SckEi3\nBscD+dELt2yEmz97JT96I3fWFu2iullbM6XCD/COpsqrj38EASnHcV4ms7FH\nXe+cPIRvcZXHDbL+Tmwc0S5cyYTwRxUxY+TBF6bqS74f512+VOM5ut1UNtwF\n12dkG5w3LkbUxHPfyOvZvRxTCKF2QblbAa2sAuBelY1V7LnQ+VGJW8Q4blwU\nzUoFVWX3Y9fscRJPIbnGJYB9nGSLqrctF4RUtN//mPpbsMslinv0CXx8ZksR\nZlANG0AB7oSMFImHOMA2uU4AhuCoL9/fVht6HFhM6LjST8kZ/GTX+DO4tGaF\nED80NJuJvMYrLKWg3YDfIDMtFuHgi0dfdz2/HqQk4E9CberSBmgA8EaqwZiK\nJdT6CSGNS15mS0nmuoR8rSDcF3JOUjaS1VEKkAtuR8IykC34ENioS6kvQzdN\n8ZAlXI0rqJaMfIXnQrJAhJ+ntddQvx5aDUOKEokicb4MGLuw1ndrQZ05G7za\nlrRZsM4sxUjRgOOQlmNSap1+2Ud8Wk6wN4jRruRxs+WyE+ZVlgk+dBuYwBaT\nFCAudInt7AZZUyhyHi/g+DjDnQikPYlIu8Em5MaQtxzNcwxwiUJG8nRfNtsK\nSCI3fpbZQAadeShJTfS8HHyKt6A5ANLm2N2lQReoRwour5WejIrGkbIKIW49\ncj4H\r\n=rfw+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDL7AY4gWFwOfNB5itvnwU+e/5pbg0vRpEL8cv/HtEJKAiEAx8yH6INqJ1jI7dfc+T2ibIgHmPZzEktEOWlI32HqhUI="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5424.1.62_1571853038157_0.4268908939774714"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5427.1.61":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5427.1.61","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.1","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"6b50858aa9e92ae22105f1435e4084d86667599f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nSimplest example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nSimplest example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nGood Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ | _String_) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_String_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_String_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_String_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5427.1.61","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-4LxJfI5V9FXoROIPMeSJo5VX4j7i2sL2Fl6HTrMmwPMHv4Ikm5ZO7PuHe/xpCFXdCT0uNjukqFkRqcuU2PKlLw==","shasum":"0d6d51f26863750d2089ddc975a58036ad80b1e3","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5427.1.61.tgz","fileCount":22,"unpackedSize":40375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsJUDCRA9TVsSAnZWagAAgTsP/23iEn4UTVeCXRm/BOU3\nkpAas/c8W8x1uy7RNQsGgx7sF+0mUUA4B3TtGlaUpCRYi2ovjKrELo5BKuLl\nhX6SCOQisrTJ71B3mTYOJM1wel/gY2ZGiWdeRqBAPeEcAA7n5a7U+y/rPgyO\nAP1sgu8bpful7BatI1Udhcb2uOz3c3ZHkowPEeKjhwiGafNdzuJyJ+L8iGet\ncCtKqwBPLAVc/zfrIiLyZAFJNww4B1OtwO8pibqaMAPhXaP8JYAJrjwmZj/Q\nZCiJe96jtku1mktteErJ70Q4y4nOy/3zOhxbJ0fRyJ/O3pW0A4SDp6Diitvb\nYOk6UKgqKWMhJ+VtL0/HHgzisE1n74nhqOEPJ4aWyjoVTlamhmqTEwN5Miqr\njDz2WHXieFEFokkN7MpALKACdjWFuaNnzmUMuGlIRs1hJbG3OqDRZgqtn1Kf\nXhzAp3eP7XCchA3/Eedxv+v1u2jVIxoPTkuDmSkStlSVRaUkwzSnY/qNdegE\n6rSLSXpu8b3H8fFrLKyN+fuAGs/DgusSbEqYOIMF7jbk2g+ybGhQgYJ587lR\njHgVDbPxxFN8eIZEUjU+Runt+OxD76XM1m5gUQQ2Y5mJ3GBtPzmByGTj1lKE\nxwZcZ1o74kwlTiEqc/cPQvO4FTJxKSUOlqY37fppyQVKVWtVuyA5NCTgNVN8\n0upZ\r\n=HYyN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/rPbTb7ckPSKW+ATCdcoptFYGZMI/Kq9kBIxqGPevOAiEAjZ4lK0cb/MTHKNFrkwbxtrOvLe+Umo0MZ2SC/bvnA+A="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5427.1.61_1571853570927_0.5871423085473582"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5441.1.50":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5441.1.50","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.1","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"4fc1e7b1c75f3616e2f11ed11ebb2874b98df4c3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nSimplest example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nSimplest example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nGood Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ | _String_) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_String_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_String_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_String_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_String_) = `\"0\"`\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5441.1.50","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-KoBgBGZ2W5NMxAKtQc427XJKrfD3OZ0g+7Aul6ADSejMOl2Lc2cNWHbedRef80O0uJ2OKfsvCKBOROuCV38z0g==","shasum":"95316fe0b2304168c214c931b5fdaee518b1836c","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5441.1.50.tgz","fileCount":21,"unpackedSize":42920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdty4gCRA9TVsSAnZWagAAPDcP/0i1dP3nArNAeFnd0tQQ\nJ7gcKNeJYYeEEja1ENnvSqXQgD4SZhg0UO4QNv3CA66a+OQgxzCbD96HapO+\n8xj5gav7ajpF3t9EtX29jlPAl57KVyO4MNllZnjQapxBE4EFKlDQhPaTjbJG\nVLlXB/qlpraGWPH94jNfxldT/JPUwPsvKCmcPAXluDeyHHv2o+OU0BRFfEBA\niKlXXl9cNLxxO8BOTHRo0PRgeEzwmaXElZDnaFMKL/7vHAjMriGIpVjAGloM\nehqQG/om6IIpfraWmmD791uWzYiI2gMrFRf4T0xB+grcXT2YW81BEpKK2PfG\nxjfM/xR6aoJeBgGX4TLEGUordqvn2tJzsDunVFxLYYpdUEBwKC7ppSyiqNfV\nu42TkYhFGOHxKyoJ6+PNUrDisbmBLgd64OO/8N05LQLC5hT9XskMzskS9UkK\ncW1t5B6b+6rCthry6gEV5ktg8id4MiR3EdEa6GF1ugdEr93wVm8vewoqkgwa\ncuSrnzbNQ3rn2PtlBBmPAIknuMwJzrAR32iQNw1r0pEzNdqQ+exfhyMXtPAs\nAt+GXs83dwCKe9LKUcnLMlXWVaLB1cS4uiP3DTk7lJfoOoVqsoQ27REpEsFz\nW9ujoGQkFbSWZ4jUVuEjdILUhi44LuBMX/e9e6yxlnrLdki1tcqb2awyfLH4\nxdIe\r\n=1z1G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrb1ZWnT6NRAerZRrwitxpvSaQkXWW09JV3smZZtVBhgIhAJSJmeLapa0GXOCw/TBHZ+eEVVC43KViOO4BE1GdF3r0"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5441.1.50_1572285983403_0.4918246425885968"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5463.1.50":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5463.1.50","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.1","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"08bc0bdb42cf570b74001374eb5c90e17782aac4","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nSimplest example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nSimplest example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nGood Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ | _String_) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_String_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_String_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_String_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_String_) = `\"0\"`\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5463.1.50","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-vfM0g6TOP/3AOfPbiYM6M81WhNnX2cQfAKtsWB43xL3iGtNwpdx6I4GkowYAk8I1V6xlc5ahKaWuYP/bhUFVdg==","shasum":"608d8d79ce9cb80e6d5ff89e7b4315bbd144bb4e","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5463.1.50.tgz","fileCount":21,"unpackedSize":42789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduHo0CRA9TVsSAnZWagAAIrEQAI3nsGLrYHvsbI6/UUdx\nbyVsFjs5fSgU/dgk+DKHSURqKqHd3seZGNyq2PIBzEA4H/AbtfpT43qYsY0C\ndPteeFyyZvQGW3eAp2FqzzEvW2bj/LuzBj/H1AexvIqtUaiVZNtbct1zoVnB\nk83Wkkkq2CMzhWNiX7/StU77gpTFnUOMpswFMEdPPV/fA5ZGLeC4itNxGXgP\nmNJ/U7870gB5xMU6FT0g5zbFsAK9dg5QEqd6yL0hAZjd3QTaWzndr3ImAVzO\n2z+OeaVn3WI1HCG8NIOhdv2ZbbJBo1JDmW5Ge8OVgmFzWWJLXJKaWcl/JRo/\neyCVV6XR9CP6hAWUkSIt8dc9L6RkDVmc5C7bXupDcbEgFFtEpBhm74oWS0sL\nB2IE9kdnwbHCdGuXQ0HdQLFFnV2h7Zz+b0md0C+lvvMjNlBI2M2oimxoiVTA\nx9IKGFgst+pztoA3SD+L+zqF6dMua2rCrpvhUVnK1sBiwmPybDRK8Au+d/5B\n3ZvsMIOVaTXPBwOLFW0uwDuZRpYC+r6JBQRBBhwYzzliQF5DX/470ct2Zk2q\nARsGBixVz5E8N1LrLSOLCOicYRBwy/Q/UyL8pPoIBPTuuErLcJSKxFjYfMhk\n/n0QuEpBElaowb917ARBU2EbN4a3fFCs50A1rDg56bTzP/XN4x/A4H4LygZT\nhgQQ\r\n=7O2x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/jT5BZaTweOFUuuKIBLj2PsfhCnAz86r8hJCFtpYV8AiEAnw0WjsYM7hLNG5XcUnq5wxXB+to6P3b6Sq0HidVWAt0="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5463.1.50_1572370995288_0.40205741590527566"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5474.1.50":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5474.1.50","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.1","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.2","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"41d2e251c65afa1f3d339710f1b530c929c3a3f6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nSimplest example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nSimplest example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nGood Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ | _String_) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_String_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_String_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_String_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_String_) = `\"0\"`\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5474.1.50","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Bbtk/bQE69ct50TzhPAibVAJgkWJ7vsc9UelaipxMzzVIWm5XI6B2VrV73wSZ7z/bU/+vmG7bSA9gT0taWL/OA==","shasum":"ba8c3ef8bc1abec53ec2a2114b15c88b3f13e7bf","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5474.1.50.tgz","fileCount":21,"unpackedSize":42854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdu0AMCRA9TVsSAnZWagAADREQAKJpmXv+mHB3if0z5URN\npc+vLU6WDn6lTbYQKGahMMtGpe0flQUR3OyWX9cQ4xj/KG5jYd3Rv6L65qX3\n5PnTqp99EVJ2yVuwdXLrIxg2m98atT7FrEvo9rA+jC8Vl6qfNud9xm6XDV1+\ngWXZf6Wgk0aPWAEiZQnEt7BYDN/+hyW1+QseTSDZSxaMir763/v4NtednSI+\nE4cA9aAA1LL1uIcnQOUTLyfSHFto7ni/0pZcx7ndx2DMwTP67fJjD1tbUkpF\nOT+25hQHzAY/rxdy3GGcJJwrEjkpB6IsLm4T2T42Xj3QEK9nRw7JNqKczcb3\n8CqPd5HKSnCXFgk5RNC+qVtMr98+6ko/pPXDnBVrymsRBBgodmNUKV+7ioS0\nDu3R1eajpue3TOm48HuutkApMi78IDodshnNDiazuXVtHHyH+00GA2awIkyb\nR8v2Zrw86PQeNsStOtNBuCaM9m2HBzUROgwYPZB39IY92K6WtcijcJ1DK0pa\nUjYvPSjzrewDhbEcJHjgEjxHYAghWB0ZfWBF2KRJuZkB6PcVnSwi9R32LK7K\nuuAuCbgJHXkJKOO3xcHGNcp2wYNk1FXfDxM+GwMI24x2eTQVsJL2CcFcBKrA\n6iSbMLwi12/LQywKl3mUJOM5CrUkOyYQsKzWxm5C1xxJZDLkRSZjnJNUB36S\nLdyn\r\n=mb38\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEykly84aZiWRbvhl6Ejiv+2UKFPQiM/krFL7vQ0xbWbAiAUilY1SG1CgziwuQBY1zkRsQlIpBvX2+iTe8mAb0BgYA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5474.1.50_1572552715650_0.70048136395006"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5500.1.49":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5500.1.49","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.2","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.3","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"a80bd047b3d400f9dab3487bd4c3e851f63661b7","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ | _String_) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_String_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_String_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_String_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_String_) = `\"0\"`\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5500.1.49","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-f6V5pm9W1SZXYM1xbPM15FSjnhLQ6B/v9VDq+z+41IbGflD1nrLdUqxrNAldVa3S4iWMVSb3/BwZSFadTTNBzw==","shasum":"57eb9408198083755b3e37074a55e9f204359c0f","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5500.1.49.tgz","fileCount":21,"unpackedSize":43146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwCxFCRA9TVsSAnZWagAAAeAP/jMpG8j4HJNxovdUv1kH\nEIXnZmxzuIruB7ARTDjPlJOqZ51wUhTRIkrBEFMiGrKvZOxdN+WTDoMwrI5o\nJymYJQ2jvx+na0snQIzIcpsJ1uoYjKNucKz0uEBiEYInFW/F3jtikzX+coY4\nhzxug5rjqWubXYoNTDxin8ekfYlQjLuRZTKzhtdPSA8i/RAo2z8cS+HhrchN\niLoIB3bjCEH09FD2Hgfzgl1UNmwifdXmXQayrsi/8HGGF9fG7QRQzM5PwY5G\nojpqHFtdtrqQShl0EvnuFFc5y/PbfWfMld5bL87VjzKtsNzinPWgrMmwzDC5\n6p1e/yTYD+Usc6C8xVz4+4qC9sVMLliyQ5lgDY5AZbXcjh3Lnj9T2pCoZfSe\nVr4sBQU0MdgQBsLzaXXW4VSrmHmT3Hg4D3r3/fS3PBadd4GZ2+Wm1wyWyL1O\nsrGVW3Ju+MEJZGfyu0exANLw7lhNILqt9b74ycTTi/5D7UEHGDEP0V4/1fkm\nfqVP4Mip57KvclnEyAQi2K5p8hd3ag/03+wQ9ZUjptkOT3m1c0tygrqkjl/W\ngp11gk9/22OSYdfbNnq37dd5dmDUAFs3Za3jzbg4pymt7mlQoL0N+OjLD2h9\nx+s8eEMpj8hyTFq/4URQVPxuCCrnRZseejzMvKUjjQU92tNs7UePKaiWnLY2\nLRLF\r\n=HMtf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDhilGk0smKd99mYZfiM+F193pyzogmTmnfui47n6SrqAiBbGI9mSEy2SczIQUWdm+gagjdewnU7eCdNmScxxBZM1A=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5500.1.49_1572875332489_0.3711771435097784"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5503.1.49":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5503.1.49","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.2","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.3","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"e27626195d2894b5e37299365b125855c019731e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ | _String_) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_String_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_String_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_String_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_String_) = `\"0\"`\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5503.1.49","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-XFS7eV63OoNKWlkuCsDmyjg+COeAG0e/jTvwZUmAhfXchUmTV0xjMiivD2MiLTGEAmBX5PJIA7VaMiVgn9gBSg==","shasum":"38937e765d0457b8a1c3c2a3069424d12ccfc838","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5503.1.49.tgz","fileCount":21,"unpackedSize":43034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxMi7CRA9TVsSAnZWagAAV48P/1w+xXwVzs08y+wdlcRU\n3ffWbfw6Gj2hbV18KIhxRx1WVgZv761FWyt84wksV3zzQZhkKObq48yfUAJD\nbd4hRPvUqKfEnQR0osqpXRWHkkI8QgmlotkZAm4Vx9PslSFBUI4jPn9AKhS6\njZq2SCMqUjujDvHYT3mB5GuYi9Pl2im+Jy4At/YGUlV0WuwyTlkNlsrbfth8\nbF7/ZxynoL12qR1IotbKVtZbN7fxM06wdFzfskCFbejlSr4DLYcknFuWe18Z\nCpipFki0WShU9Q5NhBBcnOpNcQFH6zKXlfVoPXLv6BnR37lIyZFTNm6SMRRy\nRmn08BwCFLG2yhnbUHHfKtPR8sJaMnJ2DB2NGFA6kXzixdfdqQVVl5rtDjZc\nom5+XnKV0Xr1xPIFAlgv2RkhSqQ+abNN0/pFr3FQ8infzTigQbSn3EJlps3+\ncRthOJwvlkfI1QMdveAzxjQdU/MOK9Lhozv4y764ETRrN7FVqDRSvXUquiqk\nACr+6PdL/wATyxvimwz90kD1DafVGZ39eKpCLro9t0zys9LvibPketY1OSq2\nnx1dn+kqlaj4ni3h9Bwd0N7ZJWv35Z3gqg/oW1n3PP9vZE/xUwkmj828B94a\nD1n6eRhsW4rMrx6BwJvyFJwFWixZODF1/1wgBK3FzfLq6CE62XbRQXlwRX0u\nKjEa\r\n=fISR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE1lud7ltS1Pv8s1ww8Kka14Prs5AfGA/APDPGXfyzmwIhAOPaS6RQQGwsLTZglhLaRpRrHKUrqlt3xQJyREKSZ7zY"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5503.1.49_1573177530896_0.21185086057627434"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5505.1.49":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5505.1.49","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.2","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.3","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"63fe9dde422a1eb8c7f0c24815fcee80400f47d7","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ | _String_) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_String_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_String_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_String_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_String_) = `\"0\"`\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5505.1.49","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-+HMnA/H204czk97JtW+pVglJ5kmM3vAvQdkGRlToTZBo7nVBUiKvoE8VUIbQKiSRH6P1LvevgZ06Jh5JWCfqsg==","shasum":"1aa20cef845bf751fbd44648becad9e33aa4ed3e","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5505.1.49.tgz","fileCount":21,"unpackedSize":43015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxNa6CRA9TVsSAnZWagAAVAEP/i8qFEX9Bq+YP+Bvj5LL\nrHsNME9lPKnUOTV7WcFvmsfh6QPlee63c5HI6dW8kSVPW1L5sbKv56qtM0v1\n85fS1qNqCLAfIQ6C2mP6BuaelPkteY6jDUOFSN1P3YDa+SiAdxf7W2+xvdht\nkIwZfkiP4XMjrNgSVV3RBOB7BuU1dpZOwkDzWZmtYw9xTxvMkspM0y/b8P63\nDgSDq49zVdsYSyAijWdbJlnOq5tpv1fuIDzCyA03t26DzqTFsqFDVvg10RkL\ntu6ErYenJ421/+o8+7RQfa7ekjEpurKjdqpmgrl86szWCAxB1H5lYGmz0jRO\nx/H4hw9Xd2tEO2zyKt/ARE1mzstoVcwU65VDBMeNpcZ6pRH0vLoAlK+f/dUB\nUKJWrjdQyb61yjxfk7md7jmsx2A/Zoe6KnsSwdKR/9J+ZrJT+n8WSE6XmNon\njhHlzzipPA7nS2AqhvKuNkLD7t6hz3ZEAFAg5xQRMQam6NtG/1EKyKZ57pau\n73IRlvlN4O/t4rXVPCnxNY4sB0SOhXv9ON2cJQaYOqUoUbJldkPAIwKLr/X5\nZHGUhSbtjdbnJlS1LYKGmpslacyhqnuzSUTixCE8qRLR/OrBJMFd2X3yoIm9\ncVItCENzohjKf9mkfxXcQGeePE+0j5vXNvpXyU25USeSELzm8+9y1KtgM5IC\niUU9\r\n=hBf7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDf7V+hXAlheTX8OLFXbMbrH28Ah5f14+7uohMpG61LpAiEAx2KEp2Id8ah2558mQb5tCDubBSdF5vzKpHyu8PyO3JY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5505.1.49_1573181113567_0.09994753840309167"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5507.1.49":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5507.1.49","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.2","@crave/farmblocks-modal":"2.1.7-alpha-side-nav-js-5342.1.18","@crave/farmblocks-text":"^3.4.3","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"6c3445220c5864ef8d45f4badb1f5a2fa90e86cb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5507.1.49","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-exl9+TkxLNktOgXWETkiXghcHlJ7FZqDXDs94GgMnSxkWoMSKNJstMaXoE5Py5U5cmFL59iZETef9WS0XzX/PQ==","shasum":"29a45925fdcb067bbe6362839797884c712b9d44","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5507.1.49.tgz","fileCount":21,"unpackedSize":42995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxZX1CRA9TVsSAnZWagAAfkEQAKG8HCX9x4H9tXQprfEb\nrsmmkQm8sFq0dMm4HQCSyVkAwKLmZjBgSr/gb8oUIvrAygqnc3PlBBZiuTPJ\nskD1CU783UEZ1pKtaR6a5nuez/zu4uJKXFyNT8V7GRrn1w1nqbxMtgOuod0d\n5Y825u11Sf5p7FDy9PB+at0E379eBBqE/UtZEDyjZRxhRcAALXyK4Go0Urkq\n8p8vs8TKqNNGSCkBzXBRXXuHuyyXbOYd3KGAodBF9HX5GMIsS3/RwaASRNa5\n98PBVUP9Pq8w75BitT7UR67CProrUOwjCtjK0W2scuVYwFzzMArHdLK4uXs2\n5aznM8PH7/ePLsqfbYuGGW/iLj0d9wAurKbAzlpu+KdKlCe/4AuDFIHjrNpH\n8pYaTuiuYq2qcfKm1wTEyMCNHwcHzmvg9Ut5uA47IxDgV372aO3AOdKK1e2i\nal5CtBvgoxmdrEAfzAF5b4OXBn7bbSfr5Znx50lJfaj+ghsNo6tjNq3uhwHa\nu3eJjyQqxCup1GogaZqQc5lElxeZUUwX1dCALsU5gwGIaSIomO0BkjPdonLd\n7oNi0yDtLSl1oRsug6pWYv5WGFMbnxmZ8Lg7wVH2noy0KQ7rIoBQ8JRMyvtn\nmoPhnBOSC26Fj0gGaX+fc2+hhBFVlBUrF9RopH+RXKymrrF7dAaVlUsQO4VE\nrcJw\r\n=MHM1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCGNLfuYjwyV2UBD1f3kSxa4AO7hea30TLAwQx6IShpAiEA5V7X/M0K4+QmSUfHw9Nw0Aj59xLiZf4tjqvGtu1hnWg="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5507.1.49_1573230069167_0.8573263654894754"},"_hasShrinkwrap":false},"0.1.1-alpha-side-nav-js-5542.1.49":{"name":"@crave/farmblocks-sidenav","version":"0.1.1-alpha-side-nav-js-5542.1.49","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.0.2","@crave/farmblocks-input-radio":"^3.4.4","@crave/farmblocks-modal":"^2.1.8","@crave/farmblocks-text":"^3.4.3","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"d27f20c22ddad6519c6214c31986bc77cf03a809","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@0.1.1-alpha-side-nav-js-5542.1.49","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-JFn+fMp/DW3zvOVv+HOB6R+KeYPLvoK1Qj3a3n7U7spiuzAv7/3QGi+gQFDi4DW6NzbsstCZirqqSAjjQhpklQ==","shasum":"7f971ab2d478b2a210858cefa04c88f141bbbd08","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-0.1.1-alpha-side-nav-js-5542.1.49.tgz","fileCount":21,"unpackedSize":44516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzBpuCRA9TVsSAnZWagAAbXAP/2Uqi2mzTnMNVnXW6VAv\nG3kqvBi03ZYqXVv5kpMNEdMxHjDxFEzVYxWXV+ELCQtmhSlbnwul5YqyNItM\nc+57NyXCyyoZt/6d0OTRWjhgvXT9Fxhwq9AqGzwwsVzVxnPdl7NyFKUjATp6\nRXhVLxaUeuQfYvov7EMzRlh/bS3rSDENxRWHaMbX7OUgCR28MGHAX9QhT6Dw\nR7Y7/5FaveyAslpKOxx/Gh8TJIabTqfYxEkBh+na+yvu9FJCKgyi/VNsaDMt\nvyHAKfQkDBOEaRlK4+8S3kUhr6ESFbIIy4Vr4pLahJRR4uRFoFugUeyChAUK\nXKNtlFuuvpc5JZQv47hqYAi7wyGIARI+/sWzaFN84A+YA9NBzpbBsxVJmi4R\nvrNTXN7zRdFZVLARWn7k9fzyIygAptiJm+xoHYhtUfiH4+Bppd7ogVtyOPrK\neE9wGh3efaoOrDYCLVdZjRXmA5gyHCLx78Lb3tRE8mQDaHVgFChX/5eWT8Gg\nZ293lgJQeeA3hguJJ3ytOf/28T/PJFmVxuMMf4VmwLj90LE6h89fw4IWzaYv\nP8Mq3kHsktsCUrl53+0ITM1FCrlGFzZtAv/enJFY0AEBwhOLhXjrnnLqPrLW\nJRtoJYcnoqRLgz7nhaZ83NrcgQc1VOr7yhTD0TuaQA7FPGtHy68OGmYpqTCs\nCXrQ\r\n=noF3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB0TVyo705dX33DhAyANhxhO1mjdSJkRqAgQtsgynejQIhAPRtzxEaXYyOHl3lpE+d1JjIpVXbxaOG2vf47TZEqFaf"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_0.1.1-alpha-side-nav-js-5542.1.49_1573657197530_0.5048295463233641"},"_hasShrinkwrap":false},"1.0.0":{"name":"@crave/farmblocks-sidenav","version":"1.0.0","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^2.2.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"4d208c11aab8de7dec980d87d8386e1afa265e20","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@1.0.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-8rMVZwzOo7XcOhbdl9aWx3YH0h6GAh+kHMZWu9Ctpuz59yenMZuf0EqUvtv8uKSGH+8t7F8m49DL21rbiOd01A==","shasum":"9a444fb07f4ab148aa33af83341d018ca3bd298d","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-1.0.0.tgz","fileCount":22,"unpackedSize":49061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzD6UCRA9TVsSAnZWagAA/hkP/2Hjl5yzw/IUu6hcmb0a\npy2JSf/HxvsDC043ZAcnx3u4Q8bjuBHNDYd7jn4H+nMolq4Asmg6hZoTvsgd\n8E16S/0noMHee9eH3r3w4yhmAWcmEaHn83RRW0hP/JnaUMS/pEY8BA5lN9vy\noLoe6/fx7+R03HUFb303zeW2ukpYe890JcsuIK1uHzBcoLjpHu+OR3KUu0os\nhb398QUQQ274sRcrc3HTtaC5nEHbrcyRTOPdMWA1JyVABwETh4FCWkjExQ4y\n34fZdPGndedRIiAe3gJsgKd2wVQDalPiNF8NJ3P/6cUChxH5/WnacYx1QQsw\nhMpzorqN8dSGJmoho/4XceNeyXJuUE0wrJ5gwZHrQa/3GkluDKCeh830A5Fd\nW10fdLe1GmO9p/VtMRdkvdtZVfLBAF/wuYJbIr+qSzjSUff6Oto2gW7HCxiX\n/eoSvyQfYa/chikKVmLyepKCF2N+EDyUiepRGLLKpMzoA5KyWwvY21eJalGw\nvzMisvYpJmXGQ/7X100fMWXkQmiMgj1SKiYZ1FEuwzzCBGejrcGrLgFUHkDY\nwT2FT5KN5JjGeOrnjqo56/7Dr9WBQmJh2l14VpDFyJstx0Lu1cLV0HLetDzd\nmv5dZCdVKEd+MztspmC4bJdsswGzf22gzrQyz1/qfU0b0dkvNPDFooTd89b+\na7sa\r\n=AwTY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjyC8rg4rNN1eoA6ADx32e9hIufQG/Ut5ngXzkKwrJ/AiEAlztl0GA94W2BRdPjn0HW2VGOKuUiOs8HJCCFA+Pa64A="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_1.0.0_1573666451612_0.9133180431769614"},"_hasShrinkwrap":false},"1.0.1-alpha-mobile-tooltip-5545.1.5":{"name":"@crave/farmblocks-sidenav","version":"1.0.1-alpha-mobile-tooltip-5545.1.5","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^2.2.1-alpha-mobile-tooltip-5545.1.5+52685bb7","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"52685bb7d9fb513747202de0f208adeb6902755b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@1.0.1-alpha-mobile-tooltip-5545.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-I74rdKZneN6oeeKNpt50tPnEDZ3clyEZlQfdEdOsWCATWQU2HwIYMwdH81EmqPl/aVXfCr8yLhWn7exDOcpv1Q==","shasum":"44bf57e58d4492419d32624ab5e93fddf24b2915","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-1.0.1-alpha-mobile-tooltip-5545.1.5.tgz","fileCount":22,"unpackedSize":49139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzFUVCRA9TVsSAnZWagAA0nAP/0/43AnLZ6lJxrkV1jgi\nIhHODn2p/YC3oDvu8a+gObTZEuKXTP4jB9cFN1Z4cfueKg/ZU/ptIjlUosSI\nUegVgOwI2QToxsoBZZwQf8zX2dFg7BPps3NNsWJNL2A/FhDyX6jGTNQWqF/m\nInyLBnQfdjoLVYkkVUyumoVmba46nFZQUnhwU6r1g48xe7TRLw41F1Tp6LhH\nWdwnprKkn46QfrHZEfq23z7io2Js63B5HomRin9dHzR2RKMfoduunW5xdFpp\nDCNgC3Uqzd/57ALhY5nryYEqsDGWcyYU7UEbvNkqQA9Ngj+zOQMGqdTcAQrx\npl+DYlCru3cJ7mt4+lRBsqCCvoML8y9rlqC9qr6w/d/uo+tihpctci9n5iZb\n4vH2Z0dzK7kPe3XNEhMpzqnaok3QQHAzr25iG7EkXVGFNw2RoAOeBLS19een\nJxh6yKzF7f4gerr5v2cnizQYVQzjgZ5J8u9Lx4xCxoXRhw3ipWv/8/BgGkSd\ntQRUnaenqaD7fmH2W6oX9fKWweohiTGsC4Rwi3wlVPuyevQwXpOY7KlC6aWb\n5q28353AVGSi7dzpZxUVI3+an0emiiAgfkZ2fRcoRi3jwLyZYyCq3SV5gjtm\nIbs5MQDCHsqDOoDu92sCXEWyf0qP26l/acjF+Goqjs9Tm6TlkCmmdCzxJqk+\nLH0d\r\n=mids\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBLZ3vx5te4APKmymHWjJKpjjjcAsSq2VeZQ+yOlH/vAiBwLDBYPjoZZvYV2BaTeTAA8FOySgxbSmRWbP/XFQN6nQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_1.0.1-alpha-mobile-tooltip-5545.1.5_1573672212785_0.5232998427336666"},"_hasShrinkwrap":false},"1.0.1-alpha-use-new-icons-5553.1.26":{"name":"@crave/farmblocks-sidenav","version":"1.0.1-alpha-use-new-icons-5553.1.26","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.3.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^2.2.1-alpha-use-new-icons-5553.1.26+03146354","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"0314635482b06bdef18fff305b0b4f2143ea37dc","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@1.0.1-alpha-use-new-icons-5553.1.26","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-0n11sD+AxQ5h8cc7Ic61aOHec7duLHikfb+Ty6JSFyLQ53WDRmZVSKKfEDI6aN2CR0/+tcUrAIQaHSHgrQ28ag==","shasum":"35873e23c622262c9956e8ac79e7c6d92ac2700a","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-1.0.1-alpha-use-new-icons-5553.1.26.tgz","fileCount":22,"unpackedSize":49457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXqFCRA9TVsSAnZWagAAaNcQAIwXPhDR8BAmBj9RCErY\neoILTGWl9K0f8wpm7SmLCo2XU4IvfTlvJC0JEd22LzzGa5PXqJ5DIxizVlY2\nFiaBUGfKvsDM41Ih4yDZEIIlQt9Uhq3ewg3THh3xNbyI+nbSeLCU8vhmptQH\nD6SxjxNJik+MVqFx4j+NTeEGDyAaLz3yfAnXhD/jaEXSgL/ViJ36xv2FCHBB\n976JTcrJmqe76xUE9F9occu6FaSHkYNpkV7D107N4WT1TCVS511r7qIG/ehf\nvM7eJRzAHbUJqefSdBCJf8XadUkCBGuIgnCGR9klOVZZHV90zMOFmPrsHxy8\n5tNutYDF+z3/xH+ZOR26t+ifSEYAy4brMrdWjl+Bz8eXVKhcPmGuEqI+Mlyc\nYixFddvnJAkfmBuLpsRnU6Jq6Ba0vG4kWapOX/Zc5thW63XAx/czh+Sf/l5S\nbIryGTuqW6zQEwbVaNjiceUqlgdlzkEudl1rSCyOoPevgzAyCSEhIbZNQSQo\nm2npQn85mfUI+lBkCigWL/2cK19jPrgZj+SQXgMqNi1/HesDbpHAldS7qQiQ\nICHau+0JVejOtfGm34ixfF/Cj9Scmjka0/EeT7nac7ZwGjqKZ4AhnNsI+/49\nv6Xmh2EcZwQnxWrOS12T+veLFUAzbD2BbpbOv2RUv3tvFq6ThrpBgV7Du4ni\nGZck\r\n=VtQ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqrjiMa/bj5zB8YeMuu+Ew9otVYvVRoyOLt/mGBXlYGwIgFla43YX30mIvUXP2xL8vnXfh4GvT3UhZBVnbonvuzxs="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_1.0.1-alpha-use-new-icons-5553.1.26_1573747333045_0.9224481302102767"},"_hasShrinkwrap":false},"1.0.1-alpha-mobile-tooltip-5561.1.12":{"name":"@crave/farmblocks-sidenav","version":"1.0.1-alpha-mobile-tooltip-5561.1.12","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.3.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^2.2.1-alpha-mobile-tooltip-5561.1.12+b969ffd2","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"b969ffd2b56d5bad573d88ae9e2b7d7748119e37","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={`wg-${tab}`}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_String_)\n\n  > Icon class name (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@1.0.1-alpha-mobile-tooltip-5561.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-WFwn5csCG7E4sjk3MTcQJ8Vz+e2nx8nbYhhvuIjL2J9vprXRtFzs9u6IpR6C6X4FIRvbFSE0LtrPVk4zNVxRqQ==","shasum":"43ab926d2677d2bd98b7b57e92ccc749634cfc9f","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-1.0.1-alpha-mobile-tooltip-5561.1.12.tgz","fileCount":22,"unpackedSize":49181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0qCjCRA9TVsSAnZWagAAU+cP/RkGK2XNyfi9dSoHFeUi\nxfhMhxnH5WVbhmSuipLgSGE2GcPiiczzWB9ntE3G8/GiJ4PCEhk4NquTr6eC\n2v54TZ7SlNrETseF7DAmqPjmOl3r+SRR68TThywqFqGWG8MIBbYfxSii+Ck+\nn8huuaM9YbWVWFnEjzIBLAnYoT5B2usGk+lwdnMb0HMlLSpmmKo4mlyVe+5Z\n2rVhD6dd0++tH4P6tIotD58XqolUQVxinYj4niWERwyvvJkw1UysGmug9s44\n41I3mH0Zhd74vsiaqU4ewoGJt2+BUbYiETOCVkO/oMhKF6VDScAXFOJ1eOpj\nhQQQom/m4oQDfoCkZ+MhNvtxbvFUjBf5cTCu2j/yxmlT0rp72561pydoSn3Y\nvmc5VzK3/Lc8KnS9RbJK8AzY+V/8PPTnWNzf3G+wTVs4sGV53eq/kmjuqWxe\nt0Dgcyrz0VJOhbTB11/XlpsFqQo4v+AFWOX0KLl8dATtU2j1NlZY6nm2Msn6\nvw+lf5/DS1B5dRGicLbP5wLwb4SYoCpZYDONko3xrhO08PZw5DGHEVK6j5R4\nu7zXFb/u7K9zzBkuWk0XG5FBkE10mMn1pmlXOtlk2kqWrFC4gISnF8n2+TvE\nkKBA+5jRl/WOqI+6MXlTyXykXJzLhFWPzY8a1qgbNFmFyjKAvvmHNsaZ1AWp\nqQ9E\r\n=H3qF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFa5VMosFa4Ai0hQTygqQCVeZCHdvy/PEL8r37/aLi1oAiEAtutMYhTMdg878CGl682+5IhZaQTNK+o7lNRhRNW4SyY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_1.0.1-alpha-mobile-tooltip-5561.1.12_1574084770792_0.2735806937381702"},"_hasShrinkwrap":false},"1.0.1-alpha-use-new-icons-5568.1.29":{"name":"@crave/farmblocks-sidenav","version":"1.0.1-alpha-use-new-icons-5568.1.29","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.3.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^2.2.1-alpha-use-new-icons-5568.1.29+87f08172","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"87f08172518bc1514f4b60bb58d601b6c208358d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@1.0.1-alpha-use-new-icons-5568.1.29","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-jthatwn/zuq2TxHyr5qf64oZZ9bd6PFVYvkbmfNTMvFid0HsNgQUXc3y7Tdtj7m33d9XyNn4GP3sMBeyXV5KEg==","shasum":"b4ab93235277d324c91a333d41574a139a27304b","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-1.0.1-alpha-use-new-icons-5568.1.29.tgz","fileCount":22,"unpackedSize":49457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0wbuCRA9TVsSAnZWagAAXBgP/RKriY77nNUjvX3FeaQz\nL+SpK/qBpnrgb1+ttMU0OOOolTPc61cv8Kcsw81XXXAARTHqNPmeKMg4KBrl\nWFdXJOn8ESqNcLmlCsOIJLYe6MmrjOJDd2m+Eui8Gm/0dJQfTgfvSJ3llu2F\n8DaeB20ZDtv9HCi3AGI5xGEkPuUKlO7MSQkKSbXGMLErNoF12xEJLZAGgY8d\n35lQ2xCC71sB5dXlLrWS/rjcNQB1qXSlVo6bCWD/hz6ias6gsDfceGOAqjM8\nJfZ0KJiaq/b+ruxdU2Ywner2dFairKTEJemVHaNM7RaihdS0C/Fjz/hZQxbT\n2UF/gyUYlyno31oHKclk8tBRdBRfludUoUQMInqW71ucx9ta6QzTjT3YkFc7\nMEHZ/vzhpRjj+x7q3wK/jgWbTodyrMHpnDuAfc2tobnwYXnhLrfb62n+5Zgi\nL+Q+uMPDCGLRG2Pw9j8OqS3fYB0Dy09upxT+qRSrUsQYI2LIgWZK5a3Us+JP\n1/jya8kA86hOJGPtQoq7MkXPK/YTl9LnvU9QM5rCUmgePHYZlO5GeZ1x+S3K\n5ayIsDli972wO3aGdoAzhvM1GYZjxrYCHdac4Ppmj/BM6/XWFKfg+duaeHTI\nzdCNlXPdW5pAc9yja70AAEzXYjIa8lHBbXBcVR2VUXD84wvSdSGJp3CugESL\nzo5N\r\n=fdmg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEimsp7kSCN2Ij+T1h77hihHgbe08qR+dUwtzZiw6mNSAiBwHRhWHQIq/CzJxwDnsAYd5NNo90RjvsqsrIchShsKkA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_1.0.1-alpha-use-new-icons-5568.1.29_1574110957875_0.3682231225933983"},"_hasShrinkwrap":false},"1.0.1-alpha-use-new-icons-5574.1.34":{"name":"@crave/farmblocks-sidenav","version":"1.0.1-alpha-use-new-icons-5574.1.34","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.3.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^2.2.1-alpha-use-new-icons-5574.1.34+786ed1af","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"786ed1af7a501119a79b8e92642772480116b4fd","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@1.0.1-alpha-use-new-icons-5574.1.34","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-9SWiSO1+bb2/iAauKFM3y9BpVPP/BciNQUqESg18gyW8nuhORdIJkpe7+OAp1Ojv2ceE0Thk/Z6KczS5vqswqQ==","shasum":"91ac189268f62721f3241c081770666dbd8a2bdc","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-1.0.1-alpha-use-new-icons-5574.1.34.tgz","fileCount":22,"unpackedSize":49457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1CbPCRA9TVsSAnZWagAAHCgP/1ADaVT6u/n6/eGfeY8J\nL9r3j8OmIaT9LsBo96qatbb61F8vUTC0TddAzHX7TUOd0qmlRzHG30NWNF7z\ngZLHRdfn2Qt7QZPTw0jR5LdjOT/ZggywnDs97ZJJvcrK9VJxiAq++1UiJMxy\nI7D3BkhGWRX8wPgMCIwDhFlCD32LZd3FJLoqDjRfYoFFjwUDub52BylvGYZB\npSQVvDHh8nF1PDGtHJeoIAUDyCB056wP/K5E0HlEpWNXGxsMl2I+OtBkj2Sf\nGgHXcnbnLkdUzRtmerZVp0Bb4lJCaFdk7LHPP/Wjjw7RnDBf88ozSuLa1Lta\nyx7A81lQefu7kE7pyWhF01jaZxiw9AlIiJ5C/lQS8jAhFRu2lAHS3HN2eZkT\nrOiwM9rMqiqrmEeo7L2/Mijs0AY+zRfsPAxWSAkypu1WLAP/GxACc4phpPg5\ndQ6ptk6zSR4jfb7h2MTqMfcQK+IJ4SLX8O6+iNVNwWRU09QfapCgBhXpDxC7\nzM9TAL+lZLf2nxWXtUPvzNJ+Os9JP65zvqZTNguT06pah7tFP28E79EIXQQc\nY2j8rQxtg/aBIQVXQUaNrDLqW4pzgB0jlMbELCGaaYAV+HgW8jjrlSr7c6vW\nPLa6g2Clx9jO2iguF9y7bOpKZ2kXyXgjr3KTjKnJ10NBluSYNBrYEMJlr2Fu\neNY6\r\n=hTeK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTL3I3ePfp57VqT2jCU08ZAqPiTNa8D/020yhct1r9lAiEAygXBB08zgtdNNMgAYGyXoEUtEYI7UUsqlGBVxqWfH2c="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_1.0.1-alpha-use-new-icons-5574.1.34_1574184655320_0.8251811853521875"},"_hasShrinkwrap":false},"1.0.1-alpha-use-new-icons-5576.1.28":{"name":"@crave/farmblocks-sidenav","version":"1.0.1-alpha-use-new-icons-5576.1.28","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.3.1-alpha-use-new-icons-5576.1.28+44673423","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^2.2.1-alpha-use-new-icons-5576.1.28+44673423","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"4467342328b41236dc1397d195b44ac7ae1ddc13","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@1.0.1-alpha-use-new-icons-5576.1.28","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-dVygndededUQXlxRknNldb/bi/YprYIb1z48mFT4EAF6B8xf+Bm6d7g0wWtdxR9JAX9usGtxmNeWo/SECan/bw==","shasum":"b21415075786c1cec52d40103fb2dde30b7933da","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-1.0.1-alpha-use-new-icons-5576.1.28.tgz","fileCount":22,"unpackedSize":49496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1CrkCRA9TVsSAnZWagAAPcMP/jHacTfiLf2rew63AMXa\nkl4bR49GM9qFJKj8stBYJdlKQgibwgAWfbwnoVNpwFSAlob5rALrRSqCJq3M\nLDJ8AuwSvVAcns7/hZ7kb6BRy6wr2UXhDqbyJ9OjSMPvDujjX7Rm0/m4yALQ\npANtSK2mB+01Caqv1oHo5w3umNAojRcf0TZw/cIihxd5zN39XUoDYl8x/wqs\n8PstmwWP4LpC2Z6MmxvFxbrcNN8wugQoQSKlZN4PPlbSMo2lG8jamxF3Y+bh\nZYk44riDmM1PJRvZ3zGrjxyjxFvSujZafV1PDiV2g4QYir40xKmdE255R8jB\nyYiRSiFxBz1ZoM2xPdM4vfPoK1Phe7C+iiuGc4F0+Q0Qi4JcuOUVwA+Zmj1r\njEabuFQJqFQvps3HnMKqaCabT3mzOY3Q7dxuf8HC5CKSZDIZNyA7w+sEhpe3\nQTmTY+fagHWl4FTigEiOkGZHq2nYt+19nxmKLV+Ft+TTU4P+xJBtNVdCGAob\n9b7S40i65lrgJzM3c6QmGKYuRJTV6//rURjFjlhhWKG35d4DwmD3cEB+62pl\nddjRxOP+NF+Ir2wfJBhUZkVO9XSMRNv4luKGsdml3Sie9MfVlJpS+IgWe8X/\nlZUndWvaLflkrnCofyfVLOhPbB4xd5blWQbGTqnjFgSsl5zU7qdNLeX4vPhi\netDB\r\n=7NXT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGMdrfmf92oQoKJ6vvmo1L0ppHeiu+XixPWfugbs3qhwIgI3G+UOJyKNcL93LAnMUx1vFhrC20yz2uj4kiGJu2nts="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_1.0.1-alpha-use-new-icons-5576.1.28_1574185700256_0.28927351235246546"},"_hasShrinkwrap":false},"2.0.0":{"name":"@crave/farmblocks-sidenav","version":"2.0.0","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"9695821f91987c2f33270dc3074e7393311e98c5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.0.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-MOv8wGPz1QaqNrRMKuzeYp0mbLSCPBqSADcVjIaoImskgA6sOZIwb+SCAR61J0N5bcK+uCWb8psNZ4lf8beUwA==","shasum":"caeb7eabb792ec2987e2e294c874d25772d257e8","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.0.tgz","fileCount":22,"unpackedSize":49759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1C5ECRA9TVsSAnZWagAA4KwP/3RH+N2pDr/l7Cz5+7j4\nsm+2wZ3FmU0hh6S/e8vce7KkVvXM0XMVp1Z3jJJ1+WoMKOE2QVRzR1cVf5j9\nlygc2erN5CQWjvXWy7qzeOnduC3POTS+ugmW6UkMINCPGa5ZSG1bqzidOyLF\ncz77Us8Io0ngpRxIV4NjWcJvGdD4Zz/vnPncOwXOqxBqp4lewQwzEITyKD/U\nclhln/NQE0q4L121vaZ7byeqHkA5ba3dxRojQ7cz5D59Y0+aqcHUglIvKski\nxtbAidGiPG/nvufmXQ5U5deTojr5It3VlXQ9qa6a1iaN2mj/cmxiIi3c8AoD\nHFQrSF7APV9eHtB+R/q5S+DfHrenYtJRzHTtburbYrczvzOVBjGACg0VXfvS\nWJq5ecP5t5qUhmtpwN6QVQgP+cHQEMDc9ag8cLbGriZbqAij7MSR/KKZCTh6\nTtYDaEg0TC2W9DoLPFXXZywtQWFGcTGn5NPUWVeWN2pqo1azhcOvfKyxCtHE\n92XFUCYlcKgsvvFZ/D9yZcrpj3pHLoJiTFHM+mNUg0O8pjFHMR/J6mmMOM/a\nS7EUx3NPQ0oH+Cr7ocE8v3oPczCrliBRxTmCjjmJny0aMhShmLlqw2yvebII\n61drXlthw7p5fEkieQgg30D2HpY7oN4PaR47SjA33CzUu9O+cNL8TULoYHhu\nNMmw\r\n=83At\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEWjzUFF3rwS3nuBl86liwFUcbitSUkJAnZs+LveUbjZAiBha1iSMSG7Z1jo4bSv7FVSV5iehcZ2V5M/cKa/tfD4lA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.0_1574186563792_0.05821504791931975"},"_hasShrinkwrap":false},"2.0.1-alpha-mobile-tooltip-5579.1.12":{"name":"@crave/farmblocks-sidenav","version":"2.0.1-alpha-mobile-tooltip-5579.1.12","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.1-alpha-mobile-tooltip-5579.1.12+144ec5dc","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"144ec5dca3cfe8bf178077cc38374569e1a92b06","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.0.1-alpha-mobile-tooltip-5579.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/g99bakVT3ALkBFj8NHUpchyyUxWwkmazAZQ0pxzNKrZsqTpuJzvH2+VfJJJW6gBVBYtiKrwhPruhiEhmiqCxw==","shasum":"ca5fd9cf1b03069945e3b95a945e94fb5f32a8b3","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.1-alpha-mobile-tooltip-5579.1.12.tgz","fileCount":22,"unpackedSize":49839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1E1kCRA9TVsSAnZWagAA/9IP/ib0yxg/pqQVvS/tDiQd\nDJ6DXK/OTvLIKtlYSpWgXtz73Uhchmbbi4xbNG/NUbqGwJFFmDfDCS2lSDep\nDN/aqQ45Iz2KS6p5RrraaSS0G1CH69Ygl2dw+vzCNi5OnGGmyP7YVCKQPsYi\nhErvpNOn4V5dAnwFbokQ8f1GSqEZeLiV6zUe5wM/KIk2rV2UCuvHBB7QXqPI\nK9llksSRvV3wQm0D7CbuDLEYOS+ApU8+Z4Vjxjst9rcTAicuptijAGQIMvua\nEC8omzBTU7mj2Pj0Q2rLLF5nFnHRi+DjFKxMj19VaGumGILKZsTSG2mhgl2l\n6UOE1yLZdJGBsfIrOPjnK+4naM5CO5Kzn0CE/56J35niGCQXuay5LhAEsGmc\nfzA6Mo5WVu1DY73gbymPaWo4bDsZFyCJahL4Wd+bWo6A09iYKiXGAMPQjBlR\nyX4bMo7kX65L4uNetXxsAohxXvvhKpcMTmFrNmhR1acXp7AcXBLZWE9Geyaa\nLlIBUmRCGJN0YZih6U7oVSfa4vioBfN85m4EbekxITxMHzf1CF7bTWMultHC\naTbyCJS5ea6fzwfNNhOShoE7jn5hg2R24W0sew8o5X/S+ZrZ0TkXNS+kN41C\ncBq7gMnp9LjYHP7d18c2u/U6Gh1VcafSMOJNRQUhzrQtMKug1Rj0CJg2wZCA\ncESl\r\n=YHbw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9gkgYiLyGYluWZ2SEDyhQwcB1Kgwi++x46RJKW0ezKAiEA/BfwxOuViruIsIUev+9K8dd33Sc+luQk5tADRCfXzxc="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.1-alpha-mobile-tooltip-5579.1.12_1574194531947_0.32649871671830466"},"_hasShrinkwrap":false},"2.0.1-alpha-drawer-5585.1.3":{"name":"@crave/farmblocks-sidenav","version":"2.0.1-alpha-drawer-5585.1.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"7616001725ea376117f1c0844fe7331e4c60c03d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.0.1-alpha-drawer-5585.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/0BgxMkqZIRTPi1nrEJgP2DufoXhaiJrX7RuORFzwr9CU8GtXi5xd2+UIsTmMp9qKyz6tgVdenYQFwdTO+opIA==","shasum":"0cb37e11ba80e727bc4d2130c4e7d4de06103b51","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.1-alpha-drawer-5585.1.3.tgz","fileCount":22,"unpackedSize":50095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1YB/CRA9TVsSAnZWagAATQgQAJGSuaWO7BRahWSVUIcS\n4e+fqIT6dHmjXgZoZoezDfjobE/bleiPDeEYJD1DO6QmHfhk0m1IuYbAP3RG\nHp8rlwAIPiyyovm51UDGl/WNUfooe21IFjrr6d0IHocfO+zpRJ6vVAxiMUM/\nxeDDRmM2nge2efUPr8Ot+m3QJf7Jonwybj19vJ3o54wiiJscejhBK+kV9RWG\nYQKQDTU4wcqyB9NWdhcAhIdwoSdbojuG/jVZnS9pRJyz3J3YaujIs1NPg/bw\ns+GoMxOYpo6WEYLNW2DUhlzefMm94gSfoQOF1jgsaqqFPrpKYeco8FSgNlkE\nadTEa+m1C/VpCT+Pk+KprSWRhMtkZnG7B4ZWH719EX9NTG4oDPol1oxnwlVm\nno05NTDQOUQY1y8roltYbU/t4bFxq7aXsMVk0mT45CW+NuJbn3uU7QQ3FAlf\nARumg49nL4nVf3Np50Z3Bv4tmJr9vRtjhU3ERr5NRWrRkDL1fZji2Z3EwLCu\nmZqHKusL8wo8NSb3xLZ5JzjH7AVzZHsqEX5yQF21dtyKl6Inzoqem8D/99sy\nO+pltD4H7fw2ec9JjYSrWwolGdWpNNCwf7Gho6LrOTOYzRp98lqQq9ICplDi\nydetRB8prvsiLj9FEBvO5WxBiNKj4ys4M11te9oBqZnfRL2fusUNFHJ+nOG4\nyqE5\r\n=mK5h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKbytZCH/2Vquw0yKVAEBMOFObJEAhKmjXJZJbgtVq6AIgGBJu+2pEClWpBdLCZXrSnRwEtz2R6ajJ72TNixa0q1s="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.1-alpha-drawer-5585.1.3_1574273151027_0.323825903331483"},"_hasShrinkwrap":false},"2.0.1-alpha-responsive-modal-5591.1.7":{"name":"@crave/farmblocks-sidenav","version":"2.0.1-alpha-responsive-modal-5591.1.7","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.1-alpha-responsive-modal-5591.1.7+acd4ffa6","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"acd4ffa6d42e520c847a5029bd56a83cd59ae948","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.0.1-alpha-responsive-modal-5591.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-hCA99bgCC+dI8m01ZnAyCgVd4QYiIDYdq2s8nbG3Z4dMGU94zWsMNz74BZRo9J/VQ6LGXvCYXtXAq6C6rbESaw==","shasum":"59677a8e55e2e9dd03d9723d17f3b5c47789402c","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.1-alpha-responsive-modal-5591.1.7.tgz","fileCount":22,"unpackedSize":49841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2DemCRA9TVsSAnZWagAAsiAP/RoJJc3NDCfHi4cTnSa2\n7uLZUGJPWq4SGqM28uYIGiERecwnH/Gd6S/I1useay/SqNli1bTZ9r0nlT28\n9VXGGO0XQu9IdsDBgloEt3q1GfXCDjujXo5/hpfV/Lq967fhSmz36XTeS8Q2\n585OmoyKPWHw1xILg4PrC4D/hWPVhiB8kAOwNq7YwCBTWtamhr+sRHSGXWJo\nPduDT1FooyC88m2kgoFlyJJjj1MiRIhYGEGlarsGjV2e/NRc9wp3VE6ZhUiG\nhzgrew1sQqi796qijHpIYdnSXP3Qp2mk+YJAG8XPNbLU/tfhar3byl5e0XyN\ntxjRO/pg9t4FDz7rejnxsj7ycXKkEBcLl6FwyCdvTc3cIR80QZ72WOcRK1nN\nG/CjKEbaAmQp00igZyI1QmZ/n0ysJ/Pj4Lj055b77Ct/pVLcrHv0Y7alhfHt\ncqfTL4nMuSedhzp1BE45VIqWIj0TFw4ZtcWwuJZTivCbDB/7NIvxNUeMkE/u\nqLxFi4bFc1Sqtpwyor4+m7Vccmpc3MiyvMzenK+PzeVuX6/a0C+/xHno/iAe\nUiK03IsGv5feY2VmYBNIq/x0MrhDr3i6EVAW3tHyER+V4dlT3K6AlqSxF0BF\nujrpCn9v8++/hDprIQIiov0pZ/vA3em+EyGPE5flhCNDtf3r88Zcp2rgJvQn\n0r27\r\n=poxo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6L/vMKQNvUofxxffsE77neHKS4WAaERiK0u1jNRDVMAiEAwFPOgvvF9xeecDiIKoQMaHQtQ7Wif4lYc0ulhxo7Jug="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.1-alpha-responsive-modal-5591.1.7_1574451109780_0.40209870649825996"},"_hasShrinkwrap":false},"2.0.1-alpha-responsive-modal-5594.1.9":{"name":"@crave/farmblocks-sidenav","version":"2.0.1-alpha-responsive-modal-5594.1.9","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.1-alpha-responsive-modal-5594.1.9+745c34b6","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"745c34b68019162a39e62b5b9b90952708ff1946","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.0.1-alpha-responsive-modal-5594.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-cUsea5KArbMPnAEqTUNr9Bd/Agl74JGBc9LJPDC/8umAKqYh/uqtMFJ+XVIG0DyMLmzB0pUh8Z0bDdeBndD2VQ==","shasum":"de5e2138644f667f5a4fc8d8135eb90d8d412ad4","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.1-alpha-responsive-modal-5594.1.9.tgz","fileCount":22,"unpackedSize":49841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Tr6CRA9TVsSAnZWagAAA+8P/irQU+4/oGUSuD6lMBr/\nyWKJzrQU7mEYVEICOVOowqWvPS2XrwM8dyFOmRsPcn162Xju51iwvX0azvaA\nKolI04dZEmYUC6OUDX6T8Xsli1/Y0d1R2iWVHQ6zoQfTG+wal7Ax6nf3ClqD\ne1OQuKMski9yEmzXW15Tpt1vsZCuMUIk4zaYp/V2vSHIWYfRkBIxpZqme2D0\nY/ay8WTh+jphjdRRugn5k6DzqjIr3fLgmANDNrx1iUm7QhKdpHPz3TYkdtv4\npu7X65SKjOq3tUBLZmQxbS1P5/Sn/iFLHQr0lMhmCdDh6lkWGBxp6VHGaraT\nXuLbjsynLJryiKobU2mMvvhyHI5WTiFNk5VsDS2sdNZEjLgWIE1LM8bSC052\nhNf0VcPi/xIMUxq6wzyBV3MLQnfMRkzZw/6PzGwmx5M7Bf+qhjskSQqXR3lX\nS1XThzD9Rl4vK+fsuA1KhWqsZAKjP1im5uWToqr4pibEuvOqSU0QG2b8D8bx\n26qgl6pJVYJ+MO/mnNBBISIoy+6/Y2ezOv8J7B73bn4NSmJQF1sJBoTSeWeJ\n3dvtBgPjZvE3sJ7TokAaRv8KjppHM0w9UCmWVW/5T0uW1Qd7fdJfZ77VQonx\n3cgzcNOB6aM+yI8zD/tPY9XA2IVbXJpgNcc9j0a2ODISm20lZb9tX4ApMcZ7\nHB3A\r\n=5NzB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNXjZp7kN851Xwoo3nX6ypTH40bbRtdRB/17Jxny2GlAiBmWaiZL3EcYNLcICQz7KJCF3WwTaBCfMXkazcIN3Kk+Q=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.1-alpha-responsive-modal-5594.1.9_1574779642560_0.06156122341627879"},"_hasShrinkwrap":false},"2.0.1-alpha-responsive-modal-5596.1.9":{"name":"@crave/farmblocks-sidenav","version":"2.0.1-alpha-responsive-modal-5596.1.9","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.1-alpha-responsive-modal-5596.1.9+745c34b6","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"745c34b68019162a39e62b5b9b90952708ff1946","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.0.1-alpha-responsive-modal-5596.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-x9VOLFmbrCVqxinNb+4HBytHQsJvvmfmBdt4KU+/2JbruC6ec6tp+N5yGNaRtW181WmGx90nt4moZIyE4qZT8g==","shasum":"2b3d16ff55148ef521d09c93a3c6dd6e3cfde521","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.1-alpha-responsive-modal-5596.1.9.tgz","fileCount":22,"unpackedSize":49841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3TsKCRA9TVsSAnZWagAAfA4P/2knEAlo2syQYWPrSCUr\niFGAE26ClWoKkuoqEMGrr0l8pn4O8z3cC+2gQsQlQmBH1B4Ix++WKqu30bEa\nTpfJkb6KlMUEdQ+T5U2Kiftwc6C5K0iD6a5+tmlj9tBSQP/ZsxP3MVTj1Gxy\nGzm7cDpIt44kiBfPg6YlAIjsesBWqMbxpeZcFIfcgdIPKsS26t1eUiR4/ONi\nvZbkJrz6TLKyYwGux4hLIlvcClf7hRMwLKGhchQlGOkwqtqZKS9OxvVzODo4\nUzXoHNMTKVDVNRpn6x/BHk7zwF2hFrtt4wJmO0uxXvOleOx8LA/+UDiTCmIr\natOmJcyUX2L3FcOR1NnU9j9g7v95k557bwQ/fDRBqkuoUhU3fkK3bRrjLvp2\nOoo17lPUiNRWOxC0xpCaBFLzmVGs6qK0i0V9sGyvc3TUVogCwKDAEy7x36oD\n7nnXSBexKXfZTo32nxmNXQZbg5EKZzN/M8N2jw7ShsBiAm065KPAH2XO7Va3\niE1kMsGYYtgwXIYyxOZk0NrM3yIRNa6YjdQ0YxP2ycigkaWGKs1ub/U+nZMl\n531tqWBJgT5gDtiI2RwkXSRbLgcJJ4iVPOlqlYulfHXbr0JBqw2r8hwiDNo4\nzSruq31JoEWnttaouJ1SxflMhbwsmU2COdzS18PHPk211KmCK0kYATOlms60\n7XG3\r\n=4kXm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8X0YNSBwnrBu/tDXPOQxiEewzwqbI4aK5WhyrLfihQgIhAL+1okbIe1o0K/zTw7YGcnRMRQGwPwg0cn/NHSOhx13F"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.1-alpha-responsive-modal-5596.1.9_1574779658178_0.0673991072614899"},"_hasShrinkwrap":false},"2.1.0":{"name":"@crave/farmblocks-sidenav","version":"2.1.0","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"6abd55bf32fba2efbeee44a218f7583b68874d38","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-kTPdndCdRjf4Hg9Zk0kRiydF7LOXkgEgOHiwsBYX7nlfQeZDGWuQ+OZ6m2B0GmRN0csl6y02NyZNwad7QT5eRQ==","shasum":"c4087b7f83e1119b2e44b0a9cb4b01d6752464bb","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.0.tgz","fileCount":22,"unpackedSize":50451,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3VBtCRA9TVsSAnZWagAABXgP/i/d6ByYSL+/s+umNSk0\nrU0jKxWIWMsKbIh4RfuIl7Awmkt+9CivMePAPHYOE+QNyZMUdRAAXu1fkcpu\n39XEJjTzlcn+36A23m68I1RRxyR2DJiDzle4+8LUN6ZXrbN9IZU066PEwUCv\nlrpVIBI/XT5LJw5bj0I1DnTpvXNqpRydtsjajpouOdpfzzwB7BGhBsQWbLIf\nf3wWKRVUBRcUZYuHudkYxbeG1OKxUONlTC6gEQqHERDE+ly/NyUK8Rf7uFXf\n9i6DyAdNCeg9RG37J3WJ9kQuRbO4q+2gIVhK48WpqEeErlhw2Yq/tIerZLUc\nNqwjmt1WftxZimhqL+17hbG2X7pssZiDMQMOTHC/ecC9C8hbgaQoUk07mnux\n8js4NldN5+BX9xs0ZB2IBe61TjDPjsM9/qYiarmSD+4PNl7I23lrUeRf+V19\nZ0fzJNrg2UODRdu/gmR1bqmLdHbsJv8zsyEpRe8cENDRfmwBKjR47oIgjy2J\nlADgcobXghgy4U1pOcvZEeGLp9DP5DONME29zFlqKK/cpE6AI/sN2W6Cfzxx\nM7dsviW9Lq8y6p4iXD16sQWSzZZ8P6zUxxkHx5hvglz99KcgB4OEW5UQWUE7\nOmFo+onYOoe+GaFbz2T6vJp68X5sD6bZjzn9tZ/83Pdz2l9S42HP4DxIWWzQ\nRHpb\r\n=EqSC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpc9pxAxJkmAJjWDgMoX4JhpDb/7VORl8+iIyM3dyx0wIhAL4288q/GjvUYEOdhCmevAcAFE+WNkf0tPq01ikaXAci"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.0_1574785133292_0.17520193985566035"},"_hasShrinkwrap":false},"2.0.1-alpha-mobile-tooltip-5599.1.14":{"name":"@crave/farmblocks-sidenav","version":"2.0.1-alpha-mobile-tooltip-5599.1.14","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.1-alpha-mobile-tooltip-5599.1.14+247e4101","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"247e410184c30a178598c873ebcc7f432fbbecb5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.0.1-alpha-mobile-tooltip-5599.1.14","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-yYFrh90bAYXWFo5GL9Cb52+M+ydxtEfskbPSVjoa9DqNtZ/2xEsfctbwHv7C+3d/+md0ZifQ1/toenDS+eLFhg==","shasum":"a3c47bafa1adebc1105f42482ed32a5f19abebb6","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.1-alpha-mobile-tooltip-5599.1.14.tgz","fileCount":22,"unpackedSize":49839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3VTaCRA9TVsSAnZWagAAQ7gP/2RKQSWJDVasjKidPEGk\nBSw/mAMCPEiNedDXsYx/6saPGNITIw0e+0jwHY9V+Fgl8sClXMPihZBzgnt4\nV/9rzMgF0adv2Kc6uXLJYXfzeT6SJuYsyVItVs96Fa5vbbB5uQDqtPNm6REw\nCyWqQ5Rg9xH0FKKLbkClM3lLxU22Vd7LfMm1M4eqWrfKGEqXQyPVA1TcWbgL\nSMV/ToslFZE+7UWHscQpA6kTBkzqlVhFRKqksqaqytcLkvf0aAxSRtvsrj1O\n0VyjcCmMAiA5SOsTjJ9WedBFtVtrLCk7sZLlxd5gnne33DEyjo5Jh9Di156w\nahrQhxIMencVZ+yFY/qP+FeRdb5q8DzObAL39Zn8zxVnDCCf1phPXh1m6Z7a\nHDzdf1a71E5iPV+8ZBS6QLIvhlJHyX3yAeuOnAGAB/K/VYQyBlwV84znlxIj\ndyAo7yVNs47+qdJD+iPI4K8R90e6pF3aKEklIMvt4MbQ9tuhH0m4y1iG+BXq\nRafosrcwA6kR53CMk2qsEUDZeRN4+1aQdEETaWENpPXq0Tnai/oLnIl7Lgf8\neP4bonXNnSLH3FTLaI6+8gJCR6k5v/UBrIp2jvBkEOyA44QtoIzhD/J8BI3b\n6bYeD1JNixqyOFwhUnLopFV26G1GRF92RRUXXRyrefzTjHIEoi/ubeqgnhdt\nySsN\r\n=7MBw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGbhw4AUT3JncBtbcNy+5QQcjnTk9YWzgwfGkIWvULRAiEA11Y28EGQ8BWZ7yZRcF0o0bf2c+RiohCkjG0SzCVYyXc="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.1-alpha-mobile-tooltip-5599.1.14_1574786266097_0.6396337071945768"},"_hasShrinkwrap":false},"2.0.1-alpha-responsive-modal-5603.1.10":{"name":"@crave/farmblocks-sidenav","version":"2.0.1-alpha-responsive-modal-5603.1.10","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.1-alpha-responsive-modal-5603.1.10+b9a23e73","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"b9a23e73bd1aa79ffcadd8eb62a317911d61d0a8","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.0.1-alpha-responsive-modal-5603.1.10","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-hvr0eIpjx3rJeqezVfY2IX2xq19mugdIhhJiK81syPOoLk4aIFMdrQ/kWcqH6weqJSXjSZVh4Dq4LJ+bqJsZQQ==","shasum":"d08ebeb721f03115e0f6ceb78d6903f9e58a898f","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.1-alpha-responsive-modal-5603.1.10.tgz","fileCount":22,"unpackedSize":49843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3XMqCRA9TVsSAnZWagAAb3QQAIIzrOqc4TQrRBJMIVXC\nDe1yXobJUji8O9PoafAc6K2JjcA6FV03bs/zUdaR45havJe4xJuhGnC9o/zq\nFzy6cFQ9t6C4IVGQyn/oC1R75WFTgueOn8IkiKo3CHlgjTCJLMBlhVk837o+\nQ7HuBfSzvq/6noYoX90SIsWlzoncUdSooKC7z/gRXqDu3dxLu+vbIltDMwE/\nWMliPaz/BtmokPeOt1zIR4BNIldNpjeUVfYj8y8+IezIGwGjNV4M9fteg7bY\nTw10GazldCdyd1XnNIsCfpl6LigiaOk3BZWLp7z4hfUPvtC8VvoUVA3iXFN5\nHIPXRj3EMiAAqKyDXFqDEOEXJCFpeyiUgjKUpnpgtoOR9lZvwcqkLAC3Vcsv\nYp/HUDqb82hlwiNUcwHcxgccEOvD0hjmz29MZ2R+g17rOh/hN2FlP19Ppeyh\nlOdebNhhAM+rlB6k+8meiDlnQpp3o9COcecoMML7plsjmbMgPrCvTpkHM1Hs\nBKL/JvZMslrRbknzxz+CWi+d2LAI1yrZqr0K10upZCoS/TNejIEh/c7bI/lO\nx1fXN0bSLS2QVILmk6drtiV8OWJQBNOr3qcZlh4bmgKlZDFyUpOMhw2pYkL/\nID5nPPetsIx73i3XT39xgC2gLU+tRb51EtSPffVgFXaWg7zctwSA8rRwyCAc\n1CAg\r\n=3ePw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+CxQ8ZLYY/Ho0uJk2HQp4jlIsVilUu+MPcN4RjTcgKAiEA9ggCf0UAMEb1sBZBQQAE5lnHO7F60kkwYGSiNVShTJA="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.1-alpha-responsive-modal-5603.1.10_1574794026106_0.2656439660834786"},"_hasShrinkwrap":false},"2.1.1":{"name":"@crave/farmblocks-sidenav","version":"2.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.1","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"e70eafbdf477f897f65dc6167d3e54da59ae1fba","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-isUdN4oIYLzKbpJCC018f3JIo2IFL+ybNjxT2qoiDelo6DmYhscTkJRjp+6q1szNDt8iY3h8/Jdyzj295VV8iA==","shasum":"4e9964694d1c0a643e9e647e8b69a3ba4bf1d10e","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.1.tgz","fileCount":22,"unpackedSize":50662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3XkbCRA9TVsSAnZWagAAi50P/0zBmVcIsejis1wEWbLL\nI8eJDftaMLhGoQhvx8NTUO/SCiXsqjq614E+fQmIdmaE32pSqnKUsdEK4evQ\nnJZAHTpKsYgW+BlXHWeozxfDa8ZyqWQAP9JOp838TBgDH1R4F5ny7LeBq41p\nrgyT+3coaRJwCi+z+ftezAjW/lmOt/RBsjPbip3sJZhiCHQxrwgU2eYdKC61\n2YwelMw5UkTp7NhD9uR+wKYSOd2kaBa4kfAt7jRd9Sr7dE0GpaXsXjuZGHG8\nQl11/XMANNogJTEGDvZMvHMUAK96u8w+ojAImbSK5RDRkKHPnVxzhj27+8KX\nhBaQRhebrZgU01xUkjWiOroS/rLCiWyRjLdk6ekIXiOptTNEet1PwqkMFRv8\n1toNA+OdUyA80VTTstlVpOK8lhVGMnjxzAFXDirfWPf89OkjEtMWf7TpvCWX\nzJ5evjsPFw0esXEbTt06ynauiE9YcqRmR+5B5uA4tJZXAA8jIZL155D4+wFF\nhR+GX/SX3lZCEvq0tgytLd0lmeuAyr32Jw3VqrtOKgG91K4IDTLjus/gj+SV\nf/v6Qay3Iqgpa2NR2Q5hQ9SJqwOP+F1o1A5xP07d95aUThueLwNQ4F/3KBKV\nljgH7H4+MPhKGKNLuq5DhgBuCbzbnYG1Vi5qSL2mkxsvJcQ2P61GmcHFCcDd\npc+y\r\n=D2CM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMQQ9zK05MPlAxYgtUsFBAVyKs2wbUlNMAjViR9IYFYwIgG/QvwpVDvZyjl7QMZUOzKC1x1pFFIuHpzflzJ5gHXm4="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.1_1574795546828_0.6164099619894439"},"_hasShrinkwrap":false},"2.0.1-alpha-responsive-modal-5618.1.12":{"name":"@crave/farmblocks-sidenav","version":"2.0.1-alpha-responsive-modal-5618.1.12","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.1-alpha-responsive-modal-5618.1.12+ba3563d4","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"ba3563d4cdc3cc269b5ac4100a1e6ad5a4473d6b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.0.1-alpha-responsive-modal-5618.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-YVNhH3K/envPJPYspJf1Cj/ZiNydCttJEwqj23CHJ8hAadnRRhl6ByAkHhJXIziVSL9YA0gyXZKgT5aXjOHMZw==","shasum":"f507d09c8f0d07d2197e118c963bfa0e531dad47","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.0.1-alpha-responsive-modal-5618.1.12.tgz","fileCount":22,"unpackedSize":49843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sOwCRA9TVsSAnZWagAA22kP/RUyaIsse1ANyz/vfUZ0\n/fmIAaQmDp+iEeWzrl3hT8+vlILJNUGbAeI2YWi+v11AkENkbJl8RTA4zCMV\nnXfhmHQBfsnWWkg+upfcnRm26AthPtKiiOy+DQXysGLrCwHPG5m2odxGt6C+\npf5aNF6YPrAC+3hmvYxboV4WOsTw/ewF2lryQitFZkx8HkjXz7ehHj/pxO8v\ncpH/d7SI/Fg7+Y+ARFqfYOiJsXD/AjwZzyO2zqe7q8FzmoOJ3+xEr+A1BETe\n7AuCTnfNhT4BEu4BpHGcl+8iF5a5HWQ7v8FmMpi4Utu2BVqrXGnpEn0J1ve8\nCimxfRRoOBNvIW4vbxYaY/E094DI4A7TOjjnC4jqq4kBuVxedTERHfK2a4TW\nmkJPRyVfoaGlVWNGMOOMmq/omtwo3RU+D220jNsXOZ3Kya20wyEIj35pV6qQ\nv6t5BX2RSZnLPgR4S4cGNPJdf+9AyYi6uQUQioZvvaQUW7vh9Pwp+1LRXgNI\nGyyNW+sZFEfL6cW91TXAQ857GsQPf/Sz7ZXeA/aZi/NpYjBVO+X7NuL0xgP5\nAsFFfduEDqeMBbz/uSLd9HzCCjNWMUG8DROMMqvI+d4if6lEI1zlSO/MoBL6\nW6R5IL1eeAmjLSJolmsGzKsV/ync5Pw3BfuEP6PukdJ5BZF7gXiBcxK2K22h\nVTup\r\n=icvs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICh1ElJ8Aw/UJBJfRcZDEOzwawAecxaVDZU6wF7x07ZXAiBnOEvKVU3IoiZRbi00vEyMhT2aooFYcpoV81oeseiDSA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.0.1-alpha-responsive-modal-5618.1.12_1574880176197_0.591017673484878"},"_hasShrinkwrap":false},"2.1.2-alpha-responsive-modal-5622.1.8":{"name":"@crave/farmblocks-sidenav","version":"2.1.2-alpha-responsive-modal-5622.1.8","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.0.2-alpha-responsive-modal-5622.1.8+7212772f","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"7212772f472b71916e1cd42fcbf4a9e0931b8a48","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.2-alpha-responsive-modal-5622.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-3CC5QiBZapI8q6PVJ1YsqBjfKQrQm2sO+Uz9rKN/cjuj9Ku67rs9buCD46tlxeNq5XkfIPbPhAYEUVpdWvVWgw==","shasum":"77385eebc87774d4b1ef946332a2bb41f322a897","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.2-alpha-responsive-modal-5622.1.8.tgz","fileCount":22,"unpackedSize":50744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sbHCRA9TVsSAnZWagAAzEsP/0Pt+smdyYzsDMhFRN+d\nWymUGL+uXuOjYpukDgowfTsSaWnkAYc6TjomP3HSC/K6hbb+NXmXbSf4S8Xl\nfijFHf2+3VlCxHIbRRWG1PxV79fXQEeiwzu5Jxhrs9aJvPHzrVx/y75SbZsb\nNOCgbZvVOPoal0l9YwU6VNyi2XHLdyjhgNM5O8XmXRhHyM8eziKcaTEZHXGV\nrdB91tdexOfMYoXdTMqXduOGUZNlc0CEdBJ7HwWhv3+bkUEKnf+FXmrwVpN/\nxpfgAcr4fdtMylV/rQ8TU2j0qDw7Wq9L0lXlHAjE7NExpFNKh8tggY0uXg5J\ndCaOQYeuXf4+SD2n/ri7z3TwHBLl2yF2JomC4hhfIqHS7At1Xtud1xg5CNE4\nbOkO2qx2sy+PMHvye0wAdG9dqWiZ2yGnMiXrM7l32CjYDkCmC1Si2mJ2is+o\nMKl9H9KuglIjcjuxwmWYRwfmqpJxQfAsDyP0lhyqdW/1PNmBuqOqrPZ4qzzu\nv8ghT1ZpcybOZCd76j813Jg/OATITdlee1kcL0xsMHDBFWu6Zg49xfOw2ZL1\n7u0wROmT90ywkB9eMrq3iDapW6Z6nnassACG85Yhd6QeolsgosGZWboDrGO3\ndpz/NKaWOnUbdLfcyJ9Mg+pjkl2BF7iKJeXDOeiRsitZnj0x2UHUc0TQJb6n\nFfvy\r\n=64Sv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIGcsvFAak1eWIYzbACXGOfWCx00pbAMUy2I++KrfKygIhANE8E+1h2/jg1qGCPvoctiRWyTmqjx3vHTTFYH7jYloB"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.2-alpha-responsive-modal-5622.1.8_1574880967330_0.2599120713153087"},"_hasShrinkwrap":false},"2.1.2":{"name":"@crave/farmblocks-sidenav","version":"2.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.9.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.0","@crave/farmblocks-image":"^3.1.0","@crave/farmblocks-input-radio":"^3.5.0","@crave/farmblocks-modal":"^3.1.0","@crave/farmblocks-text":"^3.5.0","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.1"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"6beb6f6dd146bf1ff937bab132598aef39cd1783","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.16.4/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-16Xk5h0n+zGqGKedG1KlEjcOJiwoOukAMu/4heWfNvMJiSWnWGzrLfY8PpfKOGUAYTy+MXmBzqds76Rgb8rhdQ==","shasum":"b1cf4dc3601ee203c2d62e001414db45877706eb","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.2.tgz","fileCount":22,"unpackedSize":50873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3sv0CRA9TVsSAnZWagAAHPAQAIrlzSs2+3P/e0QpHD1m\nuXbVo4fBr+l6TaaSxs4jvsK8DYQVPUlcGP8yoAQ0s5cZTKCRuxrZfPI9blOi\nNMYehdfvj/nwpOtuqCtS06L/nb7DUJUDyK/OnutcgpoXoY5UbJxdPcib4vtN\nGQxNM+Ku8YHNqyW6x/TbYemoWX+wlbIenvRZ30ZKMKPmDtNUczWrDzWreH3C\n+s/y7iT6fxNfH2vB7UF95Re7X7cbzCaLG/Z7+onk+o9ONUiHGHLBTX8gSfT1\nU7luhFtCrFdmT/stV2+N3KajvOovaDTMyQ/jF6c3zUCIREKwEnptP+Qkjdbb\nHHOEgnnvhpFTcg3U6dPfaVH0h0331mngkuzS3Bqx40wYIBhQLecTKE+yx94o\nV1Tj1/XD6f/h+FUd3SzTU45AC3MI/7DSXe7ma+HXwv0p0Na/xbhNRIRGMkTb\nrRTKdVnegPb+usAUK7+KHTRx37V6KzfIEa9U2ZFVhEyan91Eo2rBrWO9SqPK\nslTKhJDW2r6Yk23JL9bEC5oFmSYegFtp7fNMQxnnBtrlkvEmTBTHOxXd0rda\nGBn75+AKr6N3n9Bu6GcvAPS7BH6hLetE/d3tTwtlRqLFg1hM6csznU0nB+by\nklcuU5UtYfpHsUgTHn5wOUqlPbR3jy1npcFRazFPZzvVXkh+FMaLCwwoLp4r\nc/+W\r\n=8iKt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEUFO9Uvj/sci7Dl6zp8JDiS0G+/YD4dOqBzo7QARCtwAiBrVCzdbgYMy5KmuwW3gmkt+F8OpOqxQ8qzn9RhgdxWdg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.2_1574882292113_0.4579045982978629"},"_hasShrinkwrap":false},"2.1.3":{"name":"@crave/farmblocks-sidenav","version":"2.1.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-image":"^3.1.1","@crave/farmblocks-input-radio":"^3.5.1","@crave/farmblocks-modal":"^3.1.1","@crave/farmblocks-text":"^3.5.1","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"45d82593f4597cd7418ae37fdc7d2ccf6cc2f099","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-h4KZ8Vny7wOk/RKiNHut0qnNvyrkG/+DpP1zfIVYc7N8D96CZTCT4dVRMIOuycpBSE9qDTt+LZQ/z+N6VUQOfg==","shasum":"488d6db628eb6a192f22deb032237a42bffc06c9","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.3.tgz","fileCount":22,"unpackedSize":53280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3tymCRA9TVsSAnZWagAAw9cP/1LhLkj9TugLi0uDCXFk\nB1T0p6p2hliotNZz12TCFxuBvFej467A3oxYX1FxZN41UOOlAareb3Le+ibF\n3gVgSoPjVYvPyCr65i2zuMct/T6BP1JkgHjw3zDr3OZS0ueD1LGK8uto2E2R\nC02eIJyRopoO48wTy8p+yIvLEtcyUzo3BoyuBMplZiAq3IsUz+iTUMu1Eies\nj06GUYp0VWpMDkc0IaPlJXTg6JkBuEVxMtLJbs8b8Q8GJ4IqHAhZh5kreshw\na2pkEjTbotrhFe2Yh1x+Rt+4Xe3gcdns5ZO5RhGhSX3b7Oxa1hTyWP840Is5\n8BL48R7qI9qoiygXvCt3BC9GatwO8Z7AIUTQY1lIh1LQtprpLQ9EtvTlcnq+\nwUQwf76XrryM/HhxVCLhWDcomVChj0z7rP7XPIRy5Idi5WIwcZ1eT6a8t7cU\nUsV1ZiT5qTpMckEhUBzt5wzx3oiDkLue7+RrjUtg8/JDckpRYWvBG/O6/fvk\nwHCRjIwXAhC/ALC3MWWPvG/1vXzu8I32y50TIybBBue3pMy9DAMekX+91ADF\nwjQs2VZf2k6F7IM6XMx3NbeIXmapvGaTJp5lc82lzdprRjTt+cdzFsVXwgIJ\nuByMoqD2N6xr4d0ke5JHVhvQjqKcIQF5CpPUd78sZw0dlMJtvqYOk2btUgqV\nH13l\r\n=0YXo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2bBbsCN2oDalmFZ4RzJwOykExGznKvKvAr53b0KSouAiEA+ZCEPteu1xJoMOsziwJUyaFdPrr3sct/zc8k2egTPDc="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.3_1574886565444_0.8422417380127643"},"_hasShrinkwrap":false},"2.1.4-alpha-fix-proptype-warning-5631.1.1":{"name":"@crave/farmblocks-sidenav","version":"2.1.4-alpha-fix-proptype-warning-5631.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-image":"^3.1.1","@crave/farmblocks-input-radio":"^3.5.1","@crave/farmblocks-modal":"^3.1.2-alpha-fix-proptype-warning-5631.1.1+95c37ff9","@crave/farmblocks-text":"^3.5.1","@crave/farmblocks-theme":"^1.6.3","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"95c37ff9a35c5bbecd211b6fc3a87f098dad289d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.4-alpha-fix-proptype-warning-5631.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-JD6hLG7HdtQSAVwKxpfOgmaK40kPCfs/udwP+570sT8gPsKgYuSqIWfuO62Q5ZVJ8R5/+0oOE7u7T5TC3hq6Yg==","shasum":"0f77bce30ddf85c011be4c2afd3c028c8e5e7782","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.4-alpha-fix-proptype-warning-5631.1.1.tgz","fileCount":22,"unpackedSize":53370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4CUVCRA9TVsSAnZWagAAJtoQAIl/vac3J/H7yQ1I1neV\n+tHZ6MXsxn8dxhqmuLiZRgrxlvx6tULoZZyqfLwZkW5kASaVPRnfxJFs7M3c\ngJ4wZLcYXDnvgQPIpCqtv60wFDnMD4no5TXENcjt7jnH5V2dGlk49I9L/HG/\nHDm4kUd7DgzM77GjhLWRPQ//TzzvWLkMvGuOcbpBPCQ7acVtrY7O+UNUorE1\niJVjy72IDcEw1+H4C6wJl4eEjBq/R+9Y1iDpJS87z4eamiU4wz42CORFwj1r\no7E718d2G6lH/7aJkZMHwdVtYnNak2N9QxiGP8t0/wV/uFUwV6wK0KJigvzz\n+oaFUMQXtwd+v64J5k58b/IPPVl9M0BCE8U/gkmqRGSJ4YwPuZ9OItsC2/TQ\n15GQ5yqCnaI8D9Oc6jsd/v6nDegLlW3vc9QsP0OgWXY+VuazojkVUDzVWEN9\nYEB1x9Qz05a+oWMuHmRz7RoaPgTPBWcoOZm5xqDOANAL+CJGc+m/SVwqmp1W\nFMq+M0LKeAOSmLMDgF4PczYlSSHX+gLTryAu1NNk/LUy9ZbUjwm6Osx4IKbY\nhyMx+D5YaIKYDi7e5nzjKZ2DNXIBZULCiF4kzz8vBc9H/kPciY9p20aCIvI5\n+yy03/w2jrDGxX7x2i+k7xyEKrA9Wiw1LkWWy4ZcCCFvWBUURDxjGA0qvI6a\ntWzt\r\n=/sCK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZxOa1NxvqXrWrG00TQMByIDyX0eFMhBco+aFXgnVeHAiAe0GUgstYMpE/w9zd2PkDusmhPeyRsis+3Q8/O6FMoQg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.4-alpha-fix-proptype-warning-5631.1.1_1574970645005_0.6313137790954082"},"_hasShrinkwrap":false},"2.1.4":{"name":"@crave/farmblocks-sidenav","version":"2.1.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-image":"^3.1.1","@crave/farmblocks-input-radio":"^3.5.1","@crave/farmblocks-modal":"^3.1.2","@crave/farmblocks-text":"^3.5.1","@crave/farmblocks-theme":"^1.6.2","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"26927977a91a31e67354c6b722a3b1a5981efa17","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-6MiiSKgHJ3exjKRBF8XqIrVi5z0r9bJPNH/usaY9W1raxRm7Centqzx0pGG8TlwhOlEEg0cmcG82ynXlMs+W3g==","shasum":"fca8ed81aab631b998f958691b0ea20fbae2a22c","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.4.tgz","fileCount":22,"unpackedSize":53491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4CjzCRA9TVsSAnZWagAAyRgP/jqaQapwLZU2j3f+s3IC\nX010XdrAG+MAevvCOZnKalOjt6MUtOm4o7TKdg/g3D2t1gHLA3Bi6YiZlOsm\nFpKaO477+y/mi/pujOroOLnidMjbxq7NMeXheHmork1kndT4kEEl10Wd2HSZ\nuVRFSpPNLQ1tg63HG4gY6nxwiw8YT4CTNhIYqQQdIaeiv5kqKV9/+eR14DnY\nhQDy/4jBFR0Xk53t+OP8qL34cA/o9ZEsJ+727+pSdLEmcwNYQQnRzfsfwvew\nAzSGiEwDgJuPLw17dMASyYaoKyLndcjw8t+HpAr8DF4hFPrFKiZRvVkJEpeM\nXM9bzF/KdSJxp2AlZmIwxRv1LDgJjVkzQ518dmVKcNs6KOIDTpGQhFZO26hv\n1KzD+axNsbjYrhtU2Doewvf6UGQNXNdMqVkhFwlsiSpT0VePFb7EW0SUQ3CR\nlKArpikqrxqM3lHNqjYg6SZ+xvPqxUz4qV112/QQD0blxlv56RGDCT5jzUKx\nCvgF5B9iK5aoI273iS/TagKkDhbcyBMqcae/IzKdmamRxEVkGn1OCrTROh29\njnD3sLIMY/DXeSdlteEvuXAhMaC1achferPyR2DtuUvJqVBv4EW2JyyTK82F\nzl1JGMiwuf4i3YgY37Hutwc1cU4xxtKwjKfLA93Pd1qB78NdavRwGAQDDV9X\nKFeQ\r\n=pNK8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICSk4BSPMq6z37k7CZ3v/CPZA7Dcm1wWLy0p+R5R6S1GAiAZwAvSqiXHjhjgrwSqSILHpTZOw9apj0Xr3llobF/YAw=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"fabricio@fabricio.org","name":"fczuardi"},{"email":"felipegameiro@gmail.com","name":"felipegameiro"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"darkerostanki@gmail.com","name":"mateus-stanki"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.4_1574971635162_0.5006748383508142"},"_hasShrinkwrap":false},"2.1.5-alpha-tangerine-5635.1.1":{"name":"@crave/farmblocks-sidenav","version":"2.1.5-alpha-tangerine-5635.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-image":"^3.1.2-alpha-tangerine-5635.1.4+911bc365","@crave/farmblocks-input-radio":"^3.5.2-alpha-tangerine-5635.1.4+911bc365","@crave/farmblocks-modal":"^3.1.3-alpha-tangerine-5635.1.1+911bc365","@crave/farmblocks-text":"^3.5.2-alpha-tangerine-5635.1.4+911bc365","@crave/farmblocks-theme":"^1.6.4-alpha-tangerine-5635.1.22+911bc365","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"911bc3651e3096adce16861d7845aa567dcb0e7c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.5-alpha-tangerine-5635.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-HpnhQG+wBRtjJD8nkT0JT405mbOMPM9j0nlHSGWG2Y8RNgyqb9gWOpX8eoJ3Cl6Fe0VQMXs1nb0cFTKvwc6xnQ==","shasum":"4d7acad8cf26ba12a871f45527e91c2eede2d203","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.5-alpha-tangerine-5635.1.1.tgz","fileCount":22,"unpackedSize":53696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5q/HCRA9TVsSAnZWagAA5cYP/20dTF57IO+C1CZVcJ8P\nF9fmGOc/v7b6d94EFAY+3OZGcRnyOZW8oaohw16lMfzKrZIqJWoeQXfTThrm\ntXv4p0hCe11WRr1toGYkBSbPOUFjQ5zuzs0iBZUeFcvs9+FOAUwY7CZBHdE3\nUZG9/bcY89Lqgh0P9oD++68sPkjxbbmGo99u6gBIsFp5rcgoNzs4ugxcAVqO\nhrH/VDNaHOPHtFAeG1B9cpq1kUqS2YcTjGWgefQrs6KeljjH5uU3us2mz6+u\nqzN4tNgnlM4+m7EoV9Z/oVAj4I/0GIMMwWSni04BmpddGhRZ6ssBbeKH1FxV\nHEyGV2rKNlMIjN8cnRG5zo0jY2JXuU8oAOdA9eo1a9gndAhE8XbaM2HFsfEJ\nT1gILRwnW9aGhSy+8bMC94ZWlEuGK9LBq5bQvepfqKU12PlPTiVmMNMv1D0v\n9jJO8deplD6648pm3hHaQWuV+hV+89QuUqZ6tpVpKUv6rBJIkNHEekOHuH1w\nG6YG3w+jLqdGy2oFHCX+G3CQvMLU6ZLRML+IsVs7l/muIUsAYTSSC9uFOMYK\nXS1HMTcqTC7rAtvC6uQ/XI0TYNBFhQ6KVtq8HcvnMxNWpXDhm2jbHp6C29EY\nNF2J7feMGxFUrnLb9hkcW4XdkxIWcFA0M8axMYXY3vbaDawHMOTzziNwO/L0\n3ndB\r\n=Sl3w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvOyasRLuyjVH6TcpFS9u8RWEwwWtrmnyoJ1U1XHctgwIhAPCDwrGLiuJy+HmLqOQ/+fk3+wtHp7SXuI2iBGINRl/+"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.5-alpha-tangerine-5635.1.1_1575399366575_0.7888836809707751"},"_hasShrinkwrap":false},"2.1.5":{"name":"@crave/farmblocks-sidenav","version":"2.1.5","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.4.1","@crave/farmblocks-image":"^3.1.2","@crave/farmblocks-input-radio":"^3.5.2","@crave/farmblocks-modal":"^3.1.3","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"5857c6db26db5a7d3c313fda882afc5752941621","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-CIjGHUcuwL/5SNCPUHOQp8iE2ogKVG/ANpNmVPKoOLXbIrdJjyOc9OnFyfdeVmhmLUQlal8ldU+iBgfHEsf6Fw==","shasum":"a26c2be68c87734a28bc69ef194ec5f464280625","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.5.tgz","fileCount":22,"unpackedSize":53702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5rURCRA9TVsSAnZWagAA7r4P/i5Cz2+FLUAf8Y+A/s7d\nf/bxfCqdIXnPgaOFJZg90pRAawQGMzkQITAS9OOe3ayU3OUhQRtgTrHhZXlD\n0yrc8sZK6bkKQ44RwhwAr8SgZaxf9rkYnDuIkOwjSJsfFM1AJ6/CQAUOOdNw\nBjK4CB03Q4TQmpZ6M2VyLO95iTSvInDnFlTN8hEkXePKPzxlbgjmiiqlq8D/\nSydC4pGH/yBQfUC7/Yl4dCgtPQmoJ8JE5HzheXUtE4rdL5zWjSOmP+IoRqX/\nGs0P9AJIKld2LE2VMVSWOB9CvywQ6Jx4F4EJn2p63Q2wzOIIE2bmGe9w4naI\nudkjvPHF1PlRhEwk1W9avCL/O+1zMFPBd0amgwheU6QZOY3G5i0rHZPSYaCM\nchFbjRO1iuf/dkQISeM1YFDdUTlOWpVv8fgs6wJTKhCeV9rSta3d1njeCKKW\nTSX31NF+iZj8ZmwrvZSdWza6di9ioTZAIzA18XCBfHXpuLfdybsSPdG0PkJP\nVNVUnVgMwnI3Bf8BAhR5RkQxZrqEIi896pnVLbHQbNcUwRwSDLRRXbQ299J1\nnlhkIMx4UAwRmqHs2s/liM91ier6klr9a0U3ip2thG71IcqQX3rcOlwyqFwC\n1ACfSF7o0+jI55E5u+KV9xhwukOwqa2lET+5tNal1syuMht0nfB/S6Enb0Nn\nHX7a\r\n=Ter9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+nKEu7PP/0FjIAXkS5NcE2N0dXn7UrYtSCgYqI0zRrAIhAIXQ/J6fIiHwr5j6hiAVBmR9O1NMjG/FFgFthqpijlR6"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.5_1575400720625_0.46350593349186164"},"_hasShrinkwrap":false},"2.1.6":{"name":"@crave/farmblocks-sidenav","version":"2.1.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.1.2","@crave/farmblocks-input-radio":"^3.5.2","@crave/farmblocks-modal":"^3.1.4","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"342ad4e3c27368ca02c4ea9c55becd823e45b617","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Wm+v0xquea/bhudIZ6iyWCicgeawPc3Pd7J+A1s35mrfd94GRtPvYzcqlzVFq369aztvhLtpLCpcSP7boedS7A==","shasum":"ba94bcee4d4c97545775b11da8ac9e955df5823b","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.6.tgz","fileCount":22,"unpackedSize":53913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+lo5CRA9TVsSAnZWagAAzFEQAJR2EJkmj8Ib3Q9Ydkjj\nBvAlmnaHWhkdWOaAMalP6b0EKGt0XZ399jhcrXAldIgVSpIex3FJhCOxENv/\nKSyiRXhFlJU/cS0O4e8uHEZlCc+rJaXOeGItyK/nQvFcJSHi2h0HTK2F9cjh\nPWEF3EjVnXfp9atdEtv3XHhhVrFXc710tuk8gZ4X7iNGpOhf3g+UDJtLhLJu\niV0Mx4ie0JnDAMD1bL7ZJ316gp4lWkuIf5b7v3rq9xtBIhRJopuS7iEEAb5O\nBtZnetYl3iZX7q1onu4NLtyzBxDlRlRwBnzS42OnQCFyjs1pLWCJFhNJ8sO9\neWpkxzlv7YKsvtU9VCZemormenO2VKqRUmXy3lrsowZq8NnmVUstBe3dGJ08\nyi8cKzsw/TAS2h8dpBARZni1P3olGmyTx/GUwMcdXhG6DtUQWVrT7Wsqb62l\nmxI9umfBUpMUmQw5qHJuTmwltdC+5D6UV5Ck81VXp+cmYWTbizS2a6Qr1Ivl\nbw0dqwQaRyKA+z4Iq0tf4lVJbwlMsQ3nXv4b5kCpsHU91Ed2vJp8SvZpfZIv\nf6f5CELnWSWW4oVZA/V2wSbJrg9fZmcDRiCSIdkiPQlw3xoAWCG4l7Dtr7iO\ndrHUPZeLXkzO9N74QwvU7q6iykayorKeCszTFj15z5YF2yv80Dv/proowpRY\nmUHE\r\n=k0R2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaCtyn2QZHFTh0s2K6z2NbD3fXnu9km14pBvxBTK5N7QIhAPN4wR2YrwQ/rSNqkraZzVt5yXohjdY1EOQEuJOLkKp3"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.6_1576688184968_0.5881807868860212"},"_hasShrinkwrap":false},"2.1.7-alpha-image-with-box-shadow-5646.1.2":{"name":"@crave/farmblocks-sidenav","version":"2.1.7-alpha-image-with-box-shadow-5646.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.1.3-alpha-image-with-box-shadow-5646.1.5+aac48af0","@crave/farmblocks-input-radio":"^3.5.2","@crave/farmblocks-modal":"^3.1.5-alpha-image-with-box-shadow-5646.1.2+aac48af0","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"aac48af08d12ba3c4cd38fc3d4575b5520647283","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.7-alpha-image-with-box-shadow-5646.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-PPSkyXU3543pBamk7Pieu07wHOoLWZtdVE+9C0x4fHcQhHEosNqS6gtfYeh2xzkokxA4CRzxIgvZnYEy4Byb5g==","shasum":"143af32a5231ce515924cb4660ac96830c439616","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.7-alpha-image-with-box-shadow-5646.1.2.tgz","fileCount":22,"unpackedSize":54051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBk5rCRA9TVsSAnZWagAAiIUP/2l2+ksp4oevW0X3fdcC\nVwbDbeQeiGG67exj+ix+LPMJpAIka8BzMPx7Y6ThK2GGmRBxqrwz54Gt/LK4\nPhU64JMz9HE4LIFnLAC4/sUmUB0bjD936jwa6+jzJXRbGgspoYuTaVSdPiCw\nagQdlcBKEuJjBKoq8mqtndpN4j+D6KMfWXfo1Lzt6QsiIXcYMacU5a5vQh8d\nI1qig1RFZoWrSEbsEOgMGpSpeCJsFf4ehqAjIFRJ4W620SHKrGlpaA/W1Lj5\n4NlJYSj5NC4f3fIZlEszSm9wo/ZFiuW+QDK9BBN8s+We8jrezcJ2poSXG1pa\nrCUIxCHNVt3+CZhZIm6oqzOXKIt+RwAZ6tdsq4JjmOvm0GfBowwSVDcXNXwm\nqjHhV2pZvovUin99VoqDF03uQWSMQgJSeNET1oy/IWp5zEyQMeZZ5XgThV5I\ntTJAqgqqvpffDMhZVqVscQTkJpEmgFnsJbJgUM7aoqVgiCGUlZ6mTXXE+GRW\nOzo4uoMrkVvCs99UQlCHM2uNi00roJdf2osgn1Zb0jQeGlgcHDvvGgSglgMw\npRgKcQdw8j1JYlBzS69hLSPIg425eY0YaSb2Nz/GSPD3/h/0JxtydcEH9/qJ\naKnb+K5I0HuL7yRx7ytLrAcLiNNy/Dm3NoPjBq2siGOjW7p6wGTYaC/lyhal\nKz+/\r\n=j+Po\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/4qrtlUKClXGY4ROx0y4TNU3d+FOgBmjG5ZZ5ACIBLAiBiBzRCExUW1IGcEBXxg7HL0LyYYllAK35T11zbkYYUOA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.7-alpha-image-with-box-shadow-5646.1.2_1577471595216_0.5250235592072494"},"_hasShrinkwrap":false},"2.1.7":{"name":"@crave/farmblocks-sidenav","version":"2.1.7","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.0","@crave/farmblocks-input-radio":"^3.5.2","@crave/farmblocks-modal":"^3.1.5","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"5b1089ca8d327cb69181d786fe43fbbb8ebba65f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-j8F/aaImSevTZBny+JzRgXfJU5l1LGlZPgUwAGTiwqgs078WFC+jPJDIBRs9qGNdQ48yFf3ZQYSU9RcT2wTyyw==","shasum":"fe8dd0bad8671103461c21b0fffb107d6757e8cf","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.7.tgz","fileCount":22,"unpackedSize":54124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBlIMCRA9TVsSAnZWagAAThkP/3RttrcqpTzd0yxsj6RV\nHBz+HytmXTd2g4hBn8z2ToPn0WUYNmLavKHxM1tzLy9S6OD/Lsiq1wNLqhp3\nLBxHi+B7OFIdEk5jc2rB+yDnqc3TXUI+EXyyf6RmMVXFW9VnwqDtSA5O51/1\nM8IR0/1SpDXnWUgTL2qitBQOthR7gyPw8O/3HP0rxoh/S84ABG0cccABFs8b\nGCsLqYZJF1yAOdMIAbB7hzVgJ47NkANNXZBZNaFuJ+ZzaTlW741WbKYcHKXm\nG3Vmmds5+jBbpXfvdIzfz0ERuevWqhV640F47l5zLWibcFHiUBmD4yxa7R81\nB0Db7tsl3oO/NS7pp2aV2za7yS709ME0qPTiE8m6+Q6/i9scxvZ2YJdiy9Ya\n/u/bMqCMMkyJgIZBm47jkm5y5vlilZp3mF1HIr+O4pp5gDgEBClrzdIj4D8k\nSSzDIIxEF7B6WlscbCVX/vFTJSYAJVB+KoWDA1MtyL+jxt2+Gz3amjDvyKzl\n1VMEKjxmc69ZljvsPyq0mWwsh7bLjrCEV6pxjKPmhvXyQcA9tGellhr9Q/JK\nQS9FAlwF1Qgllvv7XkephrAP4TYAvVReTQ8kHiqM1ujjo7Sl5PixmJM7Q30u\nLNpM2grf+Fa4RQC4ggPm4MZ+pEtYz4Io+kazTQEqX3JD/g8sxLvsA8iifMkR\ncCYp\r\n=MA9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVqHKolJYP1qOxlSiQAxualyD7toH0pmxW9bY8aDm5YQIgeWbDps9PYXyyF2T+aHcDXYFULRM+iTIgud4guQbdaaE="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.7_1577472524458_0.4133737159821169"},"_hasShrinkwrap":false},"2.1.8-alpha-link-fontweight-5650.1.2":{"name":"@crave/farmblocks-sidenav","version":"2.1.8-alpha-link-fontweight-5650.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.0","@crave/farmblocks-input-radio":"^3.5.2","@crave/farmblocks-modal":"^3.1.6-alpha-link-fontweight-5650.1.2+1f1d2194","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"1f1d2194cf9e8640f7edcc0e4ae7478547b8aea6","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.8-alpha-link-fontweight-5650.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-OpuT2t40gWLXtCLjPmkTPfrEL2XwVlXggwBNfnkyvNpycpy6zAS3Rz7RB3NHAk7H/axxR5sTH41s6tV07K+yyQ==","shasum":"6ad6dcb2bddb28481b5cf20eb4d63c7fc8058332","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.8-alpha-link-fontweight-5650.1.2.tgz","fileCount":22,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4AHCRA9TVsSAnZWagAAdWYP/jS2a+8Be2EJH5RlJQGM\nJRxD5ytpMImYgI4meqWGQs9O7toBJPa4ji5zIqcVQakSempg8+9qpCEDJ1ql\nHgZD+8nVvEaY9Z6jB7gkKGGHmquTgZ5ltDdoR/I+ZU2VkNoaLd8jQT/ZLalQ\nHz8Z7WE2K5/B64gqHdBYv6vqY1ImJU+zBZv4K8PJvSB96H0AOh3t3Kz2lGVG\n1EBkbIwrY1LJnyUZRWPMHTghjiwvgxwKt13ek+TP8eiq1MM4dizwaKjumm/n\nhpP9P9WBnKE4pRQOktae1KvT73xdCs/ObX1+aJJP+Co2AAKNk9j1fYFAU+or\nZWpLt9nTFGCL0ksWL7Pi/IXyVxgVq/cP40CfS32nIUPmqmQkNno80vnS+QiN\nkoc9UUj+aoCzN2TXY+IqHzIXkOOdefinUvpwB0Jkr4WSSZFGSjNzWSRYZzOd\nUUu4zZC7enTtxQrKqND5FGRqJ8YICEmyH8oPI/L70cgvM+qKUve66XaoA2WH\nahoxXmpFs7qeCKX0rOVg2pkXizUFT5A5ZdlZ1QlfqmbeIHBgqxDElBT8eqTz\ncHe22B4sK+GNnf3BBlwJ8OzKdob1ynpPW2/2a2FvCQG98/58ays9hyA0ye3T\nPzQi0eeyBZ30Sl6PkcwngpGAj6t+/hfFL0LIujPX+eOnj7JtWooa4Vg+/P7D\nPBZn\r\n=GwpV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmMSN07zxnpVP7wYv85cBPr7fJ7R9q8ypmCX7U+FM2eAiEAp6HV/EFBZlJubqqqrr+UMds4jaJkB7Y88yiFoso3mJY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.8-alpha-link-fontweight-5650.1.2_1578074119386_0.4207910733487441"},"_hasShrinkwrap":false},"2.1.8":{"name":"@crave/farmblocks-sidenav","version":"2.1.8","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.0","@crave/farmblocks-input-radio":"^3.5.2","@crave/farmblocks-modal":"^3.1.6","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"4599bdbc2e1dee1f2060d96b2b31fdaa025aeb49","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-nQdgNYKQNqpGt5vz2iLbiO1fXfdxbXnuswgK+EXgE+V2zcWfIOWGqwYEZdeGFZEbiSijxGsT/nFTkzgPzjwwnw==","shasum":"cdd1a83c2f1e7534c845b46d6ffab6ae5ab0d2a9","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.8.tgz","fileCount":22,"unpackedSize":54335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4m0CRA9TVsSAnZWagAA++cP/j1/9cYiMcBHjqxpH/Iw\nOa0wDmj9rW1D5BdPXx8mE1oqGNRl+bUis+q6mSfTO0kXDMT5kB85vV/bGpuK\n/nIoHqL/AnKIKSYWnmQpmNCFKN/HXJi/zcxprqRF5LaNxzlbmgw0Eax1J5VR\n52HV4fSSktZy0xEtSST45qlS4qI0w2jx6ozlYOuriTI/Cf+l5mvhW18EgGvr\ngEEzwIDbnN3oYGSM4c7E8ktOy+geNGdWh6gHxBLMJLhbYu0TACf/56Z0mRoE\nQqp6jwzAHRzYzw1p0BHeSPspfwXIexyWMnOxrNBEMbEfuVNkS9T4dNBzxFVB\ne2hziAoAdktM8WuwmQD2j9B3uv/ZIzCucWugXH7/K2Kbj5t/OhLz+y0axgqy\nla1lc/GMBeiNygHBsxQmCIVwGQ5VHa3jeTtaddTmI1RaO+mvTsDBkvZy5NOM\nGJmC/rwHvDHsE+wUzyVHpVUWLIpQLCvfiCbwGxQUpE9pG3oq/yIhh2q9Iw36\nGM0dznF6/JxcKdyJRa+icT1a3kSPugStiQykfRJbSx7pDr57nspRseHvq9Uc\nHqs3BHKzHs+mZS9uQDdv8YT0B3l92r5gewfd+JCm01XRa8kr8cnravKdyF4B\nZXPhDIt3vjXRI2B9sPI2ZUG0Tf+FADrTRt4zzoW2SmMvCiaUvhwyKD/mhYjD\nwC8r\r\n=hbnB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBu0O2PiqMn5cOLWAu3035jm0GNntX2wWHrSX842ik4yAiAgBPsQH57z2Xy6CaedxzX0UKt+o9EHKOzRXIEKgKjMvg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.8_1578076595830_0.3525728516637716"},"_hasShrinkwrap":false},"2.1.9-alpha-new-primary-button-colors-5656.1.2":{"name":"@crave/farmblocks-sidenav","version":"2.1.9-alpha-new-primary-button-colors-5656.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.0","@crave/farmblocks-input-radio":"^3.5.2","@crave/farmblocks-modal":"^3.1.7-alpha-new-primary-button-colors-5656.1.2+585cd423","@crave/farmblocks-text":"^3.5.2","@crave/farmblocks-theme":"^1.7.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"585cd423b49d4f8cee8b02db2e7f788f0985c7ae","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.9-alpha-new-primary-button-colors-5656.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-y8O8YVRkpDsxREsAXRpSZ+4krRd24svLQEpqlFGyNqW6LT3yorh/7moSTN42BF3Za0/IwqhvoIPbAdu3wIHdXg==","shasum":"1f061fd4e638e00f5faa8430adc105bcb1e2c22a","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.9-alpha-new-primary-button-colors-5656.1.2.tgz","fileCount":22,"unpackedSize":54435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg1ZCRA9TVsSAnZWagAAOXAQAJ1ZM17JYvh65dmomWQk\n5FptMD4pBcJlv3uGnClPeid6qvXKk/RZufFequBtbV4ALv/abFSm9W4Xrogd\n1mqkQBHCCPXfIxaXxyzQZTuchB+hdF8TJ7Jt/20UY5DY8fZRV/hEmLmKIMvg\nEwXfLDT9SKbPUYOEdDUHr0WqZLeySyDWhNR40TPG8zRoqDWKAIDx/nC89cz8\ndcQQvg+Oi7nntHZDKz3iN3++9CDCW367eksqt6LQV6Y+JnEip/4vKKi4DUJr\nSsjE3SzNGf10bKI6Y/EqRq+YfZpsv5TdqNd2cse7Zthn/bN2FtQwlK6et+7z\nT3gKgK1kt9AZjVMogIzgOEuwPypTxci9+sAszfAAH5ekT1YQyyaiUUL0pU9A\nzsv3fCxHf1d/xdVq6EPQRtl2mwmgjwkf3cVdG79s5jWAIU/qvQEoPfEnOjTR\nPPK9ZV85X/aXeeqBibfQEJxgb3KrvPvQBdtQHcJ1YI9cNKjyE0EJp7ne+1oD\n0FRWfoWVg5d2R+Z0OWhcfz0LloQYU4UNM/2P94U0ykDXSGeZ/NPeSK0zh4Qh\n2x+ovUFjWPZ5vMsJ2rGJQd1vF6SD+d5J69EfQz3EDcDbJVIsw0coT/61+qMp\nWKN5VERLG7XRME0cv1CUgr1R8UvANzB4ULbL9xa4hsTeK7z2ooIPA0+F8Fzb\nmnZQ\r\n=gfur\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvD9NtoW8cJJlQnZeviOa2oobeMTxVipuqAdMziQOdoAIgN8UXqShQWhqwj35Uk73pOaaZad0dUQFAMU/fNTU1KQg="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.9-alpha-new-primary-button-colors-5656.1.2_1578503513153_0.6118553181274022"},"_hasShrinkwrap":false},"2.1.9":{"name":"@crave/farmblocks-sidenav","version":"2.1.9","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.1","@crave/farmblocks-input-radio":"^3.5.3","@crave/farmblocks-modal":"^3.1.7","@crave/farmblocks-text":"^3.5.3","@crave/farmblocks-theme":"^1.8.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"2a1f45615786366e38edd13359913dbb6ec223ea","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-k8TuQ0sa0TbeB387pNupq/cV1r29LbAbsB8SiOa3iA+0bzv0oIWnC4b90fg6Fcqetj/BWGVg4pUD6tPCMjuTgA==","shasum":"cd223a12b935fde6a084e134ac335d61b29e502d","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.9.tgz","fileCount":22,"unpackedSize":54546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhJ4CRA9TVsSAnZWagAAyPEQAIY3jszcsN949I/d/KAN\n0wm2zc4M6pu/PudEQi2C67UGmoah0Mih2lUAaymQUk9Eht0Br5/GawDzq3ac\nTjz18nqYr5lNfbqJLh9sZygqgujDgJ8Jwb74ot8TQaDCwKsJROjTI76jNBrj\nnXoFuRHSgd654IlTlkZf2iALGFPH+3av7I5gdALideOqHy7nqVDo6HJm5eG2\nX2BidpWFpdT70KjiSK91K14qCIhEUIGr9SFkGTPZjHZyZRWeK6aWPW/11Gyo\nOAQE9CMZONYvwKTDXPMJsMuEeZ8QBO61vpF9jkXEI/UiL8zTiKr457O9FLcC\n2ekPYANm8lcman/l2i3ymHnCgK3YHQWDXT5nRutqLBeQwDNihBGTMGU4gfOU\nvU3JFFC0N4StCHzt9mTGzguvB/wMJ+IyjciihOxZXtyo3HyJikjmkBHv/OCe\n5ho9U0XbeKhXKZIcNPwaFfEAEzyKnTMup91hKG8I7SlicMC/feug6r7csna4\n5HuI1YV8r+J9rV/8QUwAA6A6KTuo/pD/ogV9OUgmtmSMaTLm0bo11N9I744E\n47bWodSn3PuznxDatRP+4wDJksedXc9PO5MJLiD9F3xqLXoGUjYybHkV6oSQ\nhF4kqQE1nycS5meIST9oZ1zlSW9j4SBHmQMfs+tR6TbdA+KFjLN8g0rYU/My\nrqrJ\r\n=C58R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFA1j3IDNpccYTzBOr+3RBMMz2Q2i9h4Rrqd2oa6B1ZeAiByNpaZdNC9BPMCyWp/QoS9/x7CarPomGEne52cFjYvlQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.9_1578504824187_0.7371348408173337"},"_hasShrinkwrap":false},"2.1.10-alpha-responsive-text-5665.1.6":{"name":"@crave/farmblocks-sidenav","version":"2.1.10-alpha-responsive-text-5665.1.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.1","@crave/farmblocks-input-radio":"^3.5.4-alpha-responsive-text-5665.1.6+dabfc974","@crave/farmblocks-modal":"^3.1.8-alpha-responsive-text-5665.1.6+dabfc974","@crave/farmblocks-text":"^3.5.4-alpha-responsive-text-5665.1.6+dabfc974","@crave/farmblocks-theme":"^1.8.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"dabfc9745a201b94becba3917bbb61f4792ef51d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.10-alpha-responsive-text-5665.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-QzINQohHExfGmQoGWbGr8+RwDJY76Jk+zeBfvci3ViEF6b0DJ6DDly/L4emfsutOCr7TQL9kJborZWywlW9ZrA==","shasum":"ed527262cb559634967e81582dd7fbe8cce90ae1","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.10-alpha-responsive-text-5665.1.6.tgz","fileCount":22,"unpackedSize":54707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMEhHCRA9TVsSAnZWagAAOP0P/RZU8/Rn2j0lFkW2YmKP\nfB5pI7nvj3vp/qfWsvPOdNJPbEDxzGzQTbTBxf2ZYF+/s31U23tMfbAEJdzv\nA1cyOFvXZPLnBnF3jZZKR7rEsgvt0iIOs1+NfmTFFPx6PzA2dXvxbPg6xibn\n7KmW2585OZuZVRfemQqiqiJTHleVGSWtwa4xfKBeGtnxLVgR6fmkZ5IxRFJw\nqt9NP6h9gzrQ9XQpWBhq4nYt7AD3Fk1ltvgrSL0vLdNGcnA9MW+/fH001Jr4\nwjfqTYjI+CSr99fP6xjjDHgV5fx9Tmc5ZR+/hp2d/0tGTGM/W2hEVIJ8T/yN\nz1eoG3dcdxQsef3Purhlzn4xkraa2DATWyDo5RmTeNPVem8BFXAUjl3elcR7\nKmhHwJ2vlSdlEa+zewTbDrv9jhRctJvDmiO+KsHI4upK71UQrZ5A6MxXpMZk\nXa9xddxe4JHC6PHNSxPuCHnUvD8lh8rMsmJ9DycfxCzK73bda9ylqIIsT/oM\nsPMPClT9NqegRACMjxvnBr3Zz57bMyKjyWiimt9yC7M7dywHpue8TrfXjLx4\ncBJcrcRSJuE5vttR85N+QprvW8K5bRWPC7zjSp6oCycAvnPVl6Mb5RGPkvpP\nDxMdB5pvBLYXNd4FsHewrIo1q37xdN2uuxqNyCDx4uuAAr6ljtQvhBTT9nDg\n1Pye\r\n=oD1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZRNbLcWcP6uKTiXslLWzQjJwOp6ne5t0nXs5SGPQsyAiEA+qng0aWSPM6EexDNueem0Ww9Hs5fPRnVmiWi/Cjn4y8="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.10-alpha-responsive-text-5665.1.6_1580222535572_0.23674661332716807"},"_hasShrinkwrap":false},"2.1.10":{"name":"@crave/farmblocks-sidenav","version":"2.1.10","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.1","@crave/farmblocks-input-radio":"^3.5.4","@crave/farmblocks-modal":"^3.1.8","@crave/farmblocks-text":"^3.6.0","@crave/farmblocks-theme":"^1.8.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"d2798e1b3b424538dac08d6e770782fbcd636bd2","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.10","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-UxjfJNwXZWcXQfLLOM3d8+5PIlUMO2JwiydhYJvUwS/G46OnM+HFKWApoRVgdyKTkOoDc4ecetmML+6/3ulAvQ==","shasum":"1ee0dc025d085a7e115c17df2d4b0fb587689000","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.10.tgz","fileCount":22,"unpackedSize":54760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMIXKCRA9TVsSAnZWagAAdXIP/3JSdaW9yZg7mH0t37KX\nNWG0Hh1pPbFbY/wZ+XTbH+cnGoQDrlOCMwBbfN3KK9UoppaBR91WvTV94qlc\nv2C0FCTSXtPpFtAZorCn4IgUpDTjeFvg6gTKcQ/8ZzQDHbY8f9l93K23IaY5\nVkFRb7dliATt6+ZKl3zR0d90Va7NSOJz5OiLQfj1FKnWXXbo84T0e2m/YDSv\n3q3+PGygmkSKPMj0G4j14bZqPoUYIrr3h7nU0uGJ7IVJy3xa8DKn/XishEcs\nLoTzI3xcx2PWFyOzPswNBRt9WS7skZj5yTxEM/INju2IV7v1L4mKFs+chO8h\nhc7y30IDweo0gog2hvOPnf4s/6K29CkkpKc4eXkyjOvn9fKClxn+Ks1dffRK\nfdE/WcJOtXA/xbFWgiYaR3JtWw9gqbj5K4XPupatqQSKD2Pbc+SCoC59a/aJ\n5eAq5Q5BpjxHY1PTD4m9qYBMQrlmpAx0qprPdC0TRTwuQ8LFM8aCJbKmHfe5\nlaMgrLp6tedOkNXVEfiYzn9bRdPgUaVfyC8YU+IAQ3WeX0Mo6GWSg0JZUbaE\nMFPX/+fWHdUdcBp2vXCbmGtRgTlBeA1oz6Us6MX1o+BiAxn0cCO/zO52qeO5\nCGpGx1bbzPMyYPCiqCP+iG3QYnqfc3T7+Jno3KsPwTusTGC4FA7BtbMglEkt\nVNS9\r\n=CyTl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC42OokQJOz632+R7apDSc5f+XCRd2Mkst0uBMS+TDcuwIgDe1B9jM26tmqcS1/lX/WfZJDunVhEupc8BKS9aLkXGk="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.10_1580238281743_0.697876175569635"},"_hasShrinkwrap":false},"2.1.11-alpha-card-border-5671.1.2":{"name":"@crave/farmblocks-sidenav","version":"2.1.11-alpha-card-border-5671.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.1","@crave/farmblocks-input-radio":"^3.5.4","@crave/farmblocks-modal":"^3.1.9-alpha-card-border-5671.1.2+a479d3de","@crave/farmblocks-text":"^3.6.0","@crave/farmblocks-theme":"^1.8.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"a479d3deb7e187cbc335ae99eec7ee606c7047ad","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.11-alpha-card-border-5671.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-kCZP9u1CptbtdMEKmsY6YzOJ6xVwXikHCzJ6v8It36fyJD4nQUE9yGkxYIs7jlgqxzq2dDZl2JP9fGf9T7d7iA==","shasum":"f5b792955351ac80c8dd2146e66083ed0be65963","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.11-alpha-card-border-5671.1.2.tgz","fileCount":22,"unpackedSize":54832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOH0BCRA9TVsSAnZWagAA6xYP/1hf7bpxJCpimKKKtn0b\niqffUfprwrSxh1biiJXa/8N03AGJLijyyHR5ssd21JEiiXd2o46ldh29TrL6\nITtO01A5KK0WUqFlqbBKERagN7bVgLQjUSJLyKIE/UjM2D3hy35p3ssYwa9S\n8JCHgI6EijSKXmJ91+qLNdKAv/QsEd527CuLNRylHTwEpgpjcI04PZ5hbS3d\n3gyYcHIQG2o0da6DTr5vXbCiwQ3j6r4LKlrEqiORGfNkPHgF2hIFI5TbARvU\nuiU9jZJN/BMM5XFXdDYVDRi9s3Yoj/dSKN39TPEnp5F8Gdxu7kotk131LtTu\nYENXoxmyjBkyvoRQhMVdbuIvabASFlsB3bIc0AWhlEQ3iHbRpWMFOb89swJx\nRW27snHSp7UCAikZoX8nFnod7Men7g6FBlHz8fmFNeN2ShZ0B1wW2OwKsQIG\nBD7iudBQhRvOYUJvvPOx+WeSVZOn7Eo+SKgnqN/MDCNquLMSfL/gVQdFjleG\nbu9bMSUP5sI8ZSA6h8+pG2CaLIKQGMqJ5pYO1PYErKpqxSs/8kiaSuDbggdx\nrzADPVnv4r3zgMZ8e6daST61SnVIBVzx6RpNicEoB717HMW/cDfBkQM2jD3O\no/P2srgCIPlSP4nWAK7CaXTD6IUBKQ9ZWUg8MtrLqJ6oWDZkaDrCzvE7ZeBT\nOlvn\r\n=Pt8N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFDinsIYHYsFqUTFaTSgvTTKT+Eb6twg5kMY890ZTGaAIgC1FPajSwzJ3JhP7C8VnFP/MueZlw4JJ6hCNFynoax7k="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.11-alpha-card-border-5671.1.2_1580760321482_0.3528277075139361"},"_hasShrinkwrap":false},"2.1.11-alpha-card-border-5673.1.3":{"name":"@crave/farmblocks-sidenav","version":"2.1.11-alpha-card-border-5673.1.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.2-alpha-card-border-5673.1.9+64037a6f","@crave/farmblocks-input-radio":"^3.5.5-alpha-card-border-5673.1.3+64037a6f","@crave/farmblocks-modal":"^3.1.9-alpha-card-border-5673.1.3+64037a6f","@crave/farmblocks-text":"^3.6.1-alpha-card-border-5673.1.3+64037a6f","@crave/farmblocks-theme":"^1.8.1-alpha-card-border-5673.1.9+64037a6f","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"64037a6f9a1396dd7835c585902e6edc164aa305","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.11-alpha-card-border-5673.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-T7Zq2+Tba5w6g8pJzEDatgZ+IX/jbaSc6YlU4XE/d+wMgI3PyipKmvL3rHCbij6ji/+sNy8xZdU++pydBqXmIg==","shasum":"6820ec6570fca38e6b9b68a2ac2648560a1cb426","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.11-alpha-card-border-5673.1.3.tgz","fileCount":22,"unpackedSize":54976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOXyYCRA9TVsSAnZWagAASqAQAI5nOLK7KVkaInftRKGF\nmNGFCzzfdV+yLZS8molACU3cOfZfaWP0s9TluGEqyyz7/AfKD3WHhTN1Iwls\n/YjHI1mGK9k5tRYnH2c6KbJHfQAiXykY1c0WbXknxkrKCutgEKLvHCDAc1jo\nyktLN5YVwn2nCL3eOLeHWmzKv4T2ThNBN+z1vDKKjMiIkz37968Xdp79uHFg\njMINjuukOhkq46ggcTKYsrkrT39E4xYZDW22q8KJtLdDc35t5JKBcR/Ur+fK\n+MctRAs/6wqUW+Zn+9s/khcXOkgPiC6GAeFsmqX4+Esn0Y12yhOfUzxWPoGK\nM+sZlgH1+2rTvbm2cu26zGidU+DfMyIVGNLNaSHaIqjPMwfmTNhkS83J+FBq\ncYHTBPe9JsltR1bc8aJkDr29JuemcE+h+RrnBS5KyJgPDpsT9usT+yvUm5Nd\nNIwB2CBFLjfxQV87d+BnFk0+9MC6AwKC72aiMUDD7B4ZhSgGULa5f7FsBdxI\nQ35Exw7CkIh1WHGEcJB5eK2pTrA5e5q0gXXkBly80ocGOtGJOw6OAIwynx0Q\nvdm1HEK5TVJXlzB+lx/N1YuY9Rwcb5C93y0di7ldgfIuNZy/Mtz/EAuXD1cv\naByCtUsqL3V6y2Iy9OjUKIa71xuy5WdeRPL8EzmEUComKZ0hfnECJTKAuGKt\nJyVR\r\n=oO9K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGueQdxX3CIOaBQkO6HEbYP2n/oMz3w8fZd6jmTTz1MMAiEA1HyLNS/RJcsKzHzdbvP/38nNXSBdoaQUI5ADimkNEm0="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.11-alpha-card-border-5673.1.3_1580825752479_0.8094294796211254"},"_hasShrinkwrap":false},"2.1.11":{"name":"@crave/farmblocks-sidenav","version":"2.1.11","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.12.0","styled-components":"^4.3.2"},"dependencies":{"@crave/farmblocks-icon":"^0.5.0","@crave/farmblocks-image":"^3.2.2","@crave/farmblocks-input-radio":"^3.5.5","@crave/farmblocks-modal":"^3.1.9","@crave/farmblocks-text":"^3.6.1","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.2"},"devDependencies":{"react-responsive":"^8.0.1","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"bb3f171a3b5b9fcecba102f5c5529ac1334537f8","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.11","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.19.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-F5C0nAf1qHwnRxJF9B7uwyPI4gKssVp8BwuA0v81MfRNPnD/mEXUjUJvahyqllAMBu0sFbQXHjekrhWIaKpAdA==","shasum":"a4ae3cc010507fcf70cb037259b2b9d17a694179","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.11.tgz","fileCount":22,"unpackedSize":54974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOahmCRA9TVsSAnZWagAAq2kP+QE3racpFfxViBKCFZsb\ntCglH2t6jvhe2K9wNkURpSoSMVGbxbHDhMhPbtXnKpzSnMMut7Rja60fwheu\n5YnkG5Ixw1uAh4BHsjWxGtytKM1g5NOLJ55V9Z23jPPdjRX8UR9yBAxKOidX\nMGMcRm43gAPS06Ogcas5ET2Pq/ea/p9oS3A7VQ96SQhmBdwC0gLUEhiVzd3Y\nqocmbZxLTM+/+VpciyzWXLzfQXbch62kMeX4wYj4aoZZnNHL56Ky6TqtgVUf\nj1lov2fkZIuldowbLXbUNed108WOlV+iHkZenhrI01dVT9zHn7bJ67nvUw3x\nJEcAKEsVJqoy4JvF+L5tfPpq/lJffh50OqLCzScFiKS4/3JIBqcs6jOH6HO0\nx3D5MBQj5UHREWUIHdX3kQJaWN8mYhvOcnpTxzyOi14vzmxRODb2DoQ3q3CS\nRfVdLMaRPFhcmqSfPpvE+mN4hf5hi/BKckUS+UuupU6G4rJtL08rT4uKIH7R\nT14TOm9KvZejpQ28CsZxa/IGDe/6cNANDHMTak9Ecx56vEzDq4cyIFdciZdL\nwS550LWlW+PHVmE7MCgAzeRcsCIEu3dArUYHDvM4ZG7hQ9tJ5hXhlxfAwxXX\n1hB0f0ZTFEgiQP749QsNfFa2+Bv0UnZPUdo6feu+KBa+edoDWcyu8XxVKOCX\nnQNh\r\n=im1U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDExE5/Pu1E/xFn6dr1dg4YOBTFHyMXjqhHzEX0KGW6+AiEA0/21wLbiMYC3EltXTO06Uaq5YYlJtlieXd/W597Zk/M="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.11_1580836966060_0.7366535825978513"},"_hasShrinkwrap":false},"2.1.12-alpha-upd-dep-280220-5690.1.28":{"name":"@crave/farmblocks-sidenav","version":"2.1.12-alpha-upd-dep-280220-5690.1.28","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.5.1-alpha-upd-dep-280220-5690.1.46+a8cea52a","@crave/farmblocks-image":"^3.2.3-alpha-upd-dep-280220-5690.1.28+a8cea52a","@crave/farmblocks-input-radio":"^3.5.6-alpha-upd-dep-280220-5690.1.28+a8cea52a","@crave/farmblocks-modal":"^3.1.10-alpha-upd-dep-280220-5690.1.28+a8cea52a","@crave/farmblocks-text":"^3.6.2-alpha-upd-dep-280220-5690.1.28+a8cea52a","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"a8cea52aabb860ab7cb09fc73c87568bdf11ccde","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.12-alpha-upd-dep-280220-5690.1.28","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-YVIlY06uAueTgZ1tcbz88bXU06641kc9TMGXfUFvgNd9da9QlqBjSYTJ/qxY74S0xcsVNx1InDW6ZjvUhWEr4g==","shasum":"ce6d430a2b4f0d2be5dd36eeaed07a340f5f3f99","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.12-alpha-upd-dep-280220-5690.1.28.tgz","fileCount":22,"unpackedSize":55350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVmjCRA9TVsSAnZWagAAhhMQAJtVPuBLEG3aeKPvedGm\nJ3vBXGfX4ME0R/J/9nljuQAPYBEaK9qtZIT9rHq1rM53gAVaSPqBxPjM2vhU\ngN24r/BhROjoZH6Lm94acj26CCuOtnxO5Clk8HAZ48WVXJq0rufDyBXvysSU\nmNv1eWNwiK1S3gY0ciTinaMMhwuRWvZwKyW7GTl0DpkwvBa/RfKtB/54/EL1\npP4siasiA7XO1+/MaO7Az1FHoWzpRWt3Nq0cFs5/bGsHs2nkMvVma6mqI6EA\nGAbamZWhtxij1Wpr/F0rvNdMQ7LB1gPZmLnf00RnTZGJGSlJyy7xQcwNpMCT\ns9jB+ihb8dEfhpw50QkLNS0hMGql/BEyB3E/6qRzMTIGT0xF44erGoAkaubb\na3vVZZCYB77nxgb1lm28DfDdyt2OXgPAVPxzjkFdZwmHJ4I0fa1FVSI3SryW\n+neCoCTN/voX3zF+k6j3mYetkwO4hUM5MjYtJGZvmga4+0fH0OHwPbTLWx67\nYZau1y71wp9pIwGQHsj4uu6Cv1sOt2VLrz5+Lltl8yTQuYkyc4rYVh0d5qaV\n32dxR2Pp2ojNhhRqJT7i7Jn1d7ZlAPS6lMc586nMfRo+aWOe6UPjpm6PFl7G\nV1iBcvHZZY/ECjo2BFafjBo7vLCx+pG1ni8CNI4xiK9QkFHnft+lQrTOy8nj\nwSfm\r\n=RFqQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFE7+Cbu5xd6JDdylxoX65WjdDl7EGyh/39ZW/ShCAnMAiBsvT/mJ1CR3PaT6BCWLcM61TTRxftNTKwvppzmBCpBWg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.12-alpha-upd-dep-280220-5690.1.28_1583438243534_0.25728289525079173"},"_hasShrinkwrap":false},"2.1.12":{"name":"@crave/farmblocks-sidenav","version":"2.1.12","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.5.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.10","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"6f23e8cd16a268a0f14d582e9880bc591d758995","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.12","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-DJcwFjaUr4WD66vAE6MCVfO5rTGA+lyhSEJqp0Q6PXRsqeB69aaKSOPIZX92KOvbrIwpl3TKBKMYm3BTfpfhpw==","shasum":"b433806782ca934823824f9c42c3a21945ca8a57","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.12.tgz","fileCount":22,"unpackedSize":55324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYm6aCRA9TVsSAnZWagAA3p8QAJekC+wN2Qf6YVyQtCD1\nz3DR1QDqpCEVCez5MPIif5X6LickgrbaIikb17Qb/GNnn4BpS3/0WHe5Az2+\npJFpn5QgXje7LwaCP3jVafOyfdxiZSR97+piMVa+x8S8kCQ/03diKVnOn6JP\nxcyu7pZP72p4pP4FXia3MZIHoYUMoXx1ZxhQePNrl8Ro4cWgXQJO/yOoOYAr\n47m+hpJJbP9ieIGP3p9FHzXn28EurKSTzZ4PMQ1KMaB7lXqgJ64ZaD9aFO7u\nHe+cIYg4OdS6z89a4u1zpJ/zPjDnlNJoqosjHqRk0eNw9WMXek+NUDIS9ktU\nV5/aExT/a09O4UFHBXvE9xclJGjNCNAGqOAg2e4acWu7GnT0mAqKupyn0Xd2\nDMBB53pY4ZaOg5OfsVa/85H0r5anxJH8XmY4qck9JlvQRmzL+DvlBQ+xKZll\nYXTp1eYLn/RmzOzaTClg9PUQ5ajvIoDyuXzK+nuNsfOQQ7TKsrzblM4d4iZb\nHJf4RYemNxTpymjKcnCfJB66D0kpr+9o8fOgQyc2BI+QyhKVCVyVzf5+fIAq\nSSKHizAsipB7ZS1LLY+X2sXYg4xAv2YATzRTGkeUPwViNnB9wg1yuTo0CC5r\nkSalDOf+cFZPM12qztkxPzg2Bm6g9L+uOWoDPOFQckY1ApdBad5Yk4sMQDHf\nirbi\r\n=+Kda\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGn9jFTZNW8w25sz1wTu88NYxa8eFPj0ra/BXSI3tC9bAiBUs4AREdJeDPLIvPYEoVUMcIlweIpMBOhzN48dLm8XlQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.12_1583509145756_0.8507986438550246"},"_hasShrinkwrap":false},"2.1.13":{"name":"@crave/farmblocks-sidenav","version":"2.1.13","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.0","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.11","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"06d6db2af409b4d1c42e1c3a038aa5bdc9fc5654","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.13","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-sLhVDHXK/6GQ3Cb8sxntpHbXVZvGk4Z7T9efPbh7Wo7fd1GipPxpuZtlqDrwo+2eCbLRaBjvIRha30NxDq7yXA==","shasum":"b361391156fd40d19b1d24fa1a651fccd9d81e54","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.13.tgz","fileCount":22,"unpackedSize":55538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevDqUCRA9TVsSAnZWagAA/NQQAIOvN6dcgcsp7tTbs1QT\nV+i4On/UkU0U5c0/0SL2yfJgjt1ZQusW0lk9MJWrUzmUdjYJ2nlhnoOjnYKd\nmD0Oy01KzrLACrbK//sykVZxLxgW+5OMbkszZqOvIKy/ndmzJR5mUAdhKqwV\nBV7o5i1KBuoi5i4WotsRsrUq+sB0SDkclcAWFBwOJhfVSJWaFamo6bSe/JFg\noFti6ixvhM+EQWw0VDoWVumUy8FbsLy8kkHROsxTE7A7sqhDSyVmhFqanMcx\nzYybMOvW4GJNus57cFTONLcvQztcHcCPHOfUt2MnYyKK6ZzeRavz3QiVxMVD\nrsmUdotgRyZZ5wqFo7zdxhW05+LVH61HKu+eEJq4WPtxDin1ifT7R2h+SyhB\nMltv4UuKieV6dO/j8p4lc+1mGWLafLFs0ER+MqQIbWlHHZ4Jk9EiYfuMclEh\npbfMtQvXG2a1r1fn8OjSlEtIJR98LKJojoTUNSZJuhbVRTlkRu5AqJYeAyGb\nd6nyzXKs8wpwtbifzMDsh5ui3aw0ZI7U8lk5ag/b0/5ZVsyaH/xmBaIDYZ5c\n8DPp5xCx+uC7EvN7ACykL/5ZhMLfr+lMyBBLvIOmEETqdbufNaRbYTrbDQc5\nLEFE/UIzi0HbREfQguTm+vklFUa7kdNswJpayS46iwzuQv7P4OX7efzRJmXX\nPehG\r\n=3IxT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7CQ8jiN61Dw4KrsreBxMq5WnFcw3LkX+CL9Ogp9XzQAiAw4JKYNTkWIPqAGOaqgSZa2ssQqRPNsKqeP9MZ2rhb1Q=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.13_1589394067676_0.5151586828553125"},"_hasShrinkwrap":false},"2.1.14":{"name":"@crave/farmblocks-sidenav","version":"2.1.14","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.12","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"f53cbec934d2c236ef9e41ce2e51d2bdf37e2914","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.14","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-7nSIth9vfLMhwBq1di3T/j7tjqZcuUsxW9xbUhSwE3ERMU3nsx4fJcnsiVO6i24Pr2373/wzizYBQFW68gx6YQ==","shasum":"0e27a32d8875e7abd59670a4b901fefccca5f8da","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.14.tgz","fileCount":22,"unpackedSize":55752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVZhCRA9TVsSAnZWagAArwkP/2jg6Yq9YuZT3UbvlkM4\nKFr+2GN7pHeO704eIQQ2SH/J3sjBHqBpH5gfJbQWYASQ7tFSz65gBzSiCjCf\nNdqJuJIJw2hJ4NwD70tvHLLWJrx4PhY3ZA6+wf7jXcuhU5GPeyvC3cwlsx3H\n0KFr10U8+fnvURT4zmBDPeADOyWzcFGES3xJDkazVLBqfcJQ4fwhmS1jFuwS\nQv+Xweat0HS7GxOwmJQbLQamZU5dbVZURolB3zOKjiv4rhjH9zwL7IQwTwIL\nRWWB/mwoUFJpe2q9yEtpG3ivWnltxQ+WArM6LmE2P4IxGnP8U2I/2a1c1G06\nb8yO1CV3clrVOg2WLlQjt9LZHwPBj6cMyFlKd0afB/2BejvPzL6QpKkLw3lw\nzZNjTnnHpfc9nSKK9EHNYwlf1ad3LuX+k1tGuEQJIt+lyQKXs/GKdFKg1IOU\new5g2AyYmyBDKzyonsOtPS0tPT/rVNQNerLBgIzYqnevolM8tkG18LnGtaNC\n+y4qJHKMvYk0AMFdylQPCdaZVOV5yGvHNAzNUjtlcPx1hCEcNlmkPrWDwz3s\nqvw/wBmxCs5tG97YI1nvfylK0S2SaBrjpqngjqlA6OhGV5HQ6JwtfFp+taWb\nF8PiOvVOT2uhaoU1S5MohlXDt6Rh/aANIfWFzOgpTbHpSUoy9r0sOle7id8E\nkjD3\r\n=SG0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6pzc3jeSPFcP9ux9m+fnqRK8B2+uL3EpaMz7yVaZk8gIgP/izMRhPHHcdoHfDmiREAP5lIWN26EpUwiPgXp3uEEY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.14_1589466720651_0.8342376802993867"},"_hasShrinkwrap":false},"2.1.15-alpha-new-label-5742.1.5":{"name":"@crave/farmblocks-sidenav","version":"2.1.15-alpha-new-label-5742.1.5","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.13-alpha-new-label-5742.1.5+868553f6","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"868553f65440a9c443059bc2eb14ea8d033c4fdb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.15-alpha-new-label-5742.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Zapa9lIsOh4ta/l4oa+ZFK5lYJ2OpaJknxZA+NTXcKjzgRgYZ3LNi/7EW1S3Wvc36PpBZTUMsd4NMTSEeSpNcg==","shasum":"cb136c1aebea19263f834ca9997156a4e381e6b4","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.15-alpha-new-label-5742.1.5.tgz","fileCount":22,"unpackedSize":55820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RNJCRA9TVsSAnZWagAAZgQP+wZUYLhZSduG7C5k/dLV\npR5QYqmNRb7P5PGNxWTqua7vRdll9e8GE5Ix9hSzLavjdIJnixwNNmVE+CMz\nMo7IjpgJMTvQUTmHE2ak6xp15y3gUKMFv4XqQ/gvrxAf+U6c7elgzcwk1X4s\nfx7UPnOt5F6c4R9Ln1bgPVYe0YqkSb5CMW2DWoBnYHmZyyYMB/g1UIcRmob+\n7pUviDAfyvLA0VzdmHvhecj/J1EMzXIkXLH4//DMAS4mrVJavFb4n/Y3slwH\nwY5o2UyH8VUNpipJfDgYOI7IfPmypJOiWCCKdgxbohJyhSJm/Qy9EwkmdzKb\nVsv+aA+rkIBQOGeZQiT47mpBmRdUFdgxiLG9ggxKkX/PRDzSCyP97yBEZHuM\ncuOVWJ9I7Sqxvf3DeIMbVOkBZpFgXu3ONaVAKbYHYGt+LCrj2nw13bIn15hQ\n4gSMt8nA2FyZg4szjqXCMnU0F9MGBw3mucobu1kgFZtU6XRPFd89/J26LZJJ\nwYYKztGk0uMFnhSSGK77c80TJyh+en88SUzfVlg0HrW+Ue1JIodGxFNYfsw/\nu5gZLEaHKYu5GZPDigsxMnrOCkUEDbQje0694U4MIGvj4iFffZg2ygdD9oXG\np1B/metZHRJk6cBGHYZ8dFKKwbjUC6ZeyBIMZztT+aPFrN3DceHJMhwHiJjM\nWnUk\r\n=fCfo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2fBIWTCQyGavn9vJ+1OMVoSMDgKygfB/yUzbW+rcnvAiEA9O4181SfVJAM2/ILlkWmrX6bZWGBMq7L/LZMJZGw5g0="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.15-alpha-new-label-5742.1.5_1592595273244_0.01394234350762602"},"_hasShrinkwrap":false},"2.1.15-alpha-redesign-form-fields-5751.1.9":{"name":"@crave/farmblocks-sidenav","version":"2.1.15-alpha-redesign-form-fields-5751.1.9","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.13-alpha-redesign-form-fields-5751.1.9+460347c0","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"460347c067a56a7bd7f316c45b5fa96edb5ede83","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.15-alpha-redesign-form-fields-5751.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-XayyLPDC+IuiN4R8VrgIDk87QIPQbU+jTaoMxdgnhivFXQ0Caan8Wm3ZF/mnojyPju3ZLOKLHbCLGG9zgMLgRg==","shasum":"0ad277e639acc7a7b8aec6129a714cd1ea3fb42c","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.15-alpha-redesign-form-fields-5751.1.9.tgz","fileCount":22,"unpackedSize":55842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8g2XCRA9TVsSAnZWagAATogP+wbu3A+LQsHqS5WFLFrL\nDwyjoVP0RhR06HyZR7PhTqodWrDdRdjYVPoy9mqclN2LkQ/FVYPu2fYPss+z\nCNRMqHXxQb7eMxm+9i+rSTx/Y3uwiqToyXhqfRzhOUqWzBuMjMFN1yPj9iei\nFpZooDVzxod+asKKw2nBPGNfeZAbeC3AosAzbP4cLPDmLdQQ/l3huemd3n/7\nbtnqg0BV9wXLU3jCljvt8IatIErIWoRP9EuiXc6ysrc3TdTZMURtgnS1moFN\nk/3eUCONJSw6IdA0D5pWJ0mesGserSbhG0/7Sh+P3wpPXo7xwbNMfPv4qJwE\nqn+mTv1msIzLDjg7j3Ff21PsLwkdkhQbpRSaUT24eNRGCBa6PU1PGRftWpSh\nbLaIkaU1PyoUKiVrF6bSNqGWvT1CknbThRxWDUrszqaSWdlpCDe8iAsJvq0P\nGKhyt40jpsDEhndJOOjv+2BB0rYVI+uOTnd/Pn240l3oaLRM6IwY1Wr5FO38\n+rDS1i8H+i0i2F9EomOI8AcbUFJ3BIVyBOt/NZsaPEKf2btM9hghgtM+8E8o\n4bXmyvdGz1UMNDdy+FtxrlywVUFtrSsPDgPohYyM2firXzTgCLk4H+wIvSg8\nFyGnkg/mD47AfpqUgcKo+bRKapBPsbv+DG2yBI0Q8Zq4Thovhx8ILYa3+386\nWN/D\r\n=nLy2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID8fI7SIX7lRcMrHQEIklSiX6Bm0vBZp5W5YbpdC+KERAiBm0oB7X1pZ4iWAs6QU384WLrutN4OWRNebFd3kKswurQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.15-alpha-redesign-form-fields-5751.1.9_1592921494933_0.1598988033408395"},"_hasShrinkwrap":false},"2.1.15-alpha-redesign-form-fields-5753.1.9":{"name":"@crave/farmblocks-sidenav","version":"2.1.15-alpha-redesign-form-fields-5753.1.9","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.13-alpha-redesign-form-fields-5753.1.9+10dfe5cc","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"10dfe5ccb18dc462ac1834b6b52a31c88bd79167","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.15-alpha-redesign-form-fields-5753.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-dKkIk8hRjDT0PPjYu5DNuKxuzyqILbPW+KK3mh2K5gqxzn6UOnSgr1hqM48CdHQPDC9uTkCXEB/lcIYEKgm7Tg==","shasum":"80d1170130e51e0ee0b478889bc6eee69e3a5a22","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.15-alpha-redesign-form-fields-5753.1.9.tgz","fileCount":22,"unpackedSize":55842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hcZCRA9TVsSAnZWagAAEfsP/2qsvpgIJMxgWJuEvSCi\n31UZcVb/QNWx/6EuJEN66iynrx6X6tuSIf/vt1G5hahongwREvkLCSWS67dF\nWd9xBsAXWbL4Xy1DrXoCLg5Em6s2cLdtJ7sUbzBzHcOV7Mp0UCdhm9vWjx1E\n+TxqMyhfKvwEUwjIEJudumaaCKC/MQhfL3XviCB3P4p4FiQuzKDinrL+Ih+5\n4QlSbA+EsTPW/2VfVFbJhwWzA3CqNZoaI+DINduIF+thBbHWREtkbRYXndjV\nB26OjSQlGl07VOuP2uLeNAqSZzsE6rf0MyzBIfjViDKBVvjdm7KaydmK8nUZ\nbpLei0VFWISMKd8f9eKvt0Oqa4Azk0YcOF+nViO6d+qfCx3I1tuXqqZhW6SU\nPEPmYdseA2y9Pfn9WdsbWPEgxGqWSAjoejPKlO8MC8ALXSyZpc8ZHNStUyAj\nJ3H9yU4c1ssk0CoLAenEUrEslHsUxyFmMv8JCBgMK21YoeZm9PorcGmvdnIL\nPMsyGasBV6ZDuhpP+KHKmI+BJ4MizhC9OjP7mKfiN0kXgFaYTgGMwH4Mxj3O\nUAM9uZE8MwKgbMaJsFJupIOb1YWrcaP+e/yJiuZ75CG5tQWPW2CfOJSpQn0h\n/TYRXi9HsTXHSNT74+GG3cHS9g0RZ/fANmf3KJbJgWXHmc13BczBWtgG6XT+\nZAIv\r\n=INdi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAofg6Zrafa4RAROU0uj3EhgQsvKYQONpyfBbY4kL+4AAiEAl3m9mFwYyL+Spga4jBKTVizghXa29n4Ema52OlfLyuc="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.15-alpha-redesign-form-fields-5753.1.9_1592923929091_0.23599558885223582"},"_hasShrinkwrap":false},"2.1.15-alpha-new-label-5765.1.5":{"name":"@crave/farmblocks-sidenav","version":"2.1.15-alpha-new-label-5765.1.5","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.13-alpha-new-label-5765.1.5+17a98f6f","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"17a98f6fca5cbf7510f25f734e2d9310344f8d78","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.15-alpha-new-label-5765.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-rIc5EWwZFo++nxZquhKosyv6NqoO9EkTdW2borIxko10GCiWlNHRkejR32qe9mxoOaj4doP9ZGqnTBU2qXBSqw==","shasum":"c97ff699c98b7b207b68972c3e939bb79e117c40","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.15-alpha-new-label-5765.1.5.tgz","fileCount":22,"unpackedSize":55820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9JqGCRA9TVsSAnZWagAAnGwP/Rv0tfibwlmdZeC/7Q7z\njPYkcFKsidsxfthH2OkP9Ev9NPLETaTddS4MnOk2Dq9Wvk53a02KslI5CTcC\nP/n8mg9XHVJ3xcgH9tyf3X7e4lFt8cOQEw3RzECEAVqIL4ZKBFSAeWtlSYv+\nyfdPSnNgfgtArjw8WUupwpoRfCCybgcRVf0Hy5py4EG8t5StYWERAG4ZfDIs\ngi4Gvx+nAjINFuFLzpQAa9O9Wk+GmtGzcPDvx21mY7frMUFcPZtgApAkYqKM\nYandWap9Ch+sQJBrHWf+0zNBiumBg57c9vA9hdjVCnMv4OcQmFROC4gZSM5B\n3XwBSuNdOaiAIVfFq+oEHAOKsN3knQ/oXZLJHmP4QCxZuaO8J3tc9nKrWdzh\n4BhvJafcopWkrSjw5V7ehikRYHoiG85DqT6Qy0g/0BAp9cTr63DJFZyfy/JN\n5N3fyzVU+/Mm8IrXsAhXmOQd51TWslG9aOGKf3/bFps+LfbguqfsNpKTMyWc\ntDO397yokPW8eqbFibeJ2ExeMIjdhW2Ylwxfb/Z47hNsccWPpM4fWweu9IiZ\nlY+TFREtQ+VMGWMfRHZbl4wX2uDrvUkWXWPyyyHk+89KdnTQXcIhqrEe3d/R\n02Fu33ytdyyKtDG3cja3INgrssY9DCrMBWRwKYXGOZtAUM6NWYgf9sCmlHg+\n3uvF\r\n=WJda\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUyVBI6NrtRHs6rILa65Y/dZHo1meDAbc6bBkAwVNClAIgSwVd/FSfARJ5btD+vpx49fhicYx6a5fgdKOPL3johhg="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.15-alpha-new-label-5765.1.5_1593088646530_0.5128961337418276"},"_hasShrinkwrap":false},"2.1.15":{"name":"@crave/farmblocks-sidenav","version":"2.1.15","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.13","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"900495453780bf6dabe00c745a05f0839c0a7b54","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.15","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-tIXzneC/iaMQxftZWPrUaJPZKsx70sb4ze1D+vJXQHRasUH7zvxwQea2PfUWFJO5AHHk423POl4eFJJkXk9wJg==","shasum":"15cb609785be06301fcc7decca31a0b7e3d3a60b","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.15.tgz","fileCount":22,"unpackedSize":55966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9MhVCRA9TVsSAnZWagAAEt4QAJRpZqO291hwrt7aY2vK\nR5Cug8fau1f2cM40701vGUM1/IRlafFRl9r81BuUmHu9uYUdq8d0URFH01ph\n6fPoelRFf3DJxe+TyKyCK7N3whfD3m8LTnCgwAZrfhbVWue5u+9m7AwkbOYh\ntWwgfB10Lx5pJ/y92CGZl0nrYJ8VeziN9bLGYIs9OVE+08tuPnOk1GWAOOIc\nm6WXtuUCQthlbYCqRFv9u0n8BkvAm8sg64DcWaY9hgycHOMYkPK7WOE9hr7G\n6V5xs4TuyzD0usf4abUoqwnwR8B4B/4pvMbGGuK0S/JVDWensNUiUVjMV5q0\nkH6JvKNkZ1g+7wjqYMDGdAT9kJoXILGW043UcYpDiDD8ndMmjYAczDXkHLos\nxLtnN2wMt+aDPVYIOdYmRDjyIYio0t+WHbvtu/9qatayAMieIzCk19BUKF1j\nnGBJAnKaJ7FJYHaOpuaC0mR7k8caPXg7QHVvCcl2chY9ZcQCZmTmKi/BBKZL\nO3cdJJff5ahplFvdyZ3KZX5abtFS28VG08vB/lbDwCc9xFf2I6wMfQlq4PsZ\nypAtL11WnpRSw3OkXBZ8df6Y2Af36Iq3cR+t8O63f2/ZAZX1wuz8XkjWl6D5\nGNuIbV9aoNyfTRlYXlu7dS8AaeI7YNYIBOSd/YVfVoLXCizWXjUfeMJot11U\n1vJ9\r\n=sVfc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2VH1XG0C0Do/Fl76JJwf6TE2k2/23DBIwoed+gqSdBAiB9pqTrQhNL0wT5O6dFNe9Yjqah/RLMFwaR2OJnI2ywQw=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.15_1593100373041_0.8479199738421694"},"_hasShrinkwrap":false},"2.1.15-alpha-redesign-form-fields-5772.1.8":{"name":"@crave/farmblocks-sidenav","version":"2.1.15-alpha-redesign-form-fields-5772.1.8","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.13-alpha-redesign-form-fields-5772.1.8+c522bb30","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"c522bb3090eae71437fc84d99184b006288bfa06","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.15-alpha-redesign-form-fields-5772.1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-BQ2CEVJB7kuPYeneKlhzzr1VbSK3kJfshNqbTBflE+/mxrSmTquAEos9b1mBw1lFKcwVsaRK9nL8eA29TnxAgw==","shasum":"6b957cb0f951879b52370bf873d658d27f859b7b","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.15-alpha-redesign-form-fields-5772.1.8.tgz","fileCount":22,"unpackedSize":55842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9NBtCRA9TVsSAnZWagAArbkP/RHT9zY5guCmTxLwu6ZS\nL0rCMIt3HCh9OwjrMhD59guM/x50MevyiN+/2Q0Q0+9+L8Pxjv3NulG+Ip86\ngQz+CPIO3Jq11q6XyiDiKAW93XSvtccngkzhwMntfptxPiLFoq7TTjxHgqIi\nJrW3iiWFP+cZLU49jkXVP4mIKFV0lpmmQuj7s77wCzNyQi7F5A9NPFa3rW0u\naxOBB/syG0+ZQiTWvMJnUiNPlCQtSAShGf1GMI8Rg6GXI6qbg8Azszurm854\n6MNxgTQGsGx0iblw+Cagv6Re8IUXzt9gSgyrs6o00vKwMfaKCynUpoIaWz4a\n8MjWzO28yKOkKbzQizASAGPC8OTwj98/7ahYapUbsSkyq/cnlJd9w5GvdtHM\nMYX1iysfR9xFJO6J7ZDTLQKnd/9+KKbNOIxuP+WMScMys5zTNLQjekv8w9QA\nbgwejU0vadf2HutWJy+EPoFMP4CiKv2QwluZydZzTZHiBwssYiwEsXfQ8B/q\nA8PjfE34nGUJmzpu1YPSff6pckTeAwdL5v8VFSSpqzKtq2zuoFAppCyjFw3P\nvH4KIdvF/zdNwGw9Uf4/iF8SJ8jAmJGaFGlYc5dYL4lw23YNRtAbUWs3fGf+\nG5F7EGD/2SgLNh01anzfnaxojOXv7oWO8C9qFIPx+5HG8wZqESHuvoRRV5p1\nRjDT\r\n=vOH6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvUUe7Yq6MVdwlvk5miCm0CUIi6mJHtep1YnmIP67TtAiEAqKCaJ1joeNmIcjSL4AXheOrZoJZK2cGjkl9i6zPQBBo="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.15-alpha-redesign-form-fields-5772.1.8_1593102445374_0.4849078842319916"},"_hasShrinkwrap":false},"2.1.16-alpha-redesign-form-fields-5774.1.4":{"name":"@crave/farmblocks-sidenav","version":"2.1.16-alpha-redesign-form-fields-5774.1.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.14-alpha-redesign-form-fields-5774.1.4+c0a0dfc0","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"c0a0dfc0987d8ce29815780d78fc283480e297df","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.16-alpha-redesign-form-fields-5774.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Afy4P5ucnqxU5B0bRqmhIbdWx7KFHaM3m6tbqsq9b2R7EZ8rVz6cPwiZbGDAYSijhU29RmA8IzM75tVYh03NhA==","shasum":"6f41a8853e500caf14577470f71c4525ef623079","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.16-alpha-redesign-form-fields-5774.1.4.tgz","fileCount":22,"unpackedSize":56056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9NFxCRA9TVsSAnZWagAAzeMP/izLsHq398ebxVMhJJTV\nEhJmYBa4XRFDcuI3twD+g37jUzsymjPx7yMbKs31sbpRDrhxCsNAUapfXdeE\ndeHp1fBBfwUm9yA69zzzFQQZWb7QlzM5t7FpOfMGj+NZWM8RVSxSOS+xN1F0\ny+desDb8RNqJKMHqB6/2xdm9ZYgPnI7CxhauRbHkD4pmhc2plmZAM2akt/9S\nhWJol4Am7zsFExzFYjYTvhtHSVcjDb+1epbPqlgZB4Pil+zSCjEeF+32LBWW\nOX+InSZuzYv2ucgyFUUWVNe94M0PozmkeU76hhqDoU/H85KJHEWZJqwkiVHZ\ncht/F2b0SZ7Ky88sGU17NgrBuJMWQKYN/IJz5oxTtTtuWPWK/JMq5GI8VaFq\nahANw7hZ8AsT6inBg45rF4H6j9PZMJZ7GaatNjjL16mXA7drh/eBl4JDpJdn\nh+T7EGiEjnFShGZB3Ca5fd5lOiv1gn5cAN59qjyzgam0P1qLJQn2a/tKOToY\nRZaRvtoCNYjsD7zL4Lfy/LSdbVGhsavi0rmbPrvvgSHhRPBWz9w9arByBpbc\nDVG31/a388WlzK7VT41552pm+C0zQxc3pSI0c7ZkN0vZ+AyEphiL9ekfYuRU\nbnhcbwdLHAC1GMachEp1oZd9I0AVAz6iKnw4VygQhhrBBDjAbTLXmQef3TRT\nQYCG\r\n=feKN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQ9s79aXSWeJlOxx9+9KsHcU3sciTMOnaDgdwlDvw01AiEA8rBIDZFU3DFxRA3SCkFkJZ/0EdvHdAmhdXwn1N8CZa4="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.16-alpha-redesign-form-fields-5774.1.4_1593102704871_0.8491472696204239"},"_hasShrinkwrap":false},"2.1.16-alpha-redesign-form-fields-5775.1.6":{"name":"@crave/farmblocks-sidenav","version":"2.1.16-alpha-redesign-form-fields-5775.1.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.14-alpha-redesign-form-fields-5775.1.6+4fcbb59c","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"4fcbb59c5ad9d1844f18b102efa792f409ed61d5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.16-alpha-redesign-form-fields-5775.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-eiIxLc9dtrsmGlMEuwI74ScZw/6GG8D8/tFOKCYmxjaIr3Nhr2Up5BO+f99wEJp5Cb02a8FGcUAa5M4LLeHY6A==","shasum":"66f9e137ee33dbf9c82fbfdeb0e0973e5394cb95","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.16-alpha-redesign-form-fields-5775.1.6.tgz","fileCount":22,"unpackedSize":56056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9NNBCRA9TVsSAnZWagAA1qUP/04wqN5Sz2yucX7grZfM\n2N1txH8ltq00I3XDeN8m3vrpTr/2O3nSfzPnuBMlkwaqRir2et4Fggkngwi+\njrW7Uv4rSPn1PXs0Q/fxQe7C8miYZFxicNWwyRAiG2XelzOaRPLauGJWVQaB\nwGQVq6I95KlGO7J5Ienz/Rl++9glOPx0UZRDYUfS1EC/FPSO8D5UlY+5zbGs\nxvAkWMqyHKy84rFkedBeH2jdQpexmFb9YtgPcAnZW6M22bgdo76zIjhxe8h0\niPZJCLqLmRmKHV5Ys6fpyEk5yFTqNbbEduMeci9dW67K1YXEt43Xu4P6kZjI\nrhFfg4aBhTouxBEXnxxQAVvNnJ4ZDXy0I/qDZVMZMxkVuXyBGi9AUC3e94Nz\npTNreBn5j6/nddau8hLU9blpiAYsi2/EYrO8g53R4Ij0fJ/00ebxFUM9xyDS\nUt5KaXjiTq7ghMg7dhTnW4DC+hll38FBDWk9Lamd7y2I5Vihbpknc1cqqvMp\nXKGtSmGlky31LmYrhHjih4D57d7mdADob1iKzI5dQhWtQMymoejHEc1ZErOG\n/AQ7GnTNmyvTKVULhCWHKrUjfTtTPRpnaiWO6NK9S00KpAjvuINyoSy+7j7u\ncHcGwLsX4XzMdH+f9xkD3CTYXMeWrMxCqSI6N++ky0VCsopRAAt9NUjxZv7L\nbeHd\r\n=gGvq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJId+4SJxrcCgZ0fQlcPpMu9LZKqwLOMAfGLO/x+1BewIgcb8SO9uHs/13ZR0gzaVDhmYxgA+ohM/n6d8gQKvGUeo="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.16-alpha-redesign-form-fields-5775.1.6_1593103169562_0.3150678436529588"},"_hasShrinkwrap":false},"2.1.16-alpha-redesign-form-fields-5777.1.6":{"name":"@crave/farmblocks-sidenav","version":"2.1.16-alpha-redesign-form-fields-5777.1.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.14-alpha-redesign-form-fields-5777.1.6+49c322e7","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"49c322e77dd1c883b4ef795fedbfb875750e861c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.16-alpha-redesign-form-fields-5777.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-RwH/HcOS171KSA/kI/cEHM9Dov5owA+Jy9IE6IDO+46Y4TfZjGfWEqjX/CUe47e8ok4MDqN0ehF7FPCGs/TYRQ==","shasum":"12c2efdcf087535385c1e582ad6a5d68bd5f795f","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.16-alpha-redesign-form-fields-5777.1.6.tgz","fileCount":22,"unpackedSize":56056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9NXjCRA9TVsSAnZWagAAJSkP/jFwYj4a7CU5RznmC91p\nLWZ5UcoK23ZbO+ZMI4WxsH49SlAlpYW7bLRVm664JZ+pVnNDvSM2OdtqbEiJ\n+eJxr0qlezl9dk3MvzICXknJJPWw4Pay0RURZsSS7u1loQ5nV4DLd4uwCU9m\ns19g5L4rMtGbdl40APjtI0KyDLDOi96j84IhW+iFIS6IP5CLWI2wVRrUTlXr\nXk0NCpxTzjcqBiGWzE3TdQ5zEm4fT6DPQUcNB9fnincNW+a0zVv428GV0WFZ\naQXImjsFmRmaTwryrITeayFwt/7m8g9mycUX13sto9NCKPrmuHLvAGQn5nUH\nLV09TkOnZrRjJUObEIUBDFUniA1CtHmebJzZ2m1cVpmWZvBNkjfLkRl0DyZp\nLdyPbmh6B5hua1AnI3GMeMktoE8vWWuJLZuznnXV5Q7J5RCJlAPzCk/e2/zZ\nmn3ksNBmVQ6bWpixmHOnPEkgH7K2dCbkzCzEwG/zRiR8yKlmqFpgSBwioLb5\n/h6f0yRwNdRumrSHpayBepSWPQEPLOjZ6ZNdiICEK2upJPwD7rSCDrXD8nzS\nyrm3MtJkmVtfh0bH5za9eM9NwBNt1dGrXFI57A5lJ/xST9wzpHonR7MHfrPP\ncWpXKZyel8+xUE2Zm3y7E4j0fZXjMObiVbiQ/PPg6xOoA6Kw16W11BVd7mlX\n374L\r\n=um2q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWbqzMj+I/Jk7yG6/qVgeRxIO2kJxFiVkAQR96FT909AIhAM5/QrCAYYZXIFn3QQ92mi7wcfDauOasEk36ZanMOBNN"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.16-alpha-redesign-form-fields-5777.1.6_1593103843045_0.09060981990541284"},"_hasShrinkwrap":false},"2.1.16-alpha-redesign-form-fields-5789.1.7":{"name":"@crave/farmblocks-sidenav","version":"2.1.16-alpha-redesign-form-fields-5789.1.7","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.14-alpha-redesign-form-fields-5789.1.7+6153dd6c","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"6153dd6c550579eda90f7dbb7495b3b7355cab31","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.16-alpha-redesign-form-fields-5789.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-5EZJ/p89C7v6x3TjrMDaaM/n2CDDJ5KfZI6P95Y5eimXMPuYFzqfHrpjOGN/lC9H69tICxGy2ZEUPJ+QYI8UCw==","shasum":"5aff232ef5f2503801606d075f10edb7084782f5","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.16-alpha-redesign-form-fields-5789.1.7.tgz","fileCount":22,"unpackedSize":56056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+0YeCRA9TVsSAnZWagAAJfUQAKI4u5cbdKwLmsE1D+rw\nEN1bVlcrZCLbyR/lFYsym1E5wCyEbKib+EQNX/hruKGb+B67pucmkbbmN4w5\nBJ5jPRe55sd6NkyFXuyWHjstquEvGJ8xRWUSGL6Ov3c+rN2g77z1binBEa+a\nCjCkYNkxLtwr/7HpCdfznXvuCi7UNry/K0OimwFINQEYxmrReLmSHHiSIThd\n6fTWLf8kUGt+9tkoiAIbS/EWpmi2gJatBQbMDDDdIeIQexgkvC86FR4yZiqJ\nb0DGWeDmI9YSCFjNfbh+5VFWz8qvwegoYkmwIYDZ2NrDT8g0Z1OjnMskOX3f\nsEfQZR1iXc4BpZ8MI9VG0EOw/1DaNEMDzHGe1V861+oApWZm08uJqkXhNb0W\nL0A2i/KID4Lw3N1K8f9nQJ606q5hXYWAFdBjWx5l6AVjRSvgl8Do0LEQcTLb\nTFHnjKON7Ty7fzmFU7MMvdbORESHA47wGKjWjD0k8nT6NIFKsUbaONa0eYft\nsGVUgOXqQPxBzYSzC3dXzMdThQOUgL8vKjEXXVuNO3ouKv25yr9uV0fWdhia\ntNVS1TVhTtXTWA0qwEj8V0hVSp0F4lzyJlsiQ9t1cR1S2UquMGtC3bTEj9qE\nKUAxgtL8Q1hRSYtODSPlP0LBHwaCZ1v1VvavK95wBxuy/5+kQHNmjKPL9GCi\n1sQP\r\n=8AWC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAvLEri/FmwIigM8Imcn11YqCyBT7fcD3SzVZZO6qewwIhAOOuPs5ONEwmTmjDwNiVen5ngFDZhdO6tdQ4LuOsZuuQ"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.16-alpha-redesign-form-fields-5789.1.7_1593525790162_0.5921723970470281"},"_hasShrinkwrap":false},"2.1.16":{"name":"@crave/farmblocks-sidenav","version":"2.1.16","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.1","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.14","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"a63e7c1f90592b684fc83fe6b721c2b5231037d5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.16","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-tn0lNDVC0yVxDA7se4wv5t54ruW/0mC6zBkQ2oBiiu3tVekAWS8EouBfaXPgonpXSr+vyIbsPFrGgTv31oV71Q==","shasum":"9540354fc74d652d6b68b76ddd99b8f66f0b72f8","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.16.tgz","fileCount":22,"unpackedSize":56180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+0f4CRA9TVsSAnZWagAAMfcQAIULU2UHx8FL6AoSeV9r\nEZ5dwtOuSAXp91q+R83lFQfXTUu6orVd9aHTFW7Y7hi6SqV6T/cjkt+ds8il\nsZhXt0HHsh5ZmYP+PKlbdSRtgvZLnt6oCSFVVu8DEmRcv7+0/3/GjIPLJC7d\nXRn12TxYL/c6v6ODpB9v1F6HiYqPuhRuWG4KPGyBPoPGqromDA3JVNTgMDsJ\nXck3/M8s7BJ9vaSQAmtSWeUBm/95jPOVYeFADI0iGMkCIZEp8z0ytRiDxWku\nGc8IsG1G+7LDPl2wMJxCQnL4fYD3hT97B2fbj3CZkLz/zs842zsALVPZ3rUA\nAgC83bDQ9u5113NBmF8ssW4TfOdnSHRX6afQLNp4+mPFpRU7EPqYnhnStUmr\nN7XmvsK1s1AuT43ym0OkRa0s/h88fQKQJdtzM64fN7vrhhr8rgGC1BWAlNx+\nwaG8b1T1eYJZPygvMWRfGMgcJSkioQ3hnufBgMueInJAHqWt/68z4I9pe0nl\nrSh/Yvr6kHak1kkD7QBL6tm0GgMj72OuH/H6ZkZpMBClh46Ya7HDMeGDiqla\nHscO1aFHkFI+ajaXGaY9dEpIFvP8Iyr8YxVwNAo19n0o6gPyEEBtDJUKXSpT\n1KmU1S7TL8x40+Icv7R8PrFSDWb67EprJxzVWUoDkV+ZoFmocwDtbRbHG6IJ\nVkgi\r\n=cm5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCj64p+s/nKKtb1LlHigfMiDA68n/ShLFtolaVRspC06gIhAPd1+x/Snonl02hlwALhW3vZb/1fiAyETh2ekZwbuYPu"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.16_1593526263726_0.6442452615488883"},"_hasShrinkwrap":false},"2.1.17-alpha-dropdown-button-props-5805.1.3":{"name":"@crave/farmblocks-sidenav","version":"2.1.17-alpha-dropdown-button-props-5805.1.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.6.2-alpha-dropdown-button-props-5805.1.15+087d20d5","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.15-alpha-dropdown-button-props-5805.1.3+087d20d5","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"087d20d5ca67da637b28d58fb92e302aa787a58b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.17-alpha-dropdown-button-props-5805.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-+k05Gn3sXMwmVBWRnLX0iFRnTZlX1baJ9jZ5vCjJ+IYF79kRhEKCEWSbtfkIEa3eslco1gc5FsVxAm64lI4YTQ==","shasum":"d29b9abeac6922f4659c97584cef603eff831fc7","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.17-alpha-dropdown-button-props-5805.1.3.tgz","fileCount":22,"unpackedSize":56319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBJO5CRA9TVsSAnZWagAA06YP/RookusEsjlnPHphqCtE\nXHMh3AzZQDRNFnyGIjrsQWpFi3Co25tZ9Sz1EiAg6YIt7JPWdEaMcPTfst/Z\ntCwFdx4YUuytSHEX33EEPFx2/9ny5S/afd3KUFiEofT7kUDdutyXAf3N7YQS\nR35TDhxmv0yuM/VWhJvakcF/LF0WAP/HZfdcXvONT/aWmjSld9TvDrm0cSXO\nV2wSeY9CcEUOt+xIO/jyssd0X5+/DHue4YNpZ6B7Qkov+7yQkax8kdp4oWU2\nnLjySmDNLBQru7OzB18wM72krrzwzrdchwTX2KGdMqdBjCSkzrQYIaViuWNM\n6/VekgEL3G25tfRgdUWdw/pVBv0G6qyA88jWCySqxd9tRiPz4AaMvEhVrRc1\nKXOYH+JmFR70+YGJVNAyqkiZ467Uy0s5inbmcaWdW2ZTgPduu3fHA70UnpK5\nZZ59ubBi1Rzq8iV+nE8w+Dv41dGSvSOfMlRvGL7rBq32wD0IHAu05Usyb2RX\ncAkISZchJMVFZ2BqJT3Byv8lg7WlLxrDoWqyuBDTOEthpJJsVDtTRXydIuGJ\nl1vSP7KARHTggQTc1JSq7SEL0Z8L1+4GjfCILyre52qnH38iDWvLLmyJKa+d\nzATaF3s9+CtHvQo985aYJVCWGPJbT48D1pCIMHCTZ2gURShqAhkVyND9nesT\nlr2q\r\n=0Sk3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhw/GvAmWHOfHrZjI/q7Sajfi4NvajyHvstgT7GH/HrAIhAMSXK5xNTernHP0cffH3TaY6QeOWt6XZoraWFlXckzr7"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.17-alpha-dropdown-button-props-5805.1.3_1594135481338_0.7791448981314013"},"_hasShrinkwrap":false},"2.1.17":{"name":"@crave/farmblocks-sidenav","version":"2.1.17","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.0","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.15","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"29ab4fc429ced210f74af9f5f1c06a8ac3d33af9","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@2.1.17","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-wbT/jWHDuOu4DB5/CjW+clrQN7N0vXqUPQReBk9ZVnKSB/k/E1ISf9WvUOuh40eyrgnbaW3uQBpFmTJ+/kLDkw==","shasum":"7ac92b6ddcaea03063cdb7ca0e9fc10743d33e3a","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.17.tgz","fileCount":22,"unpackedSize":56394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBbDfCRA9TVsSAnZWagAA1H8P/Agbd70XSzDocGUjBmZr\nVGWCNOW+mWuMYg52rMqIXGjvRAE6hj8bklD8c36gwLVIfAhRKh2yxv+RBpQe\nvMdVJFjj6KFJmE3Kmg7547mTJoJ8ce8TPzlzv6NTPlz0GVmiNJvGt7BGeI55\nLpc3BeZYiu0NJB1zS5+/VjDrK8NTXU3dAHegvIlXvZftgkD9yWlvEj0zzYtB\nw+4XKW5fpY9hmUG91145f4DmVinKJ3JwQ+GwcFVo1cwMreE6dA57HLriBiL7\n2Ja/GW486ESUss2BGTIVPUHzdixGJ8yaJXoHtthCu1HQLAuDSaWFTE/B9weY\nhOxFZ0rzY1CW0fI0dKY7N4CvRYHt9JejBM1rbcnSENK3MnxV6D40TOW0t97F\nkMUxgGrMmZCwtRZbweulcjFOAX8ORCoDm8r5aLUr2rJrvqavupB43NC4OLbQ\newsubfd4PF8bHdHL9A9XrwLxq6xqNKMPcgudQ6s4leOVVj5T8OPrC0PY8HZd\nKU4uT5YL8YxjeZvd9XhBQ5umu9//ug/H4QC5q8/ZkmQGLskKVAl78rLroewE\nHlqVE+ZMCv2R6W2QIxj25zOj7UkjwNUu2lRBcQQR7NwRE4p5r1paLbT+9ZE0\n0TUH3kgfSWviGBIqQKLMuRCFRG617HRj8ppYzN2nz8G1pNAVhtsRvaxSNlq7\nRloO\r\n=IdD1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2YYvfY0tZL+VW8waSfJQq3qlmqGmg4hnM2XsfPi22pAiEAwf+R5YfsgG62cYtyT9OEWVKaD2f+4QgBJ3Okj+i72h8="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.17_1594208478726_0.6804667021365689"},"_hasShrinkwrap":false},"2.1.18-alpha-fix-icons-react-import-5808.1.2":{"name":"@crave/farmblocks-sidenav","version":"2.1.18-alpha-fix-icons-react-import-5808.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5808.1.2+0cdbbcaf","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.16-alpha-fix-icons-react-import-5808.1.2+0cdbbcaf","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"0cdbbcaf66b03f65920eec7a6627deecb674d66b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.18-alpha-fix-icons-react-import-5808.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-pc2XcsLPTuYtAMrRqhzRHb7edYYmAkBUTnKwQFJtMvy4pbjNNNxc0lNM+rmVt680ptbkLrjbc9ynsCjleY7Fig==","shasum":"af1081a5d6ceb420cb771e350addfd16e0b2eed0","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.18-alpha-fix-icons-react-import-5808.1.2.tgz","fileCount":22,"unpackedSize":56535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBy/aCRA9TVsSAnZWagAAbeYP/3Sa89RqvkBz87z9QCzH\ngzVTno+S40iOkihMUtH3w5EM0cIEiKQ4WmqTdOs73QcjOnxnrfMqwjR49I4v\n1Gnua4xMsSJTaXeAUS+bbnv/nXwnMBqqOTUiRjl+sfhbR2zlAFhVTvZNzZyk\nKbdg9h4tRdhne1XCQqYupV/fAC8h8BEXyR58yb7mFXfuUCyR0Asf+/mA2Bmm\nyXGPdJ4XzAUtldDd6tribvDQiHQLv9geaagdAhsDVKj19az4w4uYcQQLgPl1\n+4MG+P9YXxVd/UI05NFXFOAhmPc3nSCayUwwiMrOR9F4U4LSBeH4ktRjQTXT\nmrzORQfYcn0J4cdSRDlAgX4zPlb8cmaB9wCQfyOa+NsSMSdSr3mxHbgrTw2Z\nE48S1DaVTeg5nymd3ViAs/OA3aeyyTPMX4EbtcdcFhMrWULw5ivLAw/43Ezo\nbcLBShQ/K39scuO1UB78TiK0hSVznwxef5Q6VjeVapHAQK+JYj19AJDFim34\n9p4g/uL7EvEPYaJxHobyoBlD0cjS+gtjufMORM16rcJjHcKMEKFD7FEY+iVm\nll03rSapf3WGgf68ALSvOMksmgRr4a/Wb/Jw5elyezmRRxDdcuvCZ2DIaS92\nJG85KweLvF8TBQvwd4dFaQgBD2Ix1uztE4Ol4o4gdzGlpexBde1qcAzgjsRv\nHuL9\r\n=qDsU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD0KAPy8Pzb0CSw4yE1h6+6CxiU1xbb79ZTqrkMNr2IgIgJtfWhg2gmBLgnh3Nbj610gHfQjG9cnKBgsEh/FQNDrQ="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.18-alpha-fix-icons-react-import-5808.1.2_1594306521735_0.8417979264502045"},"_hasShrinkwrap":false},"2.1.18-alpha-fix-icons-react-import-5810.1.3":{"name":"@crave/farmblocks-sidenav","version":"2.1.18-alpha-fix-icons-react-import-5810.1.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5810.1.3+9340310d","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.16-alpha-fix-icons-react-import-5810.1.3+9340310d","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"9340310dfa8fe15c8c0b0893fc6dc14cb96f6c67","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.18-alpha-fix-icons-react-import-5810.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-rS1PjlMtGOpmb6a3NE0Z4J0xSa9WMGGkKnGyJJlvIiOwKDieF1cUZ1ThWPaErPbpOe0LNr3+rAr46+S2VsSwmg==","shasum":"5e6acbaff18f9a825d2c498d766128aa6a1856dd","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.18-alpha-fix-icons-react-import-5810.1.3.tgz","fileCount":22,"unpackedSize":56535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB0GLCRA9TVsSAnZWagAASH8QAJL/WYYKMZw+dyLlTAnn\ncbn1pdovwfztStR1Xld+4XFeU+AYzAUJikYg84N63g01gyS9UQRz1M+0Azmd\n+xX1EUkSXn5NZ6Ff8SkArgrwCQISgGHzbVQQrCLxHFc0xvz7Hokln9fysRRn\n1G3pRwwzwOZSI6Iece2Kxu3Z+hCHMoFtZ1euxF9dv+qfEDQoLfeXYGcZBTWX\nzUPgeiAGeSIxuT/62XAs8O4YY2o7CaAHQlUKpuzhQ0MdZXmojzG+3k/8KC3S\nmXvn2uLRgAlVjvsPqsvr+5r2/OY87UB1kz6oFGBSi0rw5KZqH9WLR2Sj6KLp\nTeJOY7iUyGZHcxxB/xUWnvlIdpIBt58ivoanD9okAaH6D8k6D7oEFpl5tJ0w\n9ZdkWTP8ddXmL4OIzYEZ2JtPLSQDFVJuO3GOjDKyMh81sKKH4v0NjuNNiids\nMBSZdYjWp+GrAJ3xQb0dWYZdorD0NHkMNfMgMpfNYjzO/bq8peZXDykj3X9k\nHDi98b/dqDY5Pgpr1Q6wVU6EaKPH0314Uk5ODUL1SKcHXVIp8uTJPqyeQsC1\nkkWbbL8wRyA0hYq5eDw/mLMNIFtcCcZ3IjRanoWdv0hqXbypg0gO8UXj3yIM\nHMZau7+zPHIqzv0In7gYYM7cTYh/80zoEzmghWM/ecLoHH6LZJqvugSABfpR\nTFhy\r\n=tPhm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFFYjt/GWeGNsTTuflrWOja4vmfd1Ic6+m8pJOj7JRTGAiEAkPOnUe3vAD7FODTH2aOspxPLm3Y6FQVvGncVIDiQNfY="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.18-alpha-fix-icons-react-import-5810.1.3_1594311050557_0.010256065655563917"},"_hasShrinkwrap":false},"2.1.18-alpha-fix-icons-react-import-5812.1.4":{"name":"@crave/farmblocks-sidenav","version":"2.1.18-alpha-fix-icons-react-import-5812.1.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5812.1.4+a6b9188c","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.16-alpha-fix-icons-react-import-5812.1.4+a6b9188c","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"a6b9188cc7e45d2be17bc698d73ae301cbb79ec3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.18-alpha-fix-icons-react-import-5812.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-SHb4sifE++g1Rq+YttvUqgPiBL4jQNVtZc0tRCz1dID0DRb38E5OtPM8cFLy2pyWNOMXictSFZKXPNijaJ7k/Q==","shasum":"51d9ea52e5d6df43f8cd01218abe1d2b893ad551","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.18-alpha-fix-icons-react-import-5812.1.4.tgz","fileCount":22,"unpackedSize":56535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB0Q3CRA9TVsSAnZWagAAorsQAIxNzLnZDkNLLIngn6wi\nbl41Oo6j5Ahrc3QZGxR0wCUZaI9ST/b4ddmyH54Z5yHXhFKLlJW8HUJQ5Pfw\nmSIo9gQ9sfqem099Hv0BZxqSDHew352yWKc1dlQC94q9EyQeY1fr+i/ByP4B\nxN5bnQyrwLVlakXVpnXYF4LUcbCkiEtxRhVD+QLMEHoZZpRIte8FN2PWfikY\ncGQJeuc5JemGNBso61hAeStv0RRO5TRuoDzh6zou5JBP0Nba+zhfsXw9vB6t\nVSpkuP5UlXZPykcrvH8hdmQ4gYJefwQX6fWd7IDYcjOyirhvTnl4xT4V36N8\nbnGe5zFyEoKHQ3tADCXLUfOZP8n1AouDIpAZ6S4I0iO5SCaAnaFZYcD8ZiMR\nks2MAH8Mo9w7o3iX1gQLbMF5fDg1D4s4ElA9a9ZD05e/Aidte4XkedM4G3ms\nTw22xZUsXZS26RRTGNtQravneI+WuwEvrHDtdhNgxjuauin3+YMR/Xxm44B4\nVe66UEorMk81NEY2xJKrdVM7pygpMfGclWF6FcPdq6X+Elh6EN5QHZ1D/G3s\nqJ2fx+ATGXbc/3QTVmtAVGeYNe8uE8Z/exB3MbrTvJZOm6mNkQpgf5itW7m1\nLzLUR5BElvOtyj84eVKo1Q0i/3tRUhInT+jw1C4Nw2xN/ifLFm0DA1U9bxce\nPCDM\r\n=TDqy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsSgsguEa7Nxg9xePUFvoCA8vjNyxpWzlmf8BS4sQItAiEAj+uTtZHAnscuN7idQNCw12VoW/CdSquCZniO5U5KhHw="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.18-alpha-fix-icons-react-import-5812.1.4_1594311733987_0.3805703405411409"},"_hasShrinkwrap":false},"2.1.18-alpha-fix-icons-react-import-5814.1.2":{"name":"@crave/farmblocks-sidenav","version":"2.1.18-alpha-fix-icons-react-import-5814.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5814.1.2+0cdbbcaf","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.16-alpha-fix-icons-react-import-5814.1.2+0cdbbcaf","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"0cdbbcaf66b03f65920eec7a6627deecb674d66b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.18-alpha-fix-icons-react-import-5814.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-WUZKvNcuizd+tj3+KqEiBBJHOzGlwBsFFvdfs9hZbzl/DFxPEtQn6YGStXI2XEP9ZGk2tPxyBfkQlA4mUnj6RA==","shasum":"0acee008a15c3b7ba26eb6f9ded41da02dc594e5","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.18-alpha-fix-icons-react-import-5814.1.2.tgz","fileCount":22,"unpackedSize":56535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1BXCRA9TVsSAnZWagAA3oAP/RVeUJta4ClO3iSNEgBv\nC0yEcG1XM4xLYl3j85PQGg7SdjqBf+ZF1gAp1MyVQ3PNzl2VaIPLa2NKFJ/w\ngogK8XLIng+ETW3bRE1pv7q2guRZah0/LsAOO5RlaPXmd0IHQ2sn9fxY6h+2\nUBuWjHKuYMHl4lqDhJ9VZWjuZstpemIxAMEWVlSsBlXOw5x9qm4zNwCZczS/\nrMXr0JQWTdfO2xtZoyxYch1b2D0wdCFujzKufYvyZaXTgYATw3Y1HbB/dhn9\nLP4xpjQMb550kyMlHs7AFBbRL5xk0unOXAh4n98MQeU8GfOiz+Qvk2vJEOQT\nXHm53P9Szs4e1ABfQIqz2VRlsgGgeMEMiF0KR73UMVFh9UzZTTmdgMHZjAhF\nwo4NvcW5izHt+xiwzm67pL1KjxBetkTRosDSP5Zcjx+iEcrTBByPTCKDhyGT\nGA9V/xjqc3Lf234RgMw0clogJ+V6rWg5BqIME7Kx08Dskd6M4YnpCCpcidFQ\n4KqoGGwLU5abbZ1smzOOTX7SRyGNzxsQLwDGGHS25OcG01nNB3BOS2+ohiX/\nTzbAEwN7kf6rj+8HqoVE7HJaZap6iQZLviBTZTpcIOHN4tw2yyUX3mHVckr1\nm3faNf9zf8CooKSbrQ2ZcQP5h2TvMC2I5QaG9YVvJhW7M/Q0pP+Gld994lxb\nisRc\r\n=siEm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN2AxJBfiUDaeUBUJhwPEXvVoUElC5X3q4KXE1K1lWLwIhAMaFLVn1YQfR6pNp0VRBa0fL431QUvemc/7+qeEPsHmp"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.18-alpha-fix-icons-react-import-5814.1.2_1594314839015_0.1514590328091232"},"_hasShrinkwrap":false},"2.1.18-alpha-fix-icons-react-import-5816.1.3":{"name":"@crave/farmblocks-sidenav","version":"2.1.18-alpha-fix-icons-react-import-5816.1.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.1-alpha-fix-icons-react-import-5816.1.3+3cb6b84f","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.16-alpha-fix-icons-react-import-5816.1.3+3cb6b84f","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"3cb6b84fca37c25b5f2bd5b61cb59b4f08aedb9c","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.18-alpha-fix-icons-react-import-5816.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-vN4YH0gzTJbtlxBvRSenUMJz0nea5LqeVUA6i8Bfke6XzhMp/tU3MsHzFjnBEa8kmaQ0Q52Ju9P3AZ6IoczjqA==","shasum":"e5e8b9c173e86cd719d96ab8d03cfb2d69e85cca","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.18-alpha-fix-icons-react-import-5816.1.3.tgz","fileCount":22,"unpackedSize":56535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1LKCRA9TVsSAnZWagAANVYP/20HBi7Zms+LonlyWdjG\n9IPceXAQgpNFZphsZEStVtVUkXORKLYghSsGjYHdr+8xlwG98U6Oq1biKp9T\n8kaApxmrlTWZbj7xbvPOUEe1o5cClL2O0vGgcYn4IAH6y21CsCP6iaX4fcVQ\n3qWkeQHakpW7XxPlxbFq5Jg3wKrZwDwp+Zl2X9nMLle2wnaDBzJKMDZlYhSr\nJR9yhi9x/nRxJbwPf5zobk/Y2SkXTA35d272IajDUMgnjlNpJ3Bb9bYI4CR9\nGDOe7ZACDEmDVgq8uR8GxmP8a8zS/LcbQKN27wMn2tYiMOAJQOcdzSKR+8o4\nS+jrNR/yn38jI0/bhoFbbi74zX21WyW/OAGd8vd6TII4FMYlsRd56n/oWUTs\niqjKITAKZ2Jx94Guh5SPXzPn3c1j4GBX+C3VAl8PSAO+lY/Yzr/SUyIbX3Ep\n6hL7xcZ2qe7zwK8VeuY6y5jlmc3Jc4lfzsdijhW7sWAFvFnqDb/EkIw61xJy\nvSwFizg2FTzNXt9VaWWCppmuBVymWVhFLWP/MDzHbcgKWSC/82ipXREkxoVL\npwiPp3oSpa9Z8NL7OHv09+tA2uWFk4G8V/Cp/DXSjGTFSeqg8ABfpzlrNwYE\nvExuhCku7pQmUvqsmyKD9Ixr9tuolg9eOk1ao4+FAV6Rjis7qcxWxIiFFkfR\nondU\r\n=837F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHRVEbZB7VMIJJlT0USjZ3+OrGhY36nD+spFnrf/U3/AiABTUMr7OJyKlnKahbhlzC6Qlije/03b/bAHwrnMrN1zg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.18-alpha-fix-icons-react-import-5816.1.3_1594315465771_0.5035964985000931"},"_hasShrinkwrap":false},"2.1.18-alpha-fix-github-dribbble-icons-5818.1.1":{"name":"@crave/farmblocks-sidenav","version":"2.1.18-alpha-fix-github-dribbble-icons-5818.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.1-alpha-fix-github-dribbble-icons-5818.1.1+0c424252","@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^3.1.16-alpha-fix-github-dribbble-icons-5818.1.1+0c424252","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"0c4242525cb5ad68afbeb2f532cc7a394654227a","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.18-alpha-fix-github-dribbble-icons-5818.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-c2MfFXM1VYvUS71hhq+4VCQw8IwIjY3k0egBsdtCSpRHHWgUKJ4963975rD7HlV4wKnQ8s5QXLW5buAMy3D01A==","shasum":"8df6a0292f2acc036c7b66910abf8318fac7897e","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.18-alpha-fix-github-dribbble-icons-5818.1.1.tgz","fileCount":22,"unpackedSize":56544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1gXCRA9TVsSAnZWagAAgDYP/3AGaB32QQROeDiDTyf5\naUYTNF5chSirdl2q+K2tIvKbByyuRgImEm6zAAgEy6E578c1Z+KTjPxXsl6K\nWOD6L9ylpH7S86hu70pT4rgz5KMf1vChccR3V4LIyi/oLszKzNrMPPeX77if\nxQvuyk0xklN3cfTLgewSJevkpS823GH8e+sXfsbiVKAAYwwGhbYha236/mJe\nQLHP5clU5E+5VCCcm3H3h1kU3L6BK5JR21zeoI+B5HNvYlZLm5uZG3T0RSwu\nnBHL0nLGUwodGaE8e+lomtf+rl8rlyylEJTOCFx8WiHAip2FhXoGF92G9UrR\nuCHyYWkLgQr4B3XD9ldB+wLGjIwtLaouy9rr0ZMKwUAUgtlgX1zn6/79XkD3\nYnC0IkxTKEsZX9FDQkETtiAX+NRBQ85ZZpRjyet33tdESeWV6oMWsNsvWQLK\nCQ9tLyevdjWKsRrkUzZNJYxCHUmYB01J5Q8syWXqyqD7gVHzSowh2imiWO3H\nw6qowwRJuTp5crbqCIqGkAGFlpPeZsYx6c0LtvXvWJWr5Y0oH5VEtikZHq+r\nHN0HyOCmWJYzt5v0kXrsiioXTxKBRF1OK66+BfxZwIGYtu67BF7pJAHc5ltr\nAAInHk4sRrL7QOp+oPQuYt7+T3aNlqo0QeuYnesCc0eNe7IQ/9BG1MoOd/Vf\ng9aE\r\n=/hXr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDfLqFrZFyJkKzf26SA6wzF3aK5AbJudktY7fuYkEmPnAiEA3ush4GubwJrzrP/LH8jEELbs9ptjSmVU/ahY2fIXK5M="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.18-alpha-fix-github-dribbble-icons-5818.1.1_1594316822678_0.3522497085677625"},"_hasShrinkwrap":false},"2.1.18-alpha-another-icon-test-5829.1.4":{"name":"@crave/farmblocks-sidenav","version":"2.1.18-alpha-another-icon-test-5829.1.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.1-alpha-another-icon-test-5829.1.4+c443d910","@crave/farmblocks-image":"^3.2.4-alpha-another-icon-test-5829.1.28+c443d910","@crave/farmblocks-input-radio":"^3.5.7-alpha-another-icon-test-5829.1.28+c443d910","@crave/farmblocks-modal":"^3.1.16-alpha-another-icon-test-5829.1.4+c443d910","@crave/farmblocks-text":"^3.6.3-alpha-another-icon-test-5829.1.28+c443d910","@crave/farmblocks-theme":"^1.9.1-alpha-another-icon-test-5829.1.34+c443d910","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"c443d910049b4bb0eb5542aa7606fc53d3cf3775","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.18-alpha-another-icon-test-5829.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-wH9WDAz4NEKq3DCVN+ieZuiQHBMHAkb934qTUT8IB1j2j2YePM2qK9irGfPWN3aJ+i9yQrDhDe8VYPhokRIShw==","shasum":"dd53d40f916471b3e15637022c1f605a580c5853","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.18-alpha-another-icon-test-5829.1.4.tgz","fileCount":22,"unpackedSize":56692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDHiNCRA9TVsSAnZWagAAxlcP/j+qF5gxwgUJnvcsgKDT\n08IbdHVshs709erlaJ4hG3P7i1GlXdBTm6QZWaT83TAHjLHPT9YjSgCEN9Qz\nB+T3AdxTaV9KSZTt8LxUHSs2QgZMOkpLlBiESZZQ+kVZ8quLP8Y2IwWDXr7b\nE/A/CwI66vZw2j83Gbt1inlcIJehR096P6kcIupsXyzhiMTmGfiqZBKt81mH\nbWTRg7/lC/3hOQoKcZ5Kwn02F8gV6p6qTbeEvR4ISiWvR9Oke1X7I4lgG73q\nW70sAx2GktvjhG+UJOJJfzJI06Jc6SfNgtLSbqb9nJybygqhnCCKSwQf9cqg\nYgA7TUE/0fsTgRsi0hZrS8wqfz9kj/fGXYFI3T8OkV7MEDKZaT2L/idCnvs2\nNENtcHnpiVbPb+HNqAG56mxaLPhJlcQdKeZBbbqr3CgO1EUsLcXbJn+G7mSU\nY12JZZ7b0wqrRL6J0OPL8KrlDbR8q30vH6BTy44qqdDjqZI7RjFT7tuc/wZA\njnVOSypDMvpkpv7yC6ZacjQOl0WPv8WW6ZHF6FjWMThkdsrULMadoDq86gSK\nBa4YfOclNG4Ji9OsQlcVzM7XQgsONjnpgB3P/Xm23dnn+JOFCmdSSoJ3BfJe\nEAYxPLQYhtbTDhEoCLnYooe1YyCIGm+ZE7+hTT10tgbSGECQ8Y4ZmSA1SnEP\nYkV4\r\n=pqpg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTtZNjPNE79J/j9hiiIVDM9/h6W1D36FJX4UjOjqAfnAiBl/XNexjEuXPxykAwyvanQ2Vq4s6gt5rvjmRUFYOe4jQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.18-alpha-another-icon-test-5829.1.4_1594652813491_0.25227029428083614"},"_hasShrinkwrap":false},"2.1.18-alpha-another-icon-test-5832.1.6":{"name":"@crave/farmblocks-sidenav","version":"2.1.18-alpha-another-icon-test-5832.1.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-icon":"^0.7.1-alpha-another-icon-test-5832.1.6+fa9d7b16","@crave/farmblocks-image":"^3.2.4-alpha-another-icon-test-5832.1.30+fa9d7b16","@crave/farmblocks-input-radio":"^3.5.7-alpha-another-icon-test-5832.1.30+fa9d7b16","@crave/farmblocks-modal":"^3.1.16-alpha-another-icon-test-5832.1.6+fa9d7b16","@crave/farmblocks-text":"^3.6.3-alpha-another-icon-test-5832.1.30+fa9d7b16","@crave/farmblocks-theme":"^1.9.1-alpha-another-icon-test-5832.1.36+fa9d7b16","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"fa9d7b16a427797355a316c1e6401af20c646623","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@2.1.18-alpha-another-icon-test-5832.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-zgbgwUxjkgCrYTRgdT9yuikIRLzX6p21nsYHqE8I7HJZx489CQZkfrBw4Lmp1QNL7xLks2gs6pjf2hRBmSCtFQ==","shasum":"5e7552fc68c7d29d60ae48b2327ebd6e6946c6cb","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-2.1.18-alpha-another-icon-test-5832.1.6.tgz","fileCount":22,"unpackedSize":56692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDH68CRA9TVsSAnZWagAARwQP/jrjpIOxvez3yoscrlPq\n3JUc3GVJOpMen/mu/JmbOnKWq5P+PwrPzYC2NMvzbRZZ+8CKCIds/ZvqQMK1\nZ6FPtQyisGH37CZaRtvqhsQ51efTdFmxWdX8Ve7AvbW/hT173crLQwT/kSaM\nj+cweUc/mG30pgCcog0aArh2/73KlKWLn2QckSaB4Z/Lzx2o5za8xvKrH+Tv\n58ZBtU5TO54qFY121jhu7sx5lu8DBJxhdpe4BvayWqQFxXbz6U3LumGY9SP7\n3FHHhnSSraozhAW6AveFYw1qy7nZteNKi0nELE1HAAw2+q+NhbzHd8mzMcQe\nbT6Y9SeCs6Dg5UTDNUscn89GAqoskxIfMy64WLtVqjJY+7pssMxxK7VUnlfO\n0EbQ+yuHQxIlSx1RYGH+EeBiLrzq9KXws1pkSYTGK/ahP0mdFF786n5SgmV8\nQF6fEfBRlxsajU31oDu+p8pexpJJ8qR6bH+ZcR0SpX9Ra/jBN492ZCrBJ5pT\ncFjiZou4w2E3zThc77NWKRDOLHUXjLpyaMyWBYXsjna7UlUbxxrreoZ7Ii8p\nUMxrn06J3XoHTuPaLj7DFPk49tqigL0Bw7RLyn66SnNRPJlQTpa7S6CzSisa\nHEUlj1DxYcGdNH1LD7yVFRiBMaiRj9Yv6/2d+vPnyQ2PbVIv0jzdXn9o29bb\n0ROc\r\n=H1+K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfaJwEE7F3lx7skwvXA4q6RIZF8QxJMBnWe3mh569qkgIgFSFJef6N+F/KtRZ7BpHfcDbMRwPcXJs9JsiC+bl1B6I="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_2.1.18-alpha-another-icon-test-5832.1.6_1594654395618_0.609083391143264"},"_hasShrinkwrap":false},"3.0.0":{"name":"@crave/farmblocks-sidenav","version":"3.0.0","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^4.0.0","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"4317cdd64c0f94ebc553064903b3aa6da724253b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-zi30upM1q2MteV4gOoAx5hnr+tEjUJ7hViE00syXpTGkSAJa/wK3WX4LiEjObud/eh1QuHuey+6e6peulU5K2Q==","shasum":"1d88bca5f30414cf183f748089a514ad69ff5438","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.0.tgz","fileCount":22,"unpackedSize":56856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDdxHCRA9TVsSAnZWagAAZw0P/itdGWWvuiQ3Qv/rgIOA\nyO5LNpv2bTqwG3x78MaUwEd/hWR+5Z85UKVt50pOz1sEeFKttLK0h4gvQ4Xm\n1SL33cf6C+hMNQ0fknmtR4bLQAPj6Yq3ziH6Jx0cyS82OPvkDd5aMhJXyne0\nGt36MnyUtuBeA2+ClJmM2+YSSgoFMIPGsHQ+CZMhQS/+5xxsD6YtX53NnupC\nVnPN+tMJg9Um3Wwolf7jzz6z3OEsfnUdLZP7TFggUYct2HcSQpbYNLJ80YY4\nDclr4iIYBcOH+QV7D6t0cfvp5W2xQJ5lMMLVyXdof5QmzmwU6tc9mWbGAAki\nAuekjPZ59HVaCx52g7X/UclE0+TMJ2veOkQM9JKPpvgZNemFAVf8qlko8Ly5\ni0JdgMj3kz2Gy/69P21PdtC0M2H76j3kkh1jEHWm0OJD2gVWSzTXiD2d3lGP\naE5HcfjQjFq7TbrDSOMw38Bzia7tVcPwwxmM8zj4w4Ix3oBdj8gJHs4SjejP\neEMQ0yZANkP00bO5xXlAyKLZng7oVVZyvAlUYnHv7i2iF8qcVrc24bgi3kYL\n2BgcVuuHcTvh8nGl5cZeTfeQbTRsCMesmHScC7bZ/UI6cr4WfblLs/QqfTPm\nXHIXJZmzV0GYfqINHHQdUTNi/RcOlvaHkZPolI+Rc7kskgekb4udg+Av/fzE\nvmue\r\n=U6P8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5HOfDl4z/f4aM9koiJV3OqiFOm5zAhBb6/LrNy7G5MAiEAhVGQcXy1Vh9RE0n0Os8gGAVRVewp91EyNer0l1hcCDQ="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.0_1594743878912_0.018739733551150328"},"_hasShrinkwrap":false},"3.0.1-alpha-protected-currency-5867.1.9":{"name":"@crave/farmblocks-sidenav","version":"3.0.1-alpha-protected-currency-5867.1.9","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4-alpha-protected-currency-5867.1.36+58734103","@crave/farmblocks-input-radio":"^3.5.7-alpha-protected-currency-5867.1.36+58734103","@crave/farmblocks-modal":"^4.0.1-alpha-protected-currency-5867.1.9+58734103","@crave/farmblocks-text":"^3.6.3-alpha-protected-currency-5867.1.36+58734103","@crave/farmblocks-theme":"^1.9.1-alpha-protected-currency-5867.1.42+58734103","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"58734103b0e6767231a40c638b9caea4ad9e085f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.1-alpha-protected-currency-5867.1.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-FJyg94hiO0JAZia1OYKIhRaleXmQQNRtsfMQ89AxQKYLObveDK24UBcaLQFYHxpye2rXhM7OBjvs4QbYL7zFhw==","shasum":"4c0654e8940778eb25c4f76777615834c8cd1683","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.1-alpha-protected-currency-5867.1.9.tgz","fileCount":22,"unpackedSize":57810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKa+fCRA9TVsSAnZWagAA8L4P/i8GxQEwMuwYYSfL59kf\nDN89Hif/Mp1PUQQRSMJDmlYe4NI3AtQec3JQb7LUzVUmcbTj1OcZ2yt4EXUm\nHkp3DTDUyS407CwM/DhKKWxKUIPJuUwdx/vcioMXGQO8HZAXOLOBCOeREG21\nR5Gj3szyxf0q5Y0ypueBTe1F6rLlwl9n5iE8/JhmNmWkQkjZrJkavtocOzm7\nZPvIyEdL7N2g1ubK72LxSI8IKhh566NeMt7Qvx54b2WRLmTAmf+p8nsEGlUO\nXSJ652fdp55hwjqBA4U2H0iLVb9vDa9nN6qwRPW83FnsY/BryzyCm/kqJt/e\nwsfhAFHFXRicRsbOnK8xU3azHn7p3z7pJqXNMM7eKWVhBqJxIRgOpadccF+D\nokXNGaGKRm8K9XWZY9f7GZHl9EwohzjZ3qYVjFbMr3jYlN/tnDDLWb7Lzlol\nDsRRjgb720+CPI7dgXiUQRZ0oRadA4e81IJrUfRzZKELZcE5sUXS37W7MTYZ\nzrE5tpPbtXwtXOwJrBYAvpDYBW6lL9ujxCqMPcZA+BJyns54b/75ARdHRj+7\ndUR0sPq4VHRki8Dv+7BBwybr+7Th/d25neOaN1ISNwvOTmF/FxojKgPOeGsl\nVoCwgcGybIvlFsdgFBLpVenIzB1Zdo7MIPf+HJ4/Q3YCJzjPEKcu4ZYVlZcx\nSQfA\r\n=FEdj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6j9CbEaBj6v29x+Z4p3MMAGY0tI1ovnBrvAnCBU/rOAiBOj8HPywuvMd0bDzNSVQk2S7+FNTlzGWNY4tZJ17YgbQ=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.1-alpha-protected-currency-5867.1.9_1596567455510_0.31212336792101536"},"_hasShrinkwrap":false},"3.0.1-alpha-button-redesign-5884.1.23":{"name":"@crave/farmblocks-sidenav","version":"3.0.1-alpha-button-redesign-5884.1.23","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^4.0.1-alpha-button-redesign-5884.1.23+165a9e98","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"165a9e989844e690e495c88a644b0e5cd0b78e4f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.1-alpha-button-redesign-5884.1.23","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Aqp6MXcJvN0gjhVrIj/0AdQtX/EADlse3YkSqJMJh7Cm8b9xtMS3b2Yiwsfci3z4jVwOK/vzVLX16HLanoFMIQ==","shasum":"3d9e389716d009926347253cb73bd39a0616336f","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.1-alpha-button-redesign-5884.1.23.tgz","fileCount":22,"unpackedSize":57630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT/gACRA9TVsSAnZWagAAfWYP/2oROMCnKw5Oj0aIDt2M\n+BV5jcQ+mzWLAroqfQo93+RFfQx/nS7PxhDkXXGqlR0iMcuBcO+N4o/oatW1\nQFJCpj0Qt+0QvnuQqvPE+fK4SIuquOxz2J+5SjbbstRIHyXuhrhemWkC7/jN\nAnvwJYdr5KiInyqY1hrJgjjyoM9Ca5nJA4SmkL8lZOuIk859IXlIp/KLBD8n\nLYAjoMbWZCrf9hKiZ2ZH9NF8kmdOuJ01yEj/xZH+Uew16N/WjnJt8XcZl8NY\nWFC/TcPhNbYx7J1ACua3nSKLioErUes8rCAvtCP+CSwBpk0HQIYtW33S121F\nbXXoEuHduvtq0ce5v9J9SFGImTF8dHTfRKrcBJJrjMjkfY4K7szVGVzitdPk\nyXAMB4XnSz3jkM0KdC4R2pnESofHudZtXQDFMvP1Q9XmXGFyy2sRuKa7nCBo\nxegQyZxiVjslgdpCLKLn7/QjkqBUZpbJINtDypKaDyQWR1ciX7+QzQcYTWyj\npywW0UXAGSqvnmNPTYM77XxKPqa9wyAamo6jDmiaArCCzG8p+dbnVis+e8/L\nd335hLY5VwkVE8XYVvjQVnPfAOFzvcNE2Lz9doZNFxvct9uepfVCQps5tPb0\nnXOdBb7X0f1eiDoWsycQA4sn0XU+gTTJeBWHo5AUGD5odFnPDqqPEm5HnKQ2\nrj1O\r\n=h6ip\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMMrz/i6gfVIUlwLsnNFxWTGBaOSmX2u1xeddsY4wEpAiAZo5W4gPu/hFk90blEtVtt2/BPLGs0wxoL0p4AEC0gXA=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.1-alpha-button-redesign-5884.1.23_1599076352140_0.579416159043938"},"_hasShrinkwrap":false},"3.0.1-alpha-button-redesign-5888.1.26":{"name":"@crave/farmblocks-sidenav","version":"3.0.1-alpha-button-redesign-5888.1.26","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^4.0.1-alpha-button-redesign-5888.1.26+1e83bb2e","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"1e83bb2e333e3dc07b75e571bcd43e86fccfdbdb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.1-alpha-button-redesign-5888.1.26","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-g+B5VBLPjQzQUFTZ7ryWnV2q6L+fq1e7/aKU3Pc4kqaEwOl3NMOWPrbRrBMbyCMMD7J177EVFjIbAEaaq6EtyA==","shasum":"719bedfd6495c4a48cf1c5c8ef325f2cf108b4de","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.1-alpha-button-redesign-5888.1.26.tgz","fileCount":22,"unpackedSize":57630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUaOCRA9TVsSAnZWagAA60gP/j3zWWJe2vzzn8bfuMGg\nmSQLVd3LeTb3BFcTsRVgTkF9eZ87M0rVNxDIxlQcgNVoB29r9lLK0jt/56ha\nDOud2Ftvd9jYBL+qXBlsW6W3eNrWHRbUTXvru/HaLCdEoq0yQVyJPlSW1V2n\n93QJ5+P3vGMAmJ8LQOUGiYatdbWJlAqfsNDqBt+KzINyFK+cWY0xnXlgeJ5V\nan62dzEj67Liy+H5SBmOLZIPvt5G74usnuzo+KFT4X/VWs6++7AFoa2xeuUJ\ngCgtWIch37ciD5Ck3wU7ggp2PmSPzNWIU/U/hnbiunyUTK7nvZZMCsexeKtO\nVVho8I2vctWZld/9IRqQYFoJ7dxYqprR8/WLbu/bN9DXkU0MSgWE9q+vEg1Z\nrqP19/s/q7YJNADR10rEPSAENtRuWVYqE5QiqjYaPHyAPH0ZsKKUkEhG6mN7\n8T8kKorj31AWM//sLnQ/yCvtQrqo527EJai44p+JZIdsf+onlS9f/kEyPGTT\nIa/CCQ0DvYRdjcsMeOstgS0UTehqZ//KW+mIkzc+TdSHGyQlKItvEtHhdSNt\nY2a9TbXFKEYp+bsltdnd6WF4X0PVxxBFDTDXMRiBH5UzaIn+RUDpTrnp9OsI\nrGU5IDOa+nV2+oVWolVmeq+aUQomIMO5OMJSqlrOTsGyU+VukukBCKtCzueN\nWH9K\r\n=xgEz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCqOwnyMWXHjU1VR+5wjcfnw72EcZXkWUxggh+bsQ17wIgLAxkb+xOdTB40VTIu/FC+peSsu7NbhxhPKCMlwuyx8w="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.1-alpha-button-redesign-5888.1.26_1599161997673_0.6613183167045513"},"_hasShrinkwrap":false},"3.0.1-alpha-button-redesign-5890.1.26":{"name":"@crave/farmblocks-sidenav","version":"3.0.1-alpha-button-redesign-5890.1.26","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^4.0.1-alpha-button-redesign-5890.1.26+c3050bb7","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"c3050bb7b0b0e8458b76b2a8723d53bb9030c471","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.1-alpha-button-redesign-5890.1.26","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-qXifVbBRJ4hdFmW2/h+HMQTlYlhMRUfgps2eH7BAjZCWaMpr8OOqbxs3dqwCtgUJd4Op2Ow24WHOZoL/cSBO9Q==","shasum":"674f35e4daea1458704ba19bd8924a733e4e8760","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.1-alpha-button-redesign-5890.1.26.tgz","fileCount":22,"unpackedSize":57630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUi3CRA9TVsSAnZWagAAM+kQAIDdP4Imjt3yApBEU+cF\n+uD8nM25UB6Z3bAEGc7Em23UxkzaifkeKtIhUMrBDy1bxnJwqG9pe0n0bG21\n+UUSjCaE7cNFzkzfIf0MBj8PvKRX32taZOM2A48SAI9LYthtxaFcuOmAWzOc\nasoiWm4/LHlQxWGKx9D2arJ+ojJJvIAgG4TVccVg9+D4weKNz6WwOJ5rVMqR\n22aU6qj/eGcv9Oev9CDYlhBv93tEW7DHW6JjXJPdoGW26yVw5pEKEAFy+ET6\nVrvstzmu/YGnSr7F99ynk+Kbf1sgtSFc4+crXZoZVZ9tVx0/182CA5MVgCOA\nwTgY0OC5xW0/azhvEKeiw5OkFZlHwW/gvcBXpEREeRIF8+7f5NJK6Q+TVeZX\nFvNRYUEPkqrgW44R3tpPFtVsPomnGmOMvoK3ADBM2WOfGhs0iWqRGQ9PZwt5\nuOiiwjLWCVQgt23Wz6W28KTUzaM6uPb+qHzg4Dk5hxRgEetnI7ySnpoQMI+F\nB8A8NoPAbhLMKxNgdI/XNbV1lYtz55h5m1XeVETxSN/MKdd/Ib5pPxXQ9RUa\nGNBW7HopS9vOItYMLOVWQD7yuxSQBfz+4c8p9R0RXuCYZeT2WQaoYA3fZsvr\nOShts4nn/b3bVPOkqzqVdwJk9DvTRhiHLWuypc8dHd9ZqAtFg9K47NXHj050\nQ4wi\r\n=3pC2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4XFNAC5ugtjI7Hgmv+GuM8MSQZbkYUzqbbFt8fjlWiAiEA20RgwwR/jsKxJ9NZs68BHw7AsWrKOfn0YXlj2o6A1ck="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.1-alpha-button-redesign-5890.1.26_1599162550726_0.5120953162566586"},"_hasShrinkwrap":false},"3.0.1-alpha-button-redesign-5892.1.22":{"name":"@crave/farmblocks-sidenav","version":"3.0.1-alpha-button-redesign-5892.1.22","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.3","@crave/farmblocks-input-radio":"^3.5.6","@crave/farmblocks-modal":"^4.0.1-alpha-button-redesign-5892.1.22+b05b0309","@crave/farmblocks-text":"^3.6.2","@crave/farmblocks-theme":"^1.9.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"b05b0309cd5ad5f6b6161e44adfec0414a193ee1","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.1-alpha-button-redesign-5892.1.22","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-cqjtvA2BfC2DoPMwctFJE6rmx/KflQNX9I5XRTQgvesju0W5CN6r/MyXVbyVnszwmlsMeC4fM7I+bFEyGEVwjA==","shasum":"4666e5377a45dcfa957890e2b447e863b091aac0","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.1-alpha-button-redesign-5892.1.22.tgz","fileCount":22,"unpackedSize":57630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUm0cCRA9TVsSAnZWagAAPxcP+waoIfr8QTn6rufoYgg/\n3rRG08yIuiuloFUJP4R0hVb+5ytXelJS04OgmHUzRt8KAjp3B+y32jcoP9uV\nKFu3jDW1+3+SLY+bNozvuko7MoZ0LTGrn5QFKACqsODm1yUg6A7CgBP0fKnQ\nX0myPIKTUz10R+1UT8MT/oyXIEEaw6WH/3fgu02lRoRYTsQbxZd0K2XeC1Sj\nsNLXHCVyRHyP5gfK6QLE4/7h15g5HBclfj5k4+Qrf+TUw12eyMmFWEHPsXEU\n6lBHm77KSMFta0LyvbdN3mmkmoYSVomLfTXL36NeSq2eR8fV4hkTn+6/IbmA\nQjtS4IgM4jblZMjWaQJ4lOF+XWt7dTcOVst4kvverlGAXN5XKhhsnzadaVtZ\njkRREJPg2l/vvDACt+qskZYBmZqJTDGY4dW8euxJtB3Hcr6HMc/e55p79iao\nkOSx9sURze5uI+RfErOpvbETeQrBuRmU2/c0mRKj5rI1zSCXjdgbG5IVMYC3\nXwEEzXaDTwNyKGst2AfbILHI9Eit8Wgvtga0u8pF8xG2qa/UEi1zyNTA5OIw\ntvr5ES0qlkx4dE9xKE6xA8GhwitmFHDkYKtB0nkdqnLxRMQNNobbkjfEcvn1\n839HTWANMFzqucV10BmRvTNGnozpcV23w1AIKjmpPzaO1QuaY7e0yavttX9s\nyZI0\r\n=fzX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYva14/fl8VztxKdj4rsWizzEpLAaiZ/zzsR2G082PBAiB3YuW7kfjKNfKSvL3FBs5PzD+3ydze+N6R35AciU61Hg=="}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.1-alpha-button-redesign-5892.1.22_1599237403761_0.321895655253174"},"_hasShrinkwrap":false},"3.0.1":{"name":"@crave/farmblocks-sidenav","version":"3.0.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4","@crave/farmblocks-input-radio":"^3.5.7","@crave/farmblocks-modal":"^4.1.0","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"11d8e81fedf57a21ea8c27c7e975534552867662","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-UGg1tAOp0ecbnHdxVxfF/UOK8J58jXyBaFAVmaBIdV04M0KcmrptDf/MvA67UQVAXWD5A96qYII2+ddqoKO/XA==","shasum":"382622a82bf348e3c6405091c9efde1db3d76cec","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.1.tgz","fileCount":22,"unpackedSize":57760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUnFECRA9TVsSAnZWagAAOKsP/0/N3eVF8JQNcupKBbs4\n5bE2qQTWHkhirsuCkEuu8JO1jqzTCbmK1/i7WIf4fOGk0XOImb20dth6KuLg\nCBjDUmDQiHhMfX3r0tgZUTenK8q+isNRwpZhv8/I/pjmBvOvCElMrL3mK6YP\nhoLaSCUMb0/p5kKHY281GwIL9CZRR/Lwz4EOXedO1uU8zR4nLtVu9ZQerKtX\nHqrIvaEyj9E3A3tp29A721rhuVcC/N0+tmj3RDTDGs3dfMUbPzkBVSDBoKVF\nTZktPleb8XjWQIOWubvrL3Tv+PPTzNu74vrMXOmQANxm/fNK6h3AWZA6DX6I\nSO/2CKhEUcb+n9rMPOPFrzvrkz3FRM4yHWhGYQVQwJlN3pppb+ujLFkXKFL2\n05k+O/bIOZUj9sqFvPJ3AqZYrye7vA1CXHz3ZR13ajpu44jBvec+HR+JS4ig\n2RBxcn9qniv8PHeQQEcq39HnxIKCSDdbNGUcDB+J6dUjlqbKgvx9XSsy1GG0\n67lcqMZQDEY43BnMUEE/TCjyh9bJ94NoH54m9UP5L+ZH6ilE6LsYy9dZbZZ9\nxhGdNjR6q7p/lfu3xL6PYYg7oGrkhnKAcXSeYduI4FMLfSv2GGsD1e8h+K7b\n3dNYAMDMY1133xYXvqQJP8P1miEERwjjk8DwAcm+gkGZJL7e9nj/jGdBk2VW\n5fBp\r\n=TnqA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+qklClhPtsgMe3qJTCzvahfT2iIWQqmcMxiJ/iH9cRQIhAJQX9ocD17GM6S6XW3fRda+Vk3NgcNx045frUQCaliqb"}]},"maintainers":[{"email":"alcf.2099@gmail.com","name":"alcferreira"},{"email":"will@sourcewhatsgood.com","name":"imwra"},{"email":"seocam@seocam.com","name":"seocam"},{"email":"hello@vnakamura.com","name":"vnakamura"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.1_1599238467441_0.6578844603410128"},"_hasShrinkwrap":false},"3.0.2-alpha-fix-button-white-space-5896.1.2":{"name":"@crave/farmblocks-sidenav","version":"3.0.2-alpha-fix-button-white-space-5896.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4","@crave/farmblocks-input-radio":"^3.5.7","@crave/farmblocks-modal":"^4.1.1-alpha-fix-button-white-space-5896.1.2+eb265109","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"eb265109b3f15d2ffa4cdee65d60990d2609bfe3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.2-alpha-fix-button-white-space-5896.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-zzh1ZxV7/ssuU03iUFHta35o6MpI57IvAZy78d9eddWRtubrEcRAJ+JQpbHAu02m9KScGguS6Mr+kCJmBhWk9g==","shasum":"750d729f0b4299180558a9ed8453697fd3207c95","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.2-alpha-fix-button-white-space-5896.1.2.tgz","fileCount":22,"unpackedSize":57854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWObECRA9TVsSAnZWagAASN4P/28W4H2slPFq/W0/Svxk\n1TF6a9JboHgrNaylq3piqVWNzpEmebaLCc/Gaw7oF/XdH0mB3N5DD0l+mUHf\nBDWZuovCcJb3pvUDrlLuoO0wA8gJlKf+UEwfVrXGgWjhXCq5o77azdthAOah\npQRQ+znGFrtzHZvHYq37JFjKV/+Zo+JugGyBD5r4NEw5hlxF3zT3xNvDU44e\nnTH+zAKAku91Wl20RtvcZkP4cbwU6cUkQ2HtjnnkMLcBW/c2q4VTPT3+jNPr\n7/0CTTtyN4qQNYMerVJwUw9u34vz1jCoGS4MqvlSHGVLOgafPUKCbvnFbI01\ntwqycAdqCQ9GgAndt9Ue84OV8XUtCuwmokm4tRSlJEZGSyI62L427BkUkVF3\nqrsNf7gnclFz33T4WExMzfFnf3kWfJG1MgfZZIJ0lbL1xIDtutVe9YogFZ6u\nTcC0PwB1HV+6i7CvIusRCm1Utk494Jy6NzOAnFxALSHUbYfCWFJe1orihtiz\n2EeNfbzZS8GLSdcxEXcMdAt+hXHwm0vKNtfX3dpqdEYLvdfHG010cK8Ps2x0\nGhyfEBAHZu8J4FUbIgXkYgZoBSa3lxga6MCrtPtsUbIUgV3SOEmu9eCi9SGH\n8FsRDOwQ4vgPLtj/veqQI6fV6IqHUEOtdEixLiBR5h+mPSdDm2LMo3AQhi4H\nu9Q8\r\n=7wpz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXsSQ2EWyVrTXwIpCRTHcNzmAMwn/B8o+2wRYhIdZ6vAIhAKVMlwN54lP7NeJ2N6ZBRUwFjiyMIlLTXr62SE4yyEdV"}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.2-alpha-fix-button-white-space-5896.1.2_1599661763700_0.4057240203106558"},"_hasShrinkwrap":false},"3.0.2-alpha-fix-button-white-space-5898.1.2":{"name":"@crave/farmblocks-sidenav","version":"3.0.2-alpha-fix-button-white-space-5898.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4","@crave/farmblocks-input-radio":"^3.5.7","@crave/farmblocks-modal":"^4.1.1-alpha-fix-button-white-space-5898.1.2+6daaf17d","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"6daaf17df634c3d7ace061791f08e3b1a87e9f1b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.2-alpha-fix-button-white-space-5898.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-IeQFTAPg7sfWZEBZB+3XdztOtmsZy5KIFMjiKUSvYUEpY3Y/FvNQ193CtiQP67Du/aPrDFgnnmuPhaF7z5yCoA==","shasum":"c0fc32aa54c58c43a96d1df9991fce3cc992f285","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.2-alpha-fix-button-white-space-5898.1.2.tgz","fileCount":22,"unpackedSize":57854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWSi2CRA9TVsSAnZWagAAkQ4P/3F6bKl1TeosNwMr77s8\n1qiY9SdE6QWyWHwa7M3158uKvvZ0xvJ+9qe0sGfGz4SovBDjLMif9WYLObFv\njSCEsjXlSZyB87sUsFeU2Eo473V5LkpL3aS8ZdTF4DTVcKXbbIMze4+DOmrF\nRMbnxI8gxETyntcHnH7rj8sN1Pf0Pd2s/m0M/jKVnFsIZJOchP0Mz0eJsF+Y\nGZe+DIFQ4siCpFoybD2ueI28wijvI2aHpoBm09J+XOBhzMqfQO69Gafo03sC\nJKsMcxHxlXt+GLy50P9B0lEZCJ94aM7vNCZX5JSNkHsHy7pnWu8FsRZcGNKD\ny30RbFrjziVu7rg5rX1oX7EQ4Y+IHPbs6sY0AcdYYuKCEotsApCoaNHQ+yEy\nWiV5pRC6DCmcokzy6XYAbr2iRJTG1XL1IzOjB3CHFUuhciKGUq6KTUa+b7q/\nGfZUpSNzb8BPxqepI3IU1bVWkx3LmK9fda7dagbPVviqaK+GxKK2sv1en7Eo\noJibEEihnGWmzqEpF3R6el10PflM6E4ZRIrPYk+0aHpf74GZZVJKddStgnVj\nsv0xrkMwIuFHb5U486lxJ9hsRaKyKlZlvTYcoU8VeFEvHC5WN6Mh2ry56w73\ndkg7tCrH5S18AnooxH/dzyH70AgCIJ01HfCXxZaYVbNV0XIGwxGPbB/CiyvG\nJrZy\r\n=DHmf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD5LtUUfAv+3r7sfPPXJtJBbR0Rez57chNX1P03K67wQIgT732ZYrCcHXbv75R5Z8UXV/ImBI3kHoP+EzrGMS6OXU="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.2-alpha-fix-button-white-space-5898.1.2_1599678645962_0.4086678015619991"},"_hasShrinkwrap":false},"3.0.2":{"name":"@crave/farmblocks-sidenav","version":"3.0.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4","@crave/farmblocks-input-radio":"^3.5.7","@crave/farmblocks-modal":"^4.1.1","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"3142da0604d437ac2fac724f45578286f255ba86","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-FeQvs96FEGwdt19KIRmmvgfBQPi/TTcN6Xde8MEQtiweiZDQqVDaBCWdU6QQmRVJZJbyPzIwdFB5MqfzaZIWjA==","shasum":"ac06e6c17ada6a42d7d928c93230d2be44e39a16","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.2.tgz","fileCount":22,"unpackedSize":57971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWS4dCRA9TVsSAnZWagAAkRgQAJ4bWLCBZYd38+k1SNyW\nOqg/HzNHbdf6NKGYLjIIppkZrmlxZD3A/C7fvJWbE3fSpmxdZl4qk8E+Lx6V\naeDmAT3NA4NDpcTwZI1Uqb6E8+mAe1Mi7MIFN2bL8PBTbblCkw/c3H8NQIh9\niluHIw79J8cvm9UKheHX+jpDf52bBAIEuFaFNx1hi+OraWClmOP6yBRxk1pc\nnXgx75kl7aSIKxotOFhPIIWVdgVLDiIdrHckm1EGHKS+ulDE877PhHpPdQRj\nqBs4CqVlF4QUMAhauQvrjiBao+QtA90kkrtBJu4Up2g1nJqN0r0XlJY2sQOV\nCK0jZgciQ+fc00Ht8U7K6yvVn0dSnt9QioGM529O1zOhvB98TNhToZ3Sj/Ps\n+ECdbHofdie48xRDueyayYfGPCw/SWI9UbQW4DLZ08UGYkGQcuAtstpmKwjo\nFOF+LOrUgFYaCoWX85MWmkhDftyucPGdOztblny/4jNVmi+OSCv5xjdBjcCR\ntfV5FHYqi3SWyR20VAPd0Tt8KYYf4RtHICV56rMUiy/XW8JKyAmxy5IEYHUK\nswRXD8too/oqk/xTjPF4fXG0VUF9xaNcy5F5rFokyZiCaNT2IQu/VCZSHNTA\ng3IEm6uZaCBiV7g7mdmRfIDZhvggL4JVidgK4dxZB7la3ee31+M9tYipG0fs\nrT8L\r\n=DDX5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa4yhAuJAN75pWK/K1Aqqv3mRFQnvPVTQvzSxAHxCpsAIgY2WJqG9waH+ENFx+ZPU8kYFuEhDLILrGIkfoIwkREsI="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.2_1599680028872_0.5588578022684609"},"_hasShrinkwrap":false},"3.0.3-alpha-button-line-height-5901.1.2":{"name":"@crave/farmblocks-sidenav","version":"3.0.3-alpha-button-line-height-5901.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4","@crave/farmblocks-input-radio":"^3.5.7","@crave/farmblocks-modal":"^4.1.2-alpha-button-line-height-5901.1.2+afc0dfae","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"afc0dfaec408e9f6b57619a9f4f8de4bc0e2355d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.3-alpha-button-line-height-5901.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-qycVOU1Oshgi2fZ7L3bNJ5X/rYTEZ6rcWkiPp+LBDcsbkZiKu8cff4Hmd55IsGuCcMSIesLz+cHvvQj1drOrMA==","shasum":"9c84c13f5cbf3a308d1a74a9555bf90eb27e0add","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.3-alpha-button-line-height-5901.1.2.tgz","fileCount":22,"unpackedSize":58057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWhoVCRA9TVsSAnZWagAA+54P/Ap03ktT+I06E2cgSab3\nayEBn45W87qTmTrdRM0DkdvGIe6LwNZ5bqeu1uBlCSymtJnNDhRJmjopja4h\nBuumMbzkN1PM6x3s6/vx0+Db6FR7papBY9wZZSRRWwWbge2TROB+roaEbqIs\nWPH/cI43p0si/RAA/puhSKvP8YqHoX2JaA/7DylCzr8bxRhkJlAaN6prE7dF\nHAnjHCgdfYmae/LA2JAOzSZaQWcwQ337N0ouCdGv+wudWmM1mJ0G8hqAxLgs\n05rp0F7w7b3l7QedD5lGS9yCW54QrolnoDwHLcGqR/uV/S8rYgPmcMFm6pnG\nOZD4BxhbJkm3GwHNIsUzlEAwKEzIC/VtDYv8etuqE2+9M57vd9GBt3cBkQIf\naMAZDC3v23PsozY8oMKBLEE8rCmcWQekDu6OjvWEoTTh4QPGVHVfx3tv7cdF\n1F7qtsimzpc+ZtlCooHwH4bGcc5xkPRV8jhLlrYvkssqzYW+piQ0xGHuY994\nZCZ4OANzw/cZRQttwZo2S1rI2w+yATndrNEZhagiDXdd9yXvheRKO/yEazaX\nMx7yWFLFnzxFSAFPM29J6MxWGNsfV5krDAgkGUUc1Y3PIVKMovQNFL1u1d7v\n5INcdicfEVp5JaK2x1D8Ev04zzSWhIAoMOeGg30XLg8gpCcTo37zVG91LSpm\nl5bf\r\n=ElGq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOw1Pj0J3wHMsj7FD6iHqCum/+um91twmnIYYWeKN65wIhAJ6PdjmIuUBnokF+opOe+4VkX/MuIHK57+ktzKy7iuWO"}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.3-alpha-button-line-height-5901.1.2_1599740436833_0.1391695499709884"},"_hasShrinkwrap":false},"3.0.3":{"name":"@crave/farmblocks-sidenav","version":"3.0.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4","@crave/farmblocks-input-radio":"^3.5.7","@crave/farmblocks-modal":"^4.1.2","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"f4f0d5946372177aebc2d6e1568b3507040d1fcd","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-itbflB4iiPGi4jF2QJ/1dNmqdHZPsZE1w/Cnt+YM3/2jzml4pyYzW3bF7bIYswrsAGTlc9l/vkh6GeI3qk4HVA==","shasum":"d8fb69a88e47ec675db5ea8b2760a298074706c3","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.3.tgz","fileCount":22,"unpackedSize":58182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWiGnCRA9TVsSAnZWagAA9Y8P/1jHWh4cm/F2B799Wl1d\nJ2iI44O3kGRHlv9TLeWD8tgKCXW53fdLC0M8p2zkD6HfPkxk/bjZ75YEXjwH\ni/rA8up6t7OlUAEdm6cyGas0NuDxamNc4lReoYf7FUK2rukwQIemxkKzvuXD\n/4JqKMMrZoMdzeoqY45xXaIhg2rdwumuUKam9lGsKC3f/P5ePFw5Ji/rEm7Z\n0c9WtzBZmZY4idtO3mNEeAutywPmlKkQkq0CddOs228uxjlPdfT1j8j5P6iV\n+zsDn4kvjWLxw23usQm7Lxo79OTyE5xH8LQNXFgS+YurQB6fCRf7XGUrQUMg\ng2OC6r88T+7kHdjEN3LPg2HVcxKG3VwjUw8yRAj2GguS52ZxVf5EbYyzUMHu\n8M9Kr2/6LW76EWaLe6/x40GXSVON0TEN2x55hqfXjyk1YjxpR4Nvw9xqe53f\nK/rjcbdZ0Oy4Ona4IDMb7IWuomCkDx6Uo4DOWs+wlSW5aD8Nk1N7XZeOS/KB\nmy/NfCqrfiBfesmvXX32oowIfv4kwntBgQr8KTrfxsPDMGiVe0wrbJCaP5jD\nf5DIQm2stSn/bGq0Pj5dFgllqjVVQW+vP63aSdlkaeb5PQpwSLyXmssbwIeP\nVbm/TbB/y168i6xU/Uzy5+jg3jjaTpUbU0lJqdg4kC01NUOh+Bjv3ejveX0z\nKoqa\r\n=3shG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAxvrPA872qjX68uF4tA4TaDqSsxG0JB78vgVJ3x1+fAiBE5gD67ezvlAFVxC4yqUb4ZhjwymMJkInxrRpYvmTTNQ=="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.3_1599742375601_0.16471457471910123"},"_hasShrinkwrap":false},"3.0.4-alpha-modal-ssr-5906.1.1":{"name":"@crave/farmblocks-sidenav","version":"3.0.4-alpha-modal-ssr-5906.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4","@crave/farmblocks-input-radio":"^3.5.7","@crave/farmblocks-modal":"^4.1.3-alpha-modal-ssr-5906.1.1+77f053cb","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"77f053cb983fb2adc6d77f234f10b9d7c01736ef","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.4-alpha-modal-ssr-5906.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-6JCtIuYnB0N2J33b3Y+g0/6kbrccRg9pH/ChIC/YviFDaMmCVTljEovbSt80+m+9hK8LJDuDrue0wiHcyvuIWw==","shasum":"2d37caeac27c51b9f2e69a4c719dfc7415f9d09c","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.4-alpha-modal-ssr-5906.1.1.tgz","fileCount":22,"unpackedSize":58250,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbjokCRA9TVsSAnZWagAA844P/362+HhJ4cMtF1wVaVcw\n0Ix0WW6jIB1hIphbssbqB7iG4j1ugGzrb8elsUxpZK32HYiUK0QWZOqGeU8C\n5xaPnm+13KskdP149xK5T/ysw1Kt0gbPc4FIWFf3mALG5KZ6VI291hlRGfrX\neF31ZZ3E7sbneX06VL9flHFTkeLWn+gsiINMthTbRwX66nCfZoFk49V9GBkh\n7eXlWnqVllDXxeoOhykhqZ3+dUCH1+SLGfaqacxH5++YbScUUMKyyqiLOFGn\nwgp3JqhM2vdZKio+7wMMZt9tqUljXS2RZIeb/dkOnZ42agUy2DKY0qxBePZJ\nGY6zFI/nxl1fHht17P46tFJeMcxZzv3e+SISD7/ShEx9ceIyF9fqNnNXAutN\nZPtoJ2CXZFtpGj60ze/iO9T4PIOkLWmfG978qYIoP1pGdbjTp0aUEHa9Fbgs\n6J4N4dfDNmkchxra7NPjYrSrJ1H6HmKTuUeBBiwOSbVjjeS71TsCdtyqG6YK\nQul74BzV1w2NwHnhUHIV5wV0klDeT9SiTZeD1uOHYzRA49c8QzJHZYca5BWF\nL6uIohxzCtckZR5aTyr2ZygQmCzmK6eb/o0OiCtXS2odv52HQNShNsk4i5Si\nBcxVPXdp2zan4gXvCWrSuPpwHjd1sY64ABCgQrsPIt44Yy/5I8ZSin4xE6iu\nzi7s\r\n=plVK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmkSAQNxMUqHkpuFjkZJPJASlV7seDE5gAm65TbNR7YAiEA9prjXA/2FNKEuzsDni6q0Yrb7KZoIKvqCw/eMN9US8A="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.4-alpha-modal-ssr-5906.1.1_1601059364329_0.5406126669813451"},"_hasShrinkwrap":false},"3.0.4":{"name":"@crave/farmblocks-sidenav","version":"3.0.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.4","@crave/farmblocks-input-radio":"^3.5.7","@crave/farmblocks-modal":"^4.1.3","@crave/farmblocks-text":"^3.6.3","@crave/farmblocks-theme":"^1.10.0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"04062d7ef2541903899285fd33ea80514ebda79f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-co49hjeNyTagPtNrV/i7+qLSJ8lgQos7vyVFToQef5RMrYNzEz/ouj/DvXAtsAxxJomR4IoDyYaUPT+PAFLuKA==","shasum":"95b607e0a8e23df9db2e65fcfe6efac9d0513bc6","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.4.tgz","fileCount":22,"unpackedSize":58393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcdaFCRA9TVsSAnZWagAA8E4P/0YXJKYp/YYbIVG2zhcu\nAmVs33OTGrh4Tc1WprYd/e379fbuongNitbqlxOOuXSLv2mBWsj6PY1482QX\naiMVK7ZgX03Kr8gTiFcicKC3dP12dAImEoiiqlSFY+Qgx0who6jFy7Ggaf1e\nu6OzYJRdvvQIJW2yRewDgYzcjtyzuPQ1nPmWE0yYLHgMsbDk/vHnbLdiREMx\n/gfNfDLOURsjnmLs6AwFM6yxW8tSR8gtLLIWvJMLy2Ez4OTrsW19kcEIurK/\nZ8JIUGIZbXGrlak/Kf/hscBTmRtWPEJ8FpxSC/bPy44ytEJvBUIvA93FjyEm\nxHxx4Lf/voVp16MWlWksPrXrbZuV9OtETi4JMzNdHV44+ZhmYTSeCfQxpqOc\nDml56H15EH/6tmB8dVj5DYlp/1dNv25wHj++7p4MgMYtkY5mwtX5bW3bCKuB\nmxFS6hFr4HoyO/w5jFshjVVsOUqknGL1RWHyQbfDpuL1ttLb1E8J4frZz3M/\nz/7cJ2j4L555rElW75DkzNGydApUDiPuLz5gpCahVqGotpcHRODszPLjam4q\nChfBFzAkT8IMof/OHSlWTAPa/f6eCvE8noR9q3XUtMAWzZGrTOXe/GUCQBMI\nMmeZRV8LKulUrS1Harh3u4HzwQ4rxhPZHCrtJYRgy5moi8o6M88fKo88+ORB\nV2Km\r\n=9a5Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBs073JVDMNDnQnHpC6o2r95wqa9d6rs5D6MaqHlulRkAiEAgYmjo8HpMiN2kmgvrJ1epe8X28QUH4wPiSkL4HiNA0w="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.4_1601296004591_0.5753132249784045"},"_hasShrinkwrap":false},"3.0.5-alpha-esmodules-5917.1.6":{"name":"@crave/farmblocks-sidenav","version":"3.0.5-alpha-esmodules-5917.1.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5-alpha-esmodules-5917.1.15+fba2e8e1","@crave/farmblocks-input-radio":"^3.5.8-alpha-esmodules-5917.1.15+fba2e8e1","@crave/farmblocks-modal":"^4.1.4-alpha-esmodules-5917.1.6+fba2e8e1","@crave/farmblocks-text":"^3.6.4-alpha-esmodules-5917.1.15+fba2e8e1","@crave/farmblocks-theme":"^1.10.1-alpha-esmodules-5917.1.15+fba2e8e1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"fba2e8e1c6303f559cbf01d9cb3d038c18b455ca","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.5-alpha-esmodules-5917.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-BaGH/SPz32XB2xMwER0FJyPeo2+qDCyQz/KPCE6hOvaalhWeLW/z88VUjjBBE0rlZJ2xM87F7ZN7M+zlhz+Nbw==","shasum":"d7165e7a5f2c8d78d14098ad7370961ebf84bf48","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.5-alpha-esmodules-5917.1.6.tgz","fileCount":22,"unpackedSize":35685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhw8yCRA9TVsSAnZWagAAQrEP/A+FBmP94DqWg8pSyP2T\n52+DR0q2EXov1UWSYVUiOB7wgJSS5Ztvld9eva4+0MySztFQaty7nE5Xn3oS\nJDOdcwp4OHF43g0UjTDa0DDsCibVwqIgOiiOKUNF0lc9ch5k/wk84MKfFork\nHGPZ7UksXfhUJc78QbWMzzWhzhAVcHCM6jrHR7KQshV/ijH5cTDg7KEPOHhT\nziGIVr8MqmumVGssatwVtQ05n9jiLARYFEkuMpxFqDfGUoM/9JLIHw5/N794\nf8UTy7zX3Ebtvo9Phmj7cjTTEpokGwWzJbacDd1vJNhh/6EpjFVxxSwcdTfz\nWba+h4oWy6Ps26a52kcwyeIPu+Y+S4uzeH8v/wr6vOGlgPMyokSOuWqClOgV\nvauVBMVlWRBfCzu3eqEA4BP2EokBnU/fnkBg1UVT00xsWofLjH+IPo2GzyXE\n/6VUeLX5rB9TfZal5qO14L8Ri0eexWUz/wiS1IetyuYEPrMUWMfnPOgZ8uJl\n3Hdl3pUSYtcjy3J+BWTj8O8KbAPlJSWvJh7oF68QkbjWb1//GH7EKhgQSPJ/\nxjPYpKUTkWso4VKaQE1u0oqh+qT30DBrK3r/oHSuBvJfEKpAKZYLxw7mDbte\nStsEjfOsE3ENRmdlLxKMRV681urYC+yzrH2HftO/MX4Wv4a9C2UOy3XF2Qx6\n+D8i\r\n=AE7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCCYqK5mI+oJbs4YK4eQzUsCaa5PUuDusUELCc4x3qaQIhAKHTTNb9Syb5whlUg6VbbZr6ddyNNYydk4fM4NgiAUTW"}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.5-alpha-esmodules-5917.1.6_1602686769907_0.27959627180592306"},"_hasShrinkwrap":false},"3.0.5-alpha-esmodules-5921.1.7":{"name":"@crave/farmblocks-sidenav","version":"3.0.5-alpha-esmodules-5921.1.7","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5-alpha-esmodules-5921.1.16+70d2ded0","@crave/farmblocks-input-radio":"^3.5.8-alpha-esmodules-5921.1.16+70d2ded0","@crave/farmblocks-modal":"^4.1.4-alpha-esmodules-5921.1.7+70d2ded0","@crave/farmblocks-text":"^3.6.4-alpha-esmodules-5921.1.16+70d2ded0","@crave/farmblocks-theme":"^1.10.1-alpha-esmodules-5921.1.16+70d2ded0","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"70d2ded0f0da8165b6c1fe00ba671ff9d0a9e0d1","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.5-alpha-esmodules-5921.1.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/nZxMOQjmHh2jzW9ZLfQW8cLVEEtPUkkjLpPLBsD4ZK9hfa2PPYuF1gHx2GLWtXsl75gdGU3NMtGthvUTturmw==","shasum":"d35df5a9707236f27049dedb6be30c8b1d73105d","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.5-alpha-esmodules-5921.1.7.tgz","fileCount":22,"unpackedSize":35685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiE8CCRA9TVsSAnZWagAAC+kP/35UYXgePgDTLiG8maWI\nPyzrSdnmSe96/WZ7e5zgIJl9lVxGyW8VGhzfaC+2UBCIW6FDYxN7gaypLR9D\ncBxs4IYMy70TSlj2xhidzg/5VT7nGGX+9iLPk9nRHla71dd2i/gl0Yk+vRWF\n7gtFCuMpd/IPJMwy+uYicqmQ9jYhVbzN458RHcDr08EZPt7EHawGeyj8BJBg\nSqKRXIwa50/+Fa5ZIAqYpy4VMNt/unnEj3t090c6u+h+//fkLyhUed5/Stub\ncMFy+s/vm8Wbu2eFKCWkjWLoF68M+Xus3Y4t2hw9jSXn+6AZY1ynATEy+En7\n9f2kBIyY5dKvVJnegWowEO5lT2yedm//dg0azLlkMn/OA5IUNlSmCMWHR4Wr\nGhVbZSGEWSlUdNcG5o/+zd4rfG7Ti4z6AMdyhrlzXfJ7GIMj81uJmPGK3s9B\npgUYrjmeOqgfkMWwWWxtSzaAFA61TmyyRL2QJ3Fqi91z67Pp5PDi7+0/B/tc\nXW2rcF3TSyI3BtOIQhvIao6wUTBYgI0AYMT691cfkpX4l/CibFcAQ+HWryPl\ndg2vtXIjz7WgaG5ipSgaBfETQhJfNii3hZ6n+JAlNiEHaWEsaD53gZFusGdX\nm3R1P1J7nAJFLlWU6tqLW0C0nuA7gBB/VOVn3ylLZkJY32Nyvdh312+q4srY\nSzI7\r\n=Gsvj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaPW3YwvzpP6QCwHAJPvpzkxhtmHgnOy6LAhR3X9u45wIgGn+zZclyaTUTDt7XcIjarBOcJ4mUoRRtQf9R2P1iZ2s="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.5-alpha-esmodules-5921.1.7_1602768641587_0.5363939434451392"},"_hasShrinkwrap":false},"3.0.5-alpha-esmodules-5925.1.6":{"name":"@crave/farmblocks-sidenav","version":"3.0.5-alpha-esmodules-5925.1.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5-alpha-esmodules-5925.1.15+b26b4097","@crave/farmblocks-input-radio":"^3.5.8-alpha-esmodules-5925.1.15+b26b4097","@crave/farmblocks-modal":"^4.1.4-alpha-esmodules-5925.1.6+b26b4097","@crave/farmblocks-text":"^3.6.4-alpha-esmodules-5925.1.15+b26b4097","@crave/farmblocks-theme":"^1.10.1-alpha-esmodules-5925.1.15+b26b4097","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"b26b40974c07b25d7e73cb336962a061a93f02eb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.5-alpha-esmodules-5925.1.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-cVCQklAMZ/GuwKh0sLXCKgeb3UcvY988yZbl0IbicgtTdsZTsm4wzxYzktlQCKnNRmiZm7vkgMAvVuG5yxSCFg==","shasum":"569d060b9db5aef20d0a56b3b8e9b1a2ce413cd8","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.5-alpha-esmodules-5925.1.6.tgz","fileCount":22,"unpackedSize":35685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkH3PCRA9TVsSAnZWagAA3X8P/09dhR9IerdLRXOG90x9\ndCyfYO0WpMr+CbtAvbnIPjt0IjuuFCBcdKGbRTMJBixOUarvSqaq1+Z+PfgE\n9P2Q9TdKiJCv25xDu8qY/90ZezFPR0SiXg1EbC9Xyyc6raq28ZU1usZJKW1p\n+qIoI59zQvWQxkcWBYV9ufcP+qQxHuEYcsm0B/5QBSFvA+2p2PzTeIoHUD7/\nn15lj84+pnkfkgNPBbUeuki5bigNjcbJbb98i5F2CZnUhZ/MYewmLAY2HgN5\nQxvCq4OaRUXA3RNa8iFTMClOuCypGM5S+XvXIwXJ13cEOXIuMNtwP/VS5Ztw\n0DjoSSnIf6hlncUmCdMX4FqxgLvUWt4oLxsMV3Cf6BItjouNAjTU3lhuZvXC\nPaWpLhdzmM+5BmRuIEtZzlhF4+4ZCu+tLx3z5LxhCQVjr7CDu5Sl1Jq5+c7/\nDUBeooDDZXT1mmp2sww40nS+V0r8tKkV9/0y2j4qsMJi3eFH5v3QHMjVycp3\nT1R7TItvS8aCxU9gVmF0D1i7TiP5utI8KTKh5Z/RaGD5dUhVIArehHqhZQMr\ndVjOfTJB7z5dtSYd8p1+dI/+gomxHPP+E0jd74YUnbXDECj1ZsC9v1JRf0+7\nzHJBXRYeimDnqEObUtg2PET10CvkSB1wBBVbcqrLEKQ9fE3HEY8iOppeee6j\nVf6o\r\n=vnHh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdPLSOpTDGEaU56wDtw5BWNTFbnAWzVR+W7jt0zTyhqwIgYCjuNmWTKXZEq/HJak7aUX8qTUEfgHuFlJTiRSeSQY4="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.5-alpha-esmodules-5925.1.6_1603304911308_0.5987033674762405"},"_hasShrinkwrap":false},"3.0.5":{"name":"@crave/farmblocks-sidenav","version":"3.0.5","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.5.8","@crave/farmblocks-modal":"^4.1.4","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"2ae9bc148a9cfe2a81cb52e32130cfb3a4cfbfc9","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-0kR+sYzvt4ba5zjis3FHpf1qrvlCJwJa7+QKxMRioCnewWHpQHWWkxbLyt26oKI4Cv67KjCUy7On2r/QhbblDQ==","shasum":"515976098e4dc17754a4e4bad8108b664cd1f09a","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.5.tgz","fileCount":22,"unpackedSize":35688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkIv6CRA9TVsSAnZWagAAOdkP/A8GWkanNRaWgLihKzlE\n0DqZiiub02ITleTWBZVIkP8P0uFyPaG4yBtZaF9xKLrSheyzRQDPlojVodpe\nsE1OXYol7L5YamVSLXUHLSKV5fNx4ZWhhfHaHW8asj994c6rfMH2ZNrqDK/0\nnhDSjGm4JFAokpNfVfnJMmKsYp3BrBflPKC+/aeiXa+RkAZS3rIieKY+jwvs\nts1Vu7CusRnolNxOOnS155Vy3sHyixXzoQz++u7qgFgTy/DbTxo58SzxUJyh\nwFSelTouta6AY1uvg6CyFZNTceOCtYsGPcz4L9TRmOqMqYRbnue2pkqndGbb\nnwAzYb70HzqnReg97lZ6zzCA93nFGQR/Qydd9adcPcmed3mv1pe5sElDEUBg\nesxekig+mukeaXaAwiDUqlYUvq3pAfKlIE4pBwHWIiqsMpQLBM+HLsdGIPOk\ncKbxX134f+zOxWIohDpEu0jaXb1LBLxdb6LCiI+uojyeqIF/UVMmoQQgKCRX\nk2I5Q1Fc0jKW2G3IO3G5RRjkud3+L/5aq3sbdmV/YWphDkq94SXFGmBohI04\nylsBtpunK9hxzZzwcEl5fw5cL5kLaBL20cIBbWOZOFiFhN7ptsnZOOgUpQSV\nakJydKbOCwKP97JQaDVgPvhwAtn8d/vmLFo9Pl1chYUBh39dA9oMU7wlMowX\naWt6\r\n=il7s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGh6m5l/ysJG0hg4peaOl+cL353MTS+v3a7exyv6/R9SAiEAjfCXvPkm1It1nvrfYOta+r0URnVzCGICetwTdI6Ttcs="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.5_1603308538359_0.6187306711625749"},"_hasShrinkwrap":false},"3.0.6-alpha-icon-publish-5935.1.5":{"name":"@crave/farmblocks-sidenav","version":"3.0.6-alpha-icon-publish-5935.1.5","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.6-alpha-icon-publish-5935.1.5+867e408f","@crave/farmblocks-input-radio":"^3.5.9-alpha-icon-publish-5935.1.5+867e408f","@crave/farmblocks-modal":"^4.1.5-alpha-icon-publish-5935.1.5+867e408f","@crave/farmblocks-text":"^3.6.5-alpha-icon-publish-5935.1.5+867e408f","@crave/farmblocks-theme":"^1.10.2-alpha-icon-publish-5935.1.5+867e408f","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"867e408f76f049072ac6b6512868005b088f3ec1","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.6-alpha-icon-publish-5935.1.5","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-p6GohxUpoYj4o6ilStjczXk097DMXpmBV2exGb0oTIz8TeS7vsjnANivUs662M3/FohXhV1bLb3tGnwJvBTBvg==","shasum":"0f5243e057402f144c89b9903ff0d1ae30f3de31","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.6-alpha-icon-publish-5935.1.5.tgz","fileCount":22,"unpackedSize":35910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmq6yCRA9TVsSAnZWagAAj9gP/iPrhU2RUuqhr6AlTvhC\nqanMi0BtdnTuRJl8DBCIv4ykWnFCEDpZ++zq17It3+M6Svc++HXJU2mltIBd\nsNKvOrbh3MVWpefrZv/EUEPpDxKrwV4boVap0ZJHmrsjUAVii7zZ0HwPBcoz\nmIKLqg4ICRpEqGjgTZ7K88dyJASJfM9hGyteirsFOIXG5EQ0P91osLeyi+fw\n7hs9GtiaHLkbkFQbu8oKntP2ydipLNYkK+snE3i7BbAuA4/TxdG004pHqxsO\nw/lIh7vh22h9sB0LwXCDbUoCu8v70+j2Jlx7qWFYzm6yRgO8ZIicYxlQsuNz\njA0dJgmjztuHun0FzS7Eeu1rp8faskdkxWGpkkHWXrfTMmz911mOhOSIRgFz\nzZMD3ld19YT7MozS01Kb+SS/Fim+kMkMKoCXfCc+92aIAPWmmmAzVSNu4d6G\nhc2Gyn3Dbm4fgu3elU9saGJPwoaau+C1jajomRSvh89NNIgrrYWzM2Q2X0QB\nzIOQ4t4J+6PVytVVE22IeAXnrC9Bq3yyTGDl/Lokg9OK4yidEQF3pAaNOOre\nMUWaI7Gbz+grN5usimneQvk+J0/ldIds9worrF19xSFRjKD2eadz4vWP69DG\nXnVAz2P7OlFXL7lhIJeN7PucPgPgXDFTVYy9IsA8G6TjDuR2pF+uHsoukG/Y\nmPaY\r\n=hpoT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDooe5TAqr1SbFKSz8CQvx+oK0uHiO0oQi3x71oBwpJ0AIgLdkBmqunh9Ow5vFUWquFjMm+f7PDfZvTmXwsu5O/7aE="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.6-alpha-icon-publish-5935.1.5_1603972785686_0.5264333521732631"},"_hasShrinkwrap":false},"3.0.6":{"name":"@crave/farmblocks-sidenav","version":"3.0.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.5.8","@crave/farmblocks-modal":"^4.1.5","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"82e001ed74484daf52957946b6e4a022cbff24e9","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-j5nYcVt/aA3v/sfVbVw/01YsZe1N9o6c2gKAY+ub/vVKec2buNt6vbHlnrS78XOnfYkYCRfSUReBRDTnYXRF2Q==","shasum":"cca7009858de5d9c96d4b24973b864d8ef00bd89","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.6.tgz","fileCount":22,"unpackedSize":35899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfms+wCRA9TVsSAnZWagAAQyUP/0R7r/X4zZJHn0DLwewN\nm4Ov3JurYPjOTjDT5RqAfwqAVdeWo0zdeiaFDBSNXDFAio0eSonDQAT18Xcn\nKpaktur3IUPu3YYPEZIbBxAQNTTPEohSIcFtt/26+ah9zusRMVFdqlyfXkVn\nl4Qeg/8TcAW0VcwG9DyDPdbspQXi+PTgax8JjpRIRKBIdzYpqZybOeg8yXmH\nXHLxC1+P4Ns1buw1/4CENLeJVwkE6k8vYFlFRcYHHRMQiC6BdjPn8S/vaQeT\nu90GXcUP+84d37jzWkYup2rUj6xz925kxXEAjeAnXcFOpgjc+a4Sq0hSxPyd\nxBt+us4s6xs+G03LQKj4IJTEJq2vPuaJJ2QUscDFzTZhD7VFL69VYWSEj3mt\n7RmKev6Siz7HpfDxzf2eClYQZ0Wr03V7wFCEhs6ZlA/n5401ZLJWoCdQnqq9\nWNJWqkDKWmatQvK7YW+lRPhIxbPYli9j40Dp40o1czjyvM90ecdLrDOzqLDI\nfGKrC8vhGYVn/mJIZNcjZ42Z0BkhE3ZcEiQIYbPD2f54cQSYmtky0XDH9Fjk\n6JgneXg/2znuOtWahKF0FyqYE9S1xyCwgpkEkrytA+aJl5qzZshRykrUZZcM\n08l7twGvJfxEe2pLX3p6f/61Xzz4/kMLC+2a79nWr3jeQcYXHX9AhKHIH8Mk\ne924\r\n=XQOR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxGGknRraxpJfa0r0IF/x71DLkZ4mkMPIJcg8ibrELcAiEA2HDWAg8ie2yQbVADmwP97QK+vUW1pqIRczMjZtMSW4Q="}]},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.6_1603981231692_0.02656574863107597"},"_hasShrinkwrap":false},"3.0.7-alpha-table-redesign-manual-1.8":{"name":"@crave/farmblocks-sidenav","version":"3.0.7-alpha-table-redesign-manual-1.8","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.6-alpha-table-redesign-manual-1.11+93fa0935","@crave/farmblocks-input-radio":"^3.5.9-alpha-table-redesign-manual-1.11+93fa0935","@crave/farmblocks-modal":"^4.1.6-alpha-table-redesign-manual-1.8+93fa0935","@crave/farmblocks-text":"^3.6.5-alpha-table-redesign-manual-1.11+93fa0935","@crave/farmblocks-theme":"^1.10.2-alpha-table-redesign-manual-1.11+93fa0935","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"93fa09359d4f4108a68b5c1b5dc04bc65e8d4000","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.7-alpha-table-redesign-manual-1.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-WyFpnKfJDA2S2JuUDb6c/6kiRkj/uWxTTa1UI/ixMiiaXuHU+Z5aC6mhsqMBTolKEuid6u8qlBEkttZuOoS95Q==","shasum":"10f412271d55faaad293b0a96b36769c41f9562e","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.7-alpha-table-redesign-manual-1.8.tgz","fileCount":22,"unpackedSize":36149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCXA4CRA9TVsSAnZWagAA6K8P/RuLe+fkZFetAD1Y63+N\nbOI6/8awS02ahHR+4EuMaZH6WucGZWJwkadxeLNeQiAuOukhHHqZFiT9my7/\nWVey5uSQYH5wWnK7ONUtuuAapewDWY2MF6xSuIZW7o1XXLcHlZGJjKDYpuRT\n3rzctjnRy5kTaj+yk0+xiX6iEYmMxb/btnWF2N9z6PkMvQo7ISKtxudcS5bn\n0ZrRDhge8kqsJ3NefVE+yuNO54rHKHFEwv+TJPr5UT1wlSK36vhW+hoss6Je\nAJoUwweQKUl/hg9z2r/6Aruk5/g3jxXMd4Rwm41NRAa/Q8z38kufhmUwQo0U\nw3KpxWcYNDCnofQMH5lgwAa9dvxoIGFm6PMPT+A0Shp3MkyWseJE2y17KoWC\nvIKxe+Bdr/tGcm/7y5CX5TZjogv85tsmyhEBfCZZjY2bzJ0fniEa6kUSEuDP\nRHSpEYaAgjn9OxcxXA4w6uj/TGEM7bikgEi5w9t37FM6Szi8o3jT9EMMnKfm\nv1XexYKhD78qsLmaZg6O8gU8drVLo96sFbQYUhpxH9vx5cNo7kj5CtN2gkbZ\ny/jl58Ryv3leDsnjnEcbalA5CzIK/a0C1mAys7bDy1I6hNkI3QizpG/Y7vte\nfsSSmlPsXkVB3W0sC1+7CjduXtCCQW2zOiEWCKSb/cXYQDsklpJsZc4SVD1A\nUgW2\r\n=yNh0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAjvqyz4PJyjwduODbMMceZ4bEUx75GlVB9VhaNGUV/3AiEAu8u5rQwv+lcMHLKC9+bZPx05Iljumz/eZDQtQT/nSpo="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.7-alpha-table-redesign-manual-1.8_1611231287780_0.4474549455689716"},"_hasShrinkwrap":false},"3.0.7-alpha-modal-adjusts-5972.1.18":{"name":"@crave/farmblocks-sidenav","version":"3.0.7-alpha-modal-adjusts-5972.1.18","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.5.8","@crave/farmblocks-modal":"^4.1.6-alpha-modal-adjusts-5972.1.18+66bf7307","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"66bf7307f55762a14a0795bae64f175e9e946cba","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.7-alpha-modal-adjusts-5972.1.18","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-uMMI899Sxb9k0llrhb1j29wM4Gsp2PWKYPOtSIm1eA3nHAnHCLFKmABV2NzI6dyzQ/AmOeQVTwwsVo5gcRv2Lw==","shasum":"31ffcb396a76d45a8aab4c276c961d7345c32656","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.7-alpha-modal-adjusts-5972.1.18.tgz","fileCount":22,"unpackedSize":35977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIpReCRA9TVsSAnZWagAArD4QAJ9CRwKVvO9pC1DVAV8a\n0oWtvZH8l/dd5gApi0eL3JOHTCByrjbaN+fybE/tdTZWHi0JEpLH+k0L02+O\nZBL8CG6V0e3ByTN96oY2y8VfiIsjN+JkcagJcrwI4fn0hU3UuceI6EHwxIFC\n/hqCAxxKTnF2Gph5C4+0ept1D99yfW/ApHXCOY4buib9b3hlf8K+8VqHr8mQ\nEDDNr+xJu6aPnRqdkq22mM8UzWEMCQGaDkTGZQANJdpxy/eD4wg4EoOVU93v\noKL9c1K6P/+jXcLfOQMfncWs0AHm09qzEdkg1MVKkon09IjCbsXzDx6Wa9cO\nDahYJ9UxQ1dYhVpCLftSHIKhSxCQO+My/97nkeHiHNUJ5AhqZ+kAuMyKfycn\nxedcdUOvUAIPtFD6AUYVueJQ7sRoxuvuNBUvwladVOMJo37qksJVoTmxLVmW\nBZ6cLZkknWpbd8SwliuZq9s4P7hAYfFmYUnvX7CMB63VyoAGlKZqZCSf+3/c\ngvec3o7u0KJU+Vn0e4xvjql9G+OCEvhE6FvHuySdn5RzASoVxF4Hfaqe8nVU\nqABnkKbbHJxYXgUUc5f97NaheeMk8qvMXtw9mkj4W5/pj2xJpivHfozeagvv\naaP6P28enOgqv+/xsdm/890e8fZlVr8DkZBHnCU7p2a5+bGKBoNBxOrTjuoi\nyqJ2\r\n=+Qfy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRhkeBSrFdYSxyAzjDprrwg8Vup2al2D/6awGOG9nCGwIhANGUVvTtIxDL6cu9U7lWBq4Xss4h/xGGhuauxbPUb6h+"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.7-alpha-modal-adjusts-5972.1.18_1612878941845_0.5678522248625171"},"_hasShrinkwrap":false},"3.0.7-alpha-modal-adjusts-5973.1.20":{"name":"@crave/farmblocks-sidenav","version":"3.0.7-alpha-modal-adjusts-5973.1.20","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.5.9-alpha-modal-adjusts-5973.1.23+5f067230","@crave/farmblocks-modal":"^4.1.5","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"5f067230e94d471f6e2c13661f65ccf4ce3d6ebb","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.7-alpha-modal-adjusts-5973.1.20","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-F8TfFywmwe0M7Ix+SS6DkZxEBc8g6dZGJ/BoV2Df8VyJ3KawebvUBx6OvzUB3lKAehfvuvLPo6NB1obR/yjaAw==","shasum":"89e92d9c8684bcfd91e77d839db277c07815c6e0","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.7-alpha-modal-adjusts-5973.1.20.tgz","fileCount":22,"unpackedSize":35977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIqfzCRA9TVsSAnZWagAApgoP/36K1nfBWEqUG8+yB76k\nFBGmFY2B1LprQmJ0N/7XJWV+F9XwjLGiBlVIUyLhmo5E5C+nIz26WAlkn8jc\nRnoqJiPdwrjStJhPO+/Fwuo4jddB5Jc8hhPg0lOdw61+BVtVms7wfi9Heyyx\nzs3zYCSs3Dsh5y+uRYQoF0DHKu3dUq2g/z88QgYLJ2e/Nu1Wsi5QYqCjFZxa\nF5gOdaUCMtu1UdCn2M7DETERyl8iHO3G4S/t/5Tm4gLr/qZIyJsdjtdhUKip\nXGQ0i6KTyabbkbN+fAvqWBRehVcEWjMklczr4wqoeQO7x6gb0HU8fp16FH7G\n6KDIr4Kazc6Ep5GgjDpjgQ7snjK0YE25JwgI1zBhjMBEy7qpJOQJDayZQqlF\nyr404u0CUt5jnXUuFnw3uQ78HNikrAIXZQDIABG1CviIbEVa0AT1wzilgEOl\nLatwqH+wyLemI3DRugG7PtVEBmZIhMtpeVmqo+KvTdeiI8zReRszpZLOzMGp\nFGPN/0beOj8fKf44cHr96h7+D2T8DkYogc9VP2qMjz53OzDWG5oUdnCmjgk7\nJMJX4fS1atGz8hbntfrFV1COI2WBDA2cfcP+as9P80GX9BogGhQ3WvLZ2luH\nt+K6t2aZZQ3ll3xS+/saXnxYGBunHTNYUf3CAOU8p7NU9h05bTtXWFqq2HdF\nJG3C\r\n=I4NZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGyRH31xgoSia9ZAhd+CZ89hTQ0dMHPlZ/S4aIhQNnJQIgZQwU7u2epOf14WLl1w0nKt5p/hQkUlneaDJB4kmDr24="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.7-alpha-modal-adjusts-5973.1.20_1612883955372_0.5645406373558515"},"_hasShrinkwrap":false},"3.0.7-alpha-modal-adjusts-5974.1.19":{"name":"@crave/farmblocks-sidenav","version":"3.0.7-alpha-modal-adjusts-5974.1.19","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.5.9-alpha-modal-adjusts-5974.1.22+2ec9d5f4","@crave/farmblocks-modal":"^4.1.6-alpha-modal-adjusts-5974.1.19+2ec9d5f4","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"2ec9d5f4090c68d952d0983de89f1310cb441ef2","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.7-alpha-modal-adjusts-5974.1.19","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-lM+0r2+qi9Yf8eKo8rdk0HjexCLsQ3/jjLII/pG7Rxm7i+dVQdKDmSqiKAvakiZoFG1iEV/bHxmyUrf/vQmxAg==","shasum":"eb34162d298f8fcc2098327c54fb22151be0f084","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.7-alpha-modal-adjusts-5974.1.19.tgz","fileCount":22,"unpackedSize":36016,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIulbCRA9TVsSAnZWagAA4/EP/3v5mbJFfCByiQvGr7no\nz+v1MyjKkUydteMf977cSqAXOL6n0ys6HlTRI9PRPcJurzf2lPfAUVMJPA3b\nALnhBetm/8gAb/a6pZ7ccJXgu7c1+VZ6gGJhXE68lde1LCftqt9SzpGcgWuM\noV1qACMH+HqNGYylW6WLZs5DQ84XbHL5LqWp+Ek0dbamwE5xEhGwtLf6SmdA\n2Gp1PiuaqagmputVkhZE0z/7sU9042/8L2MPB2/LOmFbmEn3jw5zUYEdHnuB\nLS9DsrwojXv7cUHg8E9TJhDVmb0YPD/Lj9E4cyHrIzskk+0KZ0/I0ckx/7nX\n9JXIT8aDjT1c/JZjHU6y1GUQZsV25JmQrmi975VyWfKSb/OHPu3tM2EW6qDO\ndK1YRObLrPFAlrF6IVuQHOKFcupz6M9ICbTIhBvtnkzqu8Kpw/mKsZl7OFxf\nNjLKghN/l0D/Sj01qKMcZik9xMm2rfbhLkuA5MtPmEMZ5A6x3A7k4vKJBEiq\n0+jfuH+OjGGY/qbZEfJiqxMA1E2tL6zqFDrx7P0DUeBJI7FYOS4J0LgbrNkK\nggp6Arf/JrN906v6rK0GG90H9h00Bpr8jpOY6IUUO7Idz8WxiAR4fBFHDzI/\nB0h8PplyADZ1jnnU2DUxQezzexe7JL6INxKW5Zb7JuNfkTXOQOTRLVNC1vIQ\nmom+\r\n=U/hE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD8kXZWSKj07LKzLBZ4Ltc4r2fy4XiuycjttEQ4Q2YBgIhAIpYc/1aiXIJeeQIuqwxSAT52sgLR8D1XuKEj6bzf0z/"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.7-alpha-modal-adjusts-5974.1.19_1612900699081_0.5632489837697561"},"_hasShrinkwrap":false},"3.0.7":{"name":"@crave/farmblocks-sidenav","version":"3.0.7","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.0","@crave/farmblocks-modal":"^4.1.6","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"616891eba51c45743cab3929448ac87911d10b7a","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.7","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-wEx8GGWHZ+SshuhJxG1xv9LMDe0i1rEFDSL7jvqGIofYXi6vV9sRdm3rSvsPsEjwAucRJEAaRwuWl2cZAcMJuw==","shasum":"f7fcd1e0970b0033b464485ef1208e6539209236","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.7.tgz","fileCount":22,"unpackedSize":36110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgI+tWCRA9TVsSAnZWagAA8L8P/Azc87a9K/ALmE3Bh3qx\nH8O8tqCYBOSq/FJJ3/uL9BdTi0TS89xBzp30AcRzdfdy3wtEjZlc2VPyfUe6\n6Olgvpzpsn+icky2FQ7PBUsZPSkQH3EKQKsVZeI5MKUJ+VK7sqvLC8RJxvRI\n1VGLHVRudP9lt4024uJuDlgHI5lYT3X4WhO680gDIRp/gDYN4337XD4gIpW+\nKZQ64zjZCqouqZNmnEbCweqnMxe6KUqMB1uSHl2Cwm6pGibIGX9vMvBM1esy\nb/WuVMtTAWcCSUdkfbFuhiq8T2Q3UYkwRf1niDxHkTPtd6+6RO5y3rWoTMEM\nBVaB7GVW6BaQo2pB9a2iTKo2jW5YTMQqmCHN4dpD2YyRGdtbNx/T6z4WjrLV\nHvgffntTKMACwQLlrGsxfUiT+a0uEVHzL9IHLiazC0ACCtUV0aHl/vrTIkwa\nbV10NpBLUpdKeesMyn0wnAUnjRYJZgaRLZRcQV1TyGsfKdUWXjnl3l4wyhC5\n2us2eoFAvg/PDyHWAjmAxlAUVZSmJJb6dGv89uqZdToKJhihhypQpQdF2yDl\nzwUbJgP9YW43Y65pShUy14UebQIbJqRhr9v3YAKSVQryGO6ZB8+6vC6W7mfz\ntvUBOHCUILS8plt0IUcxQsqX/j8hojtvb6zCFB04CMxIrOIV9bCIHTrqxFQ3\nC66P\r\n=RDjf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+hbgyXIyy4+DCRZvdE3It220KbyemuRW2M7ZgD413rAiBB2JJA8b3JhCLA75KEr3hvQqfbbOCkt4qc30aogSHRlQ=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.7_1612966742356_0.04403069807702997"},"_hasShrinkwrap":false},"3.0.8-alpha-fix-empty-state-proptype-5977.1.1":{"name":"@crave/farmblocks-sidenav","version":"3.0.8-alpha-fix-empty-state-proptype-5977.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.0","@crave/farmblocks-modal":"^4.1.7-alpha-fix-empty-state-proptype-5977.1.1+7e86e63c","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"7e86e63c5183247b98851b47978ec860df75b4a3","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.8-alpha-fix-empty-state-proptype-5977.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-SBT4ASfnvLiU2pT+VoW5Rk1ByiXQFn+CEK2FyRDoBMjUgK4TZcOD73hxLIS3WiICp5FsY99l1VHoxDnsfVQCXA==","shasum":"da05fd16e1d3889feca007d5b16d50014c9a0b53","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.8-alpha-fix-empty-state-proptype-5977.1.1.tgz","fileCount":22,"unpackedSize":36208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJE7kCRA9TVsSAnZWagAANVYQAKOvjnn7++ej7E7aNlCS\nFV6GsQ6qIH+bTi4vrGw4rLgaKD7jcFheua2pNdKAI14HbX8aOcNUHBcbLdRX\n08WA/+/XRKKkkF8nqE/NR2mMVDrkGJR39E/hW9X2Z4j2c6mqyK+vJvTIDUS9\nKz+zsWQC2ZCGs1FVVyVhU4DB0qW1PUuWH0fTlFX6CsGLlvcik+V7fceLhKN6\nv7K43EsM7A2nKqwZrN+kecfC1Vzulxp/aHMkvCyBjyPnSLoxN8vJo0SsCJ+7\nqHndLdaz7Tnycx3l0vZGWM4FdKCkF3ZFqlkasxAVVBTd3nTRMNWc6UxF47So\nLb0ewowByHpsPFarNJZPp3iBrIsv/kyY1L3yLWaIPedMAczwSfMhWv6RSDDD\nD6I/ExGQ0uvqkY6J7eVHRX1u9Q0YQBocE6JNy361w8i5LqJ1U4VL+h86dEJ6\nc44BYtCLyqYD8pPOOY0+CADB92vu5oGHcCMEHcmZtX2T4wigvR168XYAr5Wr\n70eHZ/mpjOdgPvgZrHE0a52HbGhxjBkng4WIqvRWVcdb92uUN4Vpq4t3zEem\nUtDYHwMzKljQrgeX7vPJO5zk6Ec/FDhPCz5f+elJI43bhyWYmAGN6yTG0RPR\nShl41BJTnR5FbmE0LNacJScDgtpShbdaVXUu6/Qk/JyNsSAzfENop6VD87/t\nmXNA\r\n=NdGp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWkINEsq6wFIdrGUfRZa2Bj3e4H41YpfoAUoXOtp4q1QIhAKa3c+oo1uFgZSu0lvZR/C5t5izMuYMF5KXw+wXBC+Z5"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.8-alpha-fix-empty-state-proptype-5977.1.1_1612992227741_0.7197509298562528"},"_hasShrinkwrap":false},"3.0.8-alpha-fix-empty-state-proptype-5981.1.3":{"name":"@crave/farmblocks-sidenav","version":"3.0.8-alpha-fix-empty-state-proptype-5981.1.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.1-alpha-fix-empty-state-proptype-5981.1.3+8dd9622e","@crave/farmblocks-modal":"^4.1.6","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"8dd9622e7f141d69131cdfa4f85902a9ecee367b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.8-alpha-fix-empty-state-proptype-5981.1.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Ta3lvFrCA2yeFeBESZNabeXj74hYPJ4J3M8qtccJhm5tkaT+q4fEnNmDr02slgzK6ROZu99ltEifoCpqTSiMVA==","shasum":"8a429a40c7332f34f99db37ff987820bd6b3573f","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.8-alpha-fix-empty-state-proptype-5981.1.3.tgz","fileCount":22,"unpackedSize":36208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJTBoCRA9TVsSAnZWagAAGioP/2gWRa52ct7GOC0nGGqU\nbKIjVh7eoQq2pZuCcz1ZkxFADVQ8lWCAGcFTZKqhQi9n859xDB+dy8hZdYuu\noEjKGfNhDXxc26IGm0qtTbGY/mbsPuRTco1uBiwpCSry3XSHJJkHsiL9KzlQ\nCZPaeRU9lo4RQBFX2TDJlYw7JtqxpdMC+mGdCoILEAALgxxxqLfqAyXUu6bJ\nYAMUVQyH9zScn3GkIaTzBMJUr7g/OGxBdfxb0XueAFNygOjmDPfCc8ElCFhE\nRQjhtS7gZro9SqEkZaPmXFyWXosndyIYUV07PPfrvPi3LczbtAKKL40A/sD0\nd0Dx0Zl5i5t7nu3ePs4c0OOdH3JqoDpnnpznvL9F9ZuQVTLhu85mPgHlDy1K\nwaRYl0jBlQrprRdRV3WuSWfszs2OaSiTGL1Xic/gNSStOy8yPx7Uwgv8Wv1h\nPAS284jOtje3BxWrHYVj+BwSWeya6j6E9s0A/ec/LWR905rPHewM0kh7+eY1\nf94nNNDLQBsB/JfoGkjXnVjoro6aX1tg3Vm4Yo67B4V5gLtpTu3nwx4okz0h\nhE5N4j2w60EduHNJNlHPnW3JvDtjwxUzhe7SC4507kig/67uI6zdYE+4It0v\noej+RQWc3LjpoIBEmyV87m3vRwHZaDDMnHTT/HGEzs7MxIPPP318BlNXFm5z\npwGe\r\n=WPUq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAyad5GqZamTsFyw+9Yh0S3DAzBVGKQ2utNFvFFekozaAiEA6c95FCyLx61e737hrtTHJQZomTf9I6QQ+Uy82tSvk6o="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.8-alpha-fix-empty-state-proptype-5981.1.3_1613049960469_0.5230310122075243"},"_hasShrinkwrap":false},"3.0.8":{"name":"@crave/farmblocks-sidenav","version":"3.0.8","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.1","@crave/farmblocks-modal":"^4.1.7","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"e068722a3cc722a84a8051d244f3d3f4e1871c87","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.8","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-RhoS3sdXWh/tKdk1N8AVYNZ7msT8c+ce2rxF9f/yMGxTAoL6vsP0NorfrrevAPHoX1Huq1gxflHYUbpluh/9rg==","shasum":"c8934a4ca96df983fa828540174ec87a62fda5ab","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.8.tgz","fileCount":22,"unpackedSize":36321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJTmICRA9TVsSAnZWagAAn/sP/RCw0l5Ddefid4tqYkLn\nMTUYxn0Jp94Z16GdzS0Yk72nAbpddpwVZigsGA2IE2GqCrzId0qD1esylXhx\nJRHLEa5vLNwmPqWhTEPBhhN5PGL6q3apNmZ3v5Zp/37OBOP4cR7xunp9h/zp\n1a7zlbEw4jbwKsdbM/x4o7jbDBKUqj+A4zkKwqxCWu7e+T4ZRtyWfpzPrunN\npQ0maUTzixnKTnkrsXol3mIdPW/HWGWGvJFhYhXsvj8ziGyAU50aNTKTYt9X\nvfyGd3QWw+4iIIozRm0zVwqMHTHKUu9PWo2i4T9GaowkpuG1btQF+TfCZDTb\na2GgIna+MyzES8+YdH4iLJLctjqSTAOV7KBMn20fLJmrC62G9cbBrcO86GZi\nPeJX7pHw6qcoz54kc6lSK6SV3Ew9lf08Nbt90+dxjmLtG3kDHNZrb9bwqHSv\nT5Ai4iX2NA88F+0XkmRa7bDby9yotP/Z996XyiYIkebYVMnpg9ZQZV451S+n\n9czJjs+7dQP6sDIx1W3WKRcRHIENR/sfziz6pwNELa9rvil7tcB0STw5uBJ5\nH7Id+N0eb4lpi3A1+RQh4nJVo9BBe0rMT67w+FqInS49MWsKHjBFimXf0AhP\nGGlBFuuZC5OGeX4PrvknqQyI+jIQ5/dcUGhKNKOY3nhO+9pPTRpqRlqmllIR\n3zRH\r\n=o72T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIEFlV2wPBhOsdUqRRsop56YulGNz08JzD+eWSsAT/uFhAh9oLxd/eGzT0JGZxqi837dp1g1JzRp9xpHEcq9RlPYJ"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.8_1613052295697_0.46139097577119426"},"_hasShrinkwrap":false},"3.0.9-alpha-empty-state-styles-5986.1.2":{"name":"@crave/farmblocks-sidenav","version":"3.0.9-alpha-empty-state-styles-5986.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.1","@crave/farmblocks-modal":"^4.1.8-alpha-empty-state-styles-5986.1.2+575693fc","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"575693fc071fce20c862bb94606098c61c7ac243","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.9-alpha-empty-state-styles-5986.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-GzUKc8gHFcLcPgwdfECeIX4qGDazf1o4ytV0SEcocKwEnjv19Uxsj1I5/aGw57tzw8aQ1b8ZTM1oPckTEgDXWA==","shasum":"656cabaf99b3bc7c847b3bf32aa0f8a7544468db","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.9-alpha-empty-state-styles-5986.1.2.tgz","fileCount":22,"unpackedSize":36407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgKoN1CRA9TVsSAnZWagAA+KkQAINLQU6e2NnGX1dmHtPd\nrkSNB0C0UBuGMNU0dxNsFSxZohE8dj0PWqBlo5iG77WaXAf16izU/G3wSBgW\nbhBXXG/okE05m3lscjSK1ndFNPYz8dpBnhPWhPS3FhG+mbHELFYcwgobH8YC\n5RmKkhH3FcZViH6FGXmM1s5ctDdaDT21tRpomNk9i+fonzqCWuIIvllCVuRQ\nrTdsqgPmnEdJ8VtIxL8LgpUGby8g0yGBhEle/xyzGDL+4iSh5L5BNjAHvJHo\nAVCAz43g4qp68KmbgnihNWJDblFx86KhfKU4RoQHncGKT7x7o83SqHvGv2i2\nwvB8WAG/1jkt/HpHBE+oHe5zupaTRcJ4TheK/FYyon32XM33c5zq3VhT0hCQ\nd2n5gX7+yweu/vAnMaIMSECIDiq10qs4R+sZ85dQED9brIA5HfTdfIF4KHkS\nv2gpWGd05B3PM3tJ75dbcgaN8v2fQFsvVN7Fdll+dWfjj8GNwDjqdGa1zegZ\niEBA9d1di/b7+XoAHNh5lFd419RPnt7Kd5PexysfQK8oOw2wAHq1G5D+rQG4\nsa1NDnvcXQQkczkEOUVXL38n9rC5BnlVvkdRVzRbIhwwnPRclQaowsJ3pHgW\nvbLoCkeLASjCjZz69bpaiuGA2gRhsKU9YlbDj6sN0F+nJLto/lTQNkwVHeyQ\n/uaz\r\n=a4Vz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDstb4fcIyD9AhCbLy7EabKMZNoegzUyhBOZRhOZaDaOAIgHPZ1A0lZ1XB5ho2p3MoONlOHkgh6p5ofg3hi918mIV4="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.9-alpha-empty-state-styles-5986.1.2_1613398900985_0.3540749205068585"},"_hasShrinkwrap":false},"3.0.9-alpha-empty-state-styles-5989.1.2":{"name":"@crave/farmblocks-sidenav","version":"3.0.9-alpha-empty-state-styles-5989.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.1","@crave/farmblocks-modal":"^4.1.8-alpha-empty-state-styles-5989.1.2+ed68449e","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"ed68449e2909cd4b3af05a45cded50b394138eca","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.9-alpha-empty-state-styles-5989.1.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-GnINCi9Z5FWo3ARDEBKEcN0U2nUkxBujhPIAfWDfZcMK/ZNEentT+Os+8QruaohjPDix8CkVEbHsflsRYpCB8Q==","shasum":"f04530dcc1d1dbc430d6f12633c609bdf4f1e580","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.9-alpha-empty-state-styles-5989.1.2.tgz","fileCount":22,"unpackedSize":36407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLSWSCRA9TVsSAnZWagAAPGkP/jjWwEGkgBNBeWUVAm6q\nJXsY8rw/tb3xOggk6Q2X8iq70nwk4V8VvV48cs1ZdGjdi3pfvOTtONneDco9\niKlYWrF1mAdOCaHsAl628/dBTs2WdzxFY7Z0Yo6cTS+20x+jHypenVjwQ31K\noe6UicYsL+aR5uaysoqqzkreOm1FydiTmvS9mvhQWvPKZlET1H99FFy/+8Ww\nwH0N95O3y6HJshz9vnS784LKEyaLN9HnNZsas/bqQNt4pi/+up4lnHK2tHtc\n74ywShdJoE1b1N7xAbBQNCgdZ7gey0NG8TkwyWRjNb9wHNO2YlYR1EWINB1p\nhwODssI+GWHN2qeBheT5di+oILrHLo9NMCSeYRxuvHeMZOjeYKMPbLtYwevA\n73yJDEBj/eJ3K0nSGe+9Llt/5r1UJpal+AVYjQiLlfOyc1e27HnsDfq0RUgU\ndBJDGHqYV5fwvRz0s10d4orBYetR7mMazDAHYqmFmLpLU1khKydlyfn4eSNQ\nY8JsmLi90N+YMtZaAW67KV5bnxvCT6oMGxHvddcaMYgm5XAKhGkOmaDPI1s5\n96CyxSlPFgU3ambv9El6sqZWqmH3j4RWGd93q3JUqfVFTuLojIFp52kW1ZA+\npuL1Ppqr+LgMnsLaPlpHdXh7tOEnXnirP5R+8EsxbHafqU+/2Ixr63SeEumI\njJGq\r\n=74Kf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/vT38fnf5zCgcseLdXCUDiNZ/mAMbs6hxu8bZ/1mooAIhAJ435O1dtvEbAM6+icSvRTXfq8QPXpnDbSgNu8COKsnp"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.9-alpha-empty-state-styles-5989.1.2_1613571474242_0.06224405982398373"},"_hasShrinkwrap":false},"3.0.9":{"name":"@crave/farmblocks-sidenav","version":"3.0.9","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^0.7.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.0.1"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.1","@crave/farmblocks-modal":"^4.1.8","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.0.3","react-router-dom":"^5.1.2","storybook-react-router":"^1.0.8"},"gitHead":"9e4926254bdefbfec019654cfcb3ea6f11d1b8a4","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.9","_nodeVersion":"12.1.0","_npmVersion":"lerna/3.20.2/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-cqlMGjkx4rkprQ+VmxTHOXRYWtGX5I8b6fY17DaB1iMLoPMe+sHxULOv+Y5aykYPgrp7Df3bDxMsxdqzGeonrQ==","shasum":"ee506f88376deb40131aa1894c956e172ad8b2f7","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.9.tgz","fileCount":22,"unpackedSize":36532,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLSmjCRA9TVsSAnZWagAAFkgQAJt0TLfTmda9VYtsySM6\nT3OBiRFoDSX4Tah2LrtI0DgeaX/R99Wmbtr6bbsFfFgzKyT4hQz5TVo6F31d\ngEMTFdGAGcxF1PV4eJt6l/djiMMIupmveKmEOrY9zPXXCqTAl3AgPkGrEf51\n+ZEHR2Piu7WcmceAOgolI8XfHZwioXRcQGh+UqC/gGVl/6jvtZM/q97Vzdiv\nGwM4OErrGoap6iMq+gsq/HTrABSbVrhGn1heCMpn/HfrE5PXMkIXKBg1xqEO\n9SEwmYw+9mAkDJTRJ58JddhtpoGvBKA2f3evgTqHSyFKLnNqDxGaoXhFiYm+\n+AViZ3I9bYnyZYHK3vl+/TnGjadXL9pz3oemDqGHzuusvDB5ahAQIYUyPIR2\nMNzmI2fEdr6z6UHVVAQd5aSl5bRgIp6pVkmzL/S9RW6RgfJ0QWT3LQRZXUjv\nhVhcCbXp/1zK7CrY7Q60uzTWCusYOnwIWz8kKT1/8UMmJ2fe5K0oIKfvndRh\n4zWzmmVtyx9SjE6YHl5dXO24TN6EuEL6mZUsevSzodS57AmPoGSRg1ZYddXV\nhlXzXghs/zCAVzzoMsBWNv0YfF+uy8k+CNOJEM+HfKVJ6j78e/WVVU2gYh6S\nvKTOYQWP7hRXOriNCnNSk7nRvF72t5S5JeHVMOAkFKfjP/K+O1y5haIGIwan\nW7E0\r\n=JN3y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9zLpPhLHkcLy+IIIAbWtbcaIzj29Cr7R1vH9xAHxjCgIhAOxxG8QKYqpNzk2Rt6qBTBweyOSPXi1XPj9+XLt2jDp+"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.9_1613572515547_0.4665662605319223"},"_hasShrinkwrap":false},"3.0.10-alpha-update-deps-032021-6011.1.17":{"name":"@crave/farmblocks-sidenav","version":"3.0.10-alpha-update-deps-032021-6011.1.17","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.1","@crave/farmblocks-modal":"^4.1.9-alpha-update-deps-032021-6011.1.17+b07aa4ce","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^3.4.4"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"b07aa4ceec2dccd95e16d93e56c46c802eeb03f7","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.10-alpha-update-deps-032021-6011.1.17","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-vFU+eIv2pdHkBUYyaW+szyQZ8D5Lf+gShJU0/sNr0wVGGWry76964FrdaWprFCfYCWoMoMCaU0Mtou91aOLTFQ==","shasum":"9b198ec645ed9f3db2c954e99adfd3bbd6433009","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.10-alpha-update-deps-032021-6011.1.17.tgz","fileCount":22,"unpackedSize":36855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZIc+CRA9TVsSAnZWagAAN6QP/0Umq4CIdQwyrMD3UZbc\n0IOTtF74YSxp33jnusmNXvshfvQBG/jx//L16QeAs6VE4tu0TneObGOuzxUY\nKWhh3MVfacKU/soxUJHh+NyQFY0YX0WhhqcFi3yvTCk/7zlfzpbzeJzySyiX\nBMJc8kPnuEZIlmXMnmFO1bAzj3Nhhasw8H/7hgZMOnm+WNUoeWKmF5k5VLYj\nrRBs63Ud+od9w8PYZ++eMXlGHt/z/J7cfHoIB3MzUCMzRbX0RCPlj2Hw0f3q\navldhU8fO8Q9xSU2nvn8W9OIfY313uW+eiHi/+mGFKKDMs1TxkIPxiiDHVf3\nj8mHaMFp66squ0dKljeHuRv/1tVbIVlVrGwLROkBBt52PnWRL4fjTK8i1hjm\nHsQY4gZi6FN5lai+HcKBjl2LMQiHO3q+/hUZk4/dn6mwqZegxm4Ravp/PVSo\nF/cjAoyFgVx6HiFpu+r9OVM29nNILWFySPRb8APeEECksr89TNtrHadr3tTj\newWqQlskaEE3NTdGCQgFmYCEEGy+RqE8Vyxo5i5ab8Fi/G/DEO9whpw5PB8q\n8FTxeslUhEvrOXkfUrH8nar2JhXYMtu0jgFiI2PRw5l+5USd9XEShTznNBkj\nJGUViNHGoCOWgIYO/LHeKA+wmqBA5GZCQSq744K+762hzkTOFA/pCCnih51B\n40O8\r\n=WC+O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXd6NOacMbJ/QkZz9Rh3AukwIpdp3WUuHEbImXF+rQ3QIhAILZaeyyO/aVjgY9UjZs/cVSbF8SwhjWXSt/cvxY0mP9"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.10-alpha-update-deps-032021-6011.1.17_1617200957512_0.6589754465961837"},"_hasShrinkwrap":false},"3.0.10-alpha-update-deps-032021-6016.1.21":{"name":"@crave/farmblocks-sidenav","version":"3.0.10-alpha-update-deps-032021-6016.1.21","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.1","@crave/farmblocks-modal":"^4.1.8","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"e38ee0bd8f39cb96827f32fb1368b25cfafb58e8","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.10-alpha-update-deps-032021-6016.1.21","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-561oixGvxbl8t5TIpPsInGEmUL8S+DFSohXQiY9uBNLXHt/wF4snC9asuFd2QPCk07ChpLkm1ea7PB7GTg1mww==","shasum":"943a4b84eab5c13e4843e9446fcc9ee3b3bb97ab","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.10-alpha-update-deps-032021-6016.1.21.tgz","fileCount":22,"unpackedSize":36811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKkOCRA9TVsSAnZWagAA2mgP/1vhDEGVdbb/FaMPLuna\nJwq2IKsmHo9UfwpJhJ9KZZkBps4jDhXaS3F6ckfICcvR/sD4Pr2pPLlrIv8J\n90Q3TIUHFFrBQ4DLZfB6+XxL4VYlmIX9AODPpezRHYyHzLyasIIYVg4TlEe2\nOfgYxwvweF+u0Za8zOPIRW3McUeeeLaKVGAwumDFgZX1/mm6yFgUXJ8zqBCc\nGXNz4Tj2LoeOJw6xDCIIfFWDgozhbvAV68s5FUMMymPk91eBBK53sQzogaOt\nClh5H85X8h1FduWhra9SThmOebDzHn5u4qgSyw0xV4lwDhJAvFyU4wcdUa6i\niAh8zXxVFHBAlZUVlakqaPUld6i83s11RHyDtTCvVIFoiWtsHk1PaQj7GkWZ\ncWZog7Y8+siK5VwhwfKAmnWl7DOWa/muTHHCy8gJC7hZ9dsF6ia6lS/MT3f/\n8Y0Aik/XmPNWxrLtG+tAm2Ca/CpAIB2oV4UiM6DnSlzvwAsv+3nyaWZ6lYhY\n4VdAStvHdBHArMoDO6hxrrrgMa7NI3KWkrq26fApLFPTA1iCM02i/RjClY4K\n1+PMGV85/bXwMK2K2Seqw6hO2we858ZxonWVVYJ0ABsNyPc7cnMcSqTLwkqQ\n21ZR9Tmsf+GM7uWi+Nzj8lafYIq3k2At/JpuOPGyO4Qr4+aUKAaHQLggsTAg\nYiTe\r\n=UxJK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnnjIbBNpYy+YidefFOOOYk5VVnx4s/Q9sqf+29BiRtAiEAi7bGviEzjE/zkq4qhpOvYv/3t+7LxOVwoxDaIWFwFP0="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.10-alpha-update-deps-032021-6016.1.21_1617209613974_0.10836812528613748"},"_hasShrinkwrap":false},"3.0.10-alpha-update-deps-032021-6038.1.36":{"name":"@crave/farmblocks-sidenav","version":"3.0.10-alpha-update-deps-032021-6038.1.36","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.5","@crave/farmblocks-input-radio":"^3.6.2-alpha-update-deps-032021-6038.1.39+c16db8e1","@crave/farmblocks-modal":"^4.1.9-alpha-update-deps-032021-6038.1.36+c16db8e1","@crave/farmblocks-text":"^3.6.4","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"c16db8e1588b4b56f83b9bd54634c32152c9e781","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.10-alpha-update-deps-032021-6038.1.36","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-83DDsj2Dbh8pyp7uPKwbFQp9hWcT0e0IXrTSxxu4YFlSoYQe/gFzBxGigB3jx7JuNHPkA4ZrRlEZ8cUuoDi9HA==","shasum":"45b6b7aba4577c07ae4f5913a531208aafe93d98","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.10-alpha-update-deps-032021-6038.1.36.tgz","fileCount":22,"unpackedSize":36899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcKjLCRA9TVsSAnZWagAAjRkP/1v+G+bDJQzT+X8GNyjk\nMpv4XTNjZvWoMxl/GJkIYBUsCls6zKqzJhj7GEmcJ52GCn8LwiIYtMaSIhT0\nvWSwgCaWZpV0bnjw41uJfkf4qj2FOAblyhZIlclaaNHwrtEfH0ROqrvJA7yf\n3jsV+T6rvKmA3Ul4UMdm6PIQ3kCrkx/XCWZaR6KU3u/jFkoLePU5T9+V9hCg\nzMpBli2AyRn/PkOM6bqSblUVhcAB6DiuzctyrSi73CKzmilI4uaNmx1sq1XN\nkqS9KS6KZovrupOS6R3X7bjlO/kUQeNfydcx8F9qmqiwQnzs0L9zMf/h0Q4H\nPyvap1c3Bff4878qWB+WMdg8HK4RCsRwEOmvAa+c5fbnPto09c/RdT/kWweX\n1isR4EYRtW14TF5ZY1kHDJ04d1gUVK2RAYaWddxZAd3h0W0p9v0G3NNE6y9p\neJYgqiNFGBfc38NJXgcZ42WinmVqMocZaJvNDOeZgUpZVj5ZVPca/ux9nY6n\nauMsPPmyrHQGdyr8PEjrwLO2h7JfSKIjgT+AIYCJs74PviumJkWPgDSXqj2r\nhPiAwJLDcfSzQGRfadnyBtkvtymKv1VX0wYHG1YtS1fEo/fp3Nf8+TLOxuQI\nZ1POL++i0l2e0I45uADVHVhrQk0jmevKL6fwP2M9DDJBkhdHeQ1Rw1oyEtug\nXa9s\r\n=i0vn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFIxC+1bsQbm/QKOoq0AA2UXfIqX3TDDa67b6bV1nI64AiEAqG5HEwlLbGzTGG30EWcRVwmlVpBbkrcDFMrVb498bOI="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.10-alpha-update-deps-032021-6038.1.36_1617995978759_0.581876131203257"},"_hasShrinkwrap":false},"3.0.10":{"name":"@crave/farmblocks-sidenav","version":"3.0.10","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.1.9","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"6c363db25b708288d932745d21cd88d4e3bbce63","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.0.10","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-manfN5mNV9b7cTGerhmyEw9qx51ujv5wAcRlZvxyXRJr1OhC0xUXYq7ktls/p3qkbvuJ4c8it1WvRB6N2iTZ+g==","shasum":"a4352e139bcbc4faee0cfa6317383bb8c6865f3e","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.10.tgz","fileCount":22,"unpackedSize":37055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfZciCRA9TVsSAnZWagAAmoEP/3YeiB9a6AM9r5UC2yWZ\n826zojOjGLsKXXH8TuiTNft61nkwOL22aMPsFFAPTJY4Z05kWoXu0V5llqPL\nUUqePp+fLFd6KBEqaah10AgLGvIRlILxZVRWKE5r7atycLzGjjmUpOV77tIp\nWL/t4DNjlpxOLIjV3eWqZ/je1KcqmSw96czm+6uXsuIn3QtTJaFvXktK2NZr\ndHq/+AXdpCW7XYB+4PD3ESeqB5JCN2J3muIJsOS6D2MMcX/XgJjDnwnfxfqW\nwKMhR6xVkR6hp1am44FvmOLcAwMifQYDb+yZmneCvTxbdF3b+pxK1DNDMK/7\nJCyef7Ys1OLsRjgrM8IoH7w0X84YHVBz42HEw9srQ2SLRVgiC9pveIuAcnzJ\no/4nE2p+9bjPWgyt0l/88gzdHSU97A0eUIQV9jrOujBOZmRUuq3kYL+TIsnh\ns/YaAwxqsL/t/jxFDgJM1PI6LW0SbiQ/Mt4iSL7WEJ7YMJL6GvotFbJ/q4Mb\nPnKSDNTOeeHqPtSlDkzOK0MFssAew6kKuDS0RiJcYpAb+TKxnUs843Ql9730\n6lvQrihl59sU/SdHKh87I9CTtmVjhv5IEHIzsYT6gAO+u7xzsIsyXn4Nx7KB\n7XpQI+NSie7oG06yJrwa1XSCqphvN6AtXRbd3rXkmSWuBgRvWk3MEEEFCod8\nfTgy\r\n=Wtp/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgOmzyFQlL9w1AEzX+k4VefOklS/dm5TqxVVwKo/BpfQIhAPnYV/kdQ8wNe5EPeZ7GC58EcPybb5osD5U/mbfQ/rgy"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.10_1618843425917_0.8880975915131868"},"_hasShrinkwrap":false},"3.0.11-alpha-update-icons-6066.1.4":{"name":"@crave/farmblocks-sidenav","version":"3.0.11-alpha-update-icons-6066.1.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.1.10-alpha-update-icons-6066.1.4+97b9bcd8","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"97b9bcd8789de8d9c98d163dd9d0e3d929ebd5e8","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.11-alpha-update-icons-6066.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-HjbcFkt8C5UhgYiz3dueXsQj8kVP+75TISL5VaPqPY94zBP2hOkZyPVKkK3nmZXl4o5IVlaGmQblfQboMrpvbA==","shasum":"d9baa89ffb894ccaf1211ca19f8f6e0048d1afa1","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.11-alpha-update-icons-6066.1.4.tgz","fileCount":22,"unpackedSize":37138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiCjPCRA9TVsSAnZWagAAo8AQAIKh/UTMNsmfDXnEbeTA\nEMuhd81oAKRx9oGQRUnzMQHmdwAz7/5vjgQh0y9db1SPr6/wrllpZ+buvo2I\nl95qLK83TBQ27XyiE41+VzH6FlXcZ2qvgv7Z4loceBAYvrKH/dO9RedLg4qy\n9wsNngogKoWgb/qsa8KSw6LAK3naP1R1Su5p7X7ORuDGNxusc7OiUBES7CNn\nF3jyjG7AlkVzeF8gIxPagN8MzT8GisGFkWsGp/FttRRRLD5sapdfjIaHRSvw\nY6dSTQAsDpxG+8r6NY7gT+JzfyE9a6MNBgguHrvTKHF8OoWTQJrwo/3x463x\n1Rb/EQY9mI92JKmokTgi5ybCyWiS5KHORBrdH2nAPTT7ntw9lG3Ivpq6FKZv\nNSStnUYPdGlUoA5y6PaIf5o87EkGK8JeXdIIR6CKzDHwWkHWx5CYw/e2boe7\nVWyCgtdoOFjReGC/TJ5/27IUO+QQDpgoj4/ytH/tP+wol5sTJGppNpbw5wAT\n4JZ5tbQuQ6NKUHUcIEO1bvo2wHPjIND19FXqYR2sJMjrhxftixveNdBgKL0V\nqdrhtplPDMa7Y9Do/hFLjjKezqBVSapOoOv+LYcSlHwjOI49gMEw6vNlQWoX\nopIgigW/0RwnjO37AWXixk6IS12j5jksRTXey4YIIVmbZq7NaWSkLpreNY+1\nLfF2\r\n=JYwm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0jp3pL2X8MjR3i4bacIQZuOAP+PZpbp+I9dqD99wQRAIhAPRtExQucWr+S6l3mpjZ0rxiRZ+oCwFod0kdwSuUWryp"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.11-alpha-update-icons-6066.1.4_1619536079453_0.8137399655326207"},"_hasShrinkwrap":false},"3.0.11-alpha-update-icons-6070.1.4":{"name":"@crave/farmblocks-sidenav","version":"3.0.11-alpha-update-icons-6070.1.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.1.10-alpha-update-icons-6070.1.4+2e7c4aa0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"2e7c4aa06c2ce7795a675a07dfa519380c02f03d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.11-alpha-update-icons-6070.1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-4o8BxSnLpVctktPoPke8g7DvH+ne3jVCebxQxkgqFOElj3YbRWA7Y8uwiFZ8kkEyGKT23YFA6AJ2eytx0iK2vQ==","shasum":"847c5b82af205314eb04d5c35a6e3dd142f0846a","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.11-alpha-update-icons-6070.1.4.tgz","fileCount":22,"unpackedSize":37138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHkUCRA9TVsSAnZWagAAr+cP/1dwlovsPnJQGFkly9bo\na5FtF3KPdQm6MMiVY2PXeIv/a9XCsoVd3pq4SfQ5uVlntkV0OgH3GDjuPvtX\nTqzZveUzEkVSfZO21QgOPHXRqbEtsuRoTO+sbtbwNjtV3dzGJLXkhkIECY3l\nJk13j++Z90y1/7ylhRLSZ1yvOu5Obzu2Xh5IOr4JD0fWNEpJFbU46sKTreBy\nsVC+7ubpBS9EeYFO4CSfRtXGNmJSQQ1BTsoa6aERhlq2OI/zZClXl6BYpu6E\nNqVs/5rCBssZHO2wB7Xwp/nBpU5gDGbksCN9OQtHeBUpuJd+5wVjb4CvBsqm\nTJxdep9BLMAtWQemXnHkwFkKPWCGABwf9w7eMXBE5n0cGmpzJDx4r2upm2K1\npWeQQdZ5a6YuU9FkD14f4DG+liLf+zWOScYobD5LF5XH24zGDGcKY9ZQWVe7\n01YkI2qT1w+1PInx/ChZAaMe1RtaoyIFrXRSESJF/E/0z14CQ2rfT8uyNTPz\na0PQgN1wMEkz6jW74ugxe/GwwvwKUw0I4lKqOCBjASUDdTQWyc6eOTwsjUCK\nYhHz6Xd+l9mzC1ap8imfFXGx4H27OV6tD+dhq2ApRXoskuRwb4c50vLFGP5m\nQNLvlCK+U0IyRe1aTfrdrqQq0haUb7pEy3yalCU3q2DtuIUabU1yZNgF+n9I\nlj7Z\r\n=RXyE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdKyGYDClE1WqIYv+ZZ6SUiZYq+JtS2jCziK3PWVWzBAiEAtCaZgFMYsH4S1A0FYD/cBpIDnnai2RlE9QcWh1yhIQE="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.11-alpha-update-icons-6070.1.4_1619556628558_0.8559434690494252"},"_hasShrinkwrap":false},"3.0.11-alpha-update-icons-1.4":{"name":"@crave/farmblocks-sidenav","version":"3.0.11-alpha-update-icons-1.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.1.10-alpha-update-icons-1.4+2e7c4aa0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"2e7c4aa06c2ce7795a675a07dfa519380c02f03d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.11-alpha-update-icons-1.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-PjmTJrdcOs0CPiWzWT85WSWmqtQcfbv4nkNG3+9iuJAO8rx26/lZSfiAP95oNQFt5bi0HfQ4POLAkptSVB6v8Q==","shasum":"9509b233e2847f563d8677b0eadd9e8eec840c8d","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.11-alpha-update-icons-1.4.tgz","fileCount":22,"unpackedSize":37128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiW/1CRA9TVsSAnZWagAAg9AQAKA5e4L0GYwO2DVwjKtt\nKZCrGxC8ShMXxgN+dkvi5w2tVisf9Q2O55mk6bYX9adajWNBg5F35BJvKjco\nHQjs3TKr9z3f3+Rv4RUi+K3XPsTgFWjn4EG8dhDp4uDI0hkO/tAGKTVdDTN2\nDujlGsEo5AmNCInRMO37IrtToES/5fqOgS2DaOc1DthfZ3xHRK1gAxxKqvOm\nL9D8dAl1TmamBs9u+knqpmM12yASJx5x/7IiER0oJasMJPX9xHvdPsdgwZ+7\ncxMhM+ZR1+IQDM4k7lR8jFjV6Tbxzf2GzjXtrwruwo8kL/7717mft6E6tBgg\n3k5gii1wqn8Fs1WTf/DGwIqfqLbNgsGHnTbLHyyqz9zUqcHO8xKtGZv01MPw\nV9dB5K+oA6vjVWfxezIjI/2RFoLV/1INonWTBG+ZwZ5pIMdr0wXatwcGyTDY\nEKjk51umvQ14svH9TNZ87U8x5fxPNK3WeG8pxF3IcwydZmeIh5nWeQOxSCQS\nzLvWy3u9zyKTKOHGD5/JP69VmS6V3wRku0PlZyrD/tRKSm5/hUz+Zu42i5cL\nnDicZ/qe+5G8D30hhFvHxYdE9NAE5bdpXXnDNkeKDycf0LC4+U8oIlxg2vS4\nERECvSZzqgtdZhSJNmuU9/YX22KXV3zRoUj8RCAKEqei93HV87Lk6XQxbnEZ\nHQzK\r\n=BsMP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9o/WVSOZbhhyIOdnDmgGVBtNUwxaYH1WykdK9zOr7DQIhAJbNLAw7zKYLO89BBzjgAuapbqTZFjlaV4e85Fp+tPwO"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.11-alpha-update-icons-1.4_1619619829538_0.8260234338893817"},"_hasShrinkwrap":false},"3.0.11-alpha-update-icons-2.4":{"name":"@crave/farmblocks-sidenav","version":"3.0.11-alpha-update-icons-2.4","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.1.10-alpha-update-icons-2.4+2e7c4aa0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"2e7c4aa06c2ce7795a675a07dfa519380c02f03d","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.0.11-alpha-update-icons-2.4","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (darwin)","dist":{"integrity":"sha512-TyYaJtfpyS42TMPgf6J9vO2TMnNIZgjvqeMxLfs8NSZK6nf5oTp0cEa3+2PPpRuHV2iUic+cqseK2r6f6iBX5A==","shasum":"45a4817e48984a383d21328de84688a1b76fd569","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.0.11-alpha-update-icons-2.4.tgz","fileCount":22,"unpackedSize":37128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiX0ECRA9TVsSAnZWagAA568P/3ULWg3+8WzH3jZ0vAMu\nm5rtXZag/vlxrZT6GvRyYG3Mv00VP8Q3KENSXKWbK3bwfh+nOj9b11Kmh2zm\n/5v4zwCBtEIVRvfnRQLUPSVuNqPSjHW8Duovyu8Iti15ntW/XU3ngixMQOPQ\nUoUPtqENQBwPnrs9JVFLCOQBFUcURz5t8tx14a1nxC7/Pcb5z9NWxQJ1II0f\nvhODt+N7KfoQjJ3Fvs4PSyQ7ZbXoSIVTBJ90RLoZhVN6soYAvxswogQ78pF5\nyPHeThPJfxQJWz5O5kiGZSwAXqr0zJn6MCxwuSu8N6IRT2Xc9YciddJaeaag\nLE2uPrqalHx/cu+QBAp2xHf45yTUk8LgvGCspkBIciDRLD3slYWBW7F6yPhd\nVUHUeDXNnFi6/ipZRYPuLOu0VK2ZBcqQX5HDPqJT/0qCM4/5pYkMFpvbktxe\nvBCyOlwttdVcKz1AOv0ccYCWycWOf+cNmiosNvZcLtRxVbVYLhk8UgNaQhHY\n4GAW+x9I2mr7ClG5sKXb49NccKICUVqZw3H9XAhTfdrhjWbWp+HJ59u5yb0N\nimDpYVtsvkUS4GLMZtUYhkHnJlPc6j8IWlmQ6l6BdLlVEB4mMclKpo9iWNRH\nWr/6+QLkX3k+cBpoZLWsCeFUvB516EJJpLFJC7qpsAmS1V0HNBUjqZEf53WF\nP89m\r\n=6Gbf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC47DPYbNWTDmocBuI6UEg5HoqgwOn8zZ1eoxHW6vjuJwIhAOwJdyZFSvmikSdRoC/nV3RkBNvhWwievamJycMDRFMZ"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.0.11-alpha-update-icons-2.4_1619623172034_0.4333246152955812"},"_hasShrinkwrap":false},"3.1.0":{"name":"@crave/farmblocks-sidenav","version":"3.1.0","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.2.0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"dbd7c5afbd10a82ed16ab61b74c07ebb482b82ef","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-zVdltLnvTPi26sInZ79fh0bz4n8CVCYkrWtgucHQO7rS1V5ufOL0+KTmzBKmo33X/s0zv89GwRCn3114BJzToQ==","shasum":"e9252b0ea09ed9ff96b75dbe20232b4f141c6fec","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.1.0.tgz","fileCount":22,"unpackedSize":37342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiqRzCRA9TVsSAnZWagAAzuEP/2uKQPEMCEHXH/JV7Rgy\nwCi3YDWKSMshyqzfqdiECIW6BZxJ0TwuYQNb3nG2xhdAOidO7sZLzACf16vz\nmjkCFrPiUYpSGcCOeuesuYS6UVDPuHdLwglQVaW3rqSVfr4Bvfi7X0ldY+OJ\ngWsLsEvMA1zIKQwWH5JjBKnlVvRWt94fvgHvJqU1ADIxgaenyj78yEjU2AON\nJS4aVewJdedOEIiYrG56SzQdEb5tuf528tauSPc5i2h2NTxyDhRaKBD/BO28\nWx0+LV+ZD40AD/3ZM0gXwLMBfU8m3dKdk+a4c+hN6reCPpJxk3wlvfVVl0CH\n3HKHzwjZ0yca3L/ZJhvypO/7WijEwsio/DnH1YoDEkkEAB8jfZvN7eCtB8Im\ngwk6Ljud+gnc2HrhIemsqtaPS9PseBWEbQSGsKxH/EndYuyB82cxrKR4iocU\nL+QBNhCten3NSSeBtVivdDbLG5AaTfy7joxBiBA7KpI/dbWA0AaWBpmMPVdR\nHU1e6dxiXRWMvcWqrgrKMGuw76FCwd7K5/MwnRBKioBFNcAtlJYi4m1nArmh\nPovzMMYgdS8EggM2JaCMGonLvLkGOOja6XqXhubnLwWKAiHtkWzhTLML2SgV\nU33p0qiV6VWJg8JaX/qQYTpSU4XZRc5f8027Mmw4+y4cZSc+IDe6KryoWUeh\nL6h9\r\n=e/H2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiTSXUUK6TKL2WDeiSS935xHRGk5N1PzFrr0bX1drWSwIgBep4csycGDf7fFHaNOoHHrHAfXwQbj2PnmnPdTXlJIE="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.1.0_1619698803531_0.5266167382323128"},"_hasShrinkwrap":false},"3.1.1-alpha-sidenav-forward-ref-6105.1.1":{"name":"@crave/farmblocks-sidenav","version":"3.1.1-alpha-sidenav-forward-ref-6105.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.2.0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"1b9be8cea0da8d60ed7efc3d47eac292d69dcc36","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.1.1-alpha-sidenav-forward-ref-6105.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-LQFi/8hPGJmzzrPqeO0w1XW6fdCVVr1QHJHc4fqOArQUlcOTFtpS2dL08TMldbsxFaxRwwYiu4kuN75gwjkVZA==","shasum":"1a13500dd54f38c6b04fa28507f2513ee0eaea58","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.1.1-alpha-sidenav-forward-ref-6105.1.1.tgz","fileCount":22,"unpackedSize":37510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5xBCRA9TVsSAnZWagAAH5UP/2rn4lmJc0kjI6nLn2oC\nCCu8dKsyJnIgrP2wqD++WGqhwlIo0zwhIiBgYgDKRFaevzOie9975Q+iendL\nKI+yyC0fEQz++nzdQnMpB6dzeOn6KF2dvnREWiZnIGj2bhjzewLovemjcTfr\nFaFOAJqRQnXIK2iYTQFsqOGpPgpJu05KWLkhqV/xOgMP1ps5jKlH5JuDvlQZ\nMVaiBWMUgTSEmevsixUU78fIgRKmNKqxXjzMxHri9B3b4zUH4uCu9UjBxQ3s\n3/bcqgqNHcOngmNulj4KWE5DoMyJkE/z0cXjpykMLD75h3rewcMDowG5Cc7V\n73JzWjGMs12qKF23ZxwHWGwi/uxDKJYooHZTJhAlMvHDDpWmf0B2SdcCjfmY\noHz20/ZXNlJzH+SUzRvCf/ZQOoRRAMbrKztaSjx1gWD6F9zEkuflrh4lDB8T\nvFrJo1ZQgWuh9M6eSLcYGhO7G/kU/vXMOr7BNa+EGQRkZfjKhQYBFkHlji55\nTl7cttKMGwwBqwbI0yhy+MFjQpBXLpzb9DcNAWKA9EDC81mF/ZUdQVLha5Od\n2zqsL2kvvy1gAvEKaSefJRO35PZc9c94rK5kHmY8NaJ1jGR75snyD+ZFF7JU\nfnipAlIXEkbL1qOCJBIHEgWUjaB1LdD0E+l8lGRgGO4MXkDyl9sIrcakztuS\nURvm\r\n=USsb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDyrPU3VZR7AYxJ2Cf67UCFcBWCQzy/qBm7kKUk1oQ+VAiEA8qeKLxdLLyqp15ZGjk+eEFueJ8OGcZYHN16m8+/Wm4E="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.1.1-alpha-sidenav-forward-ref-6105.1.1_1623170113102_0.8900067824717874"},"_hasShrinkwrap":false},"3.2.0":{"name":"@crave/farmblocks-sidenav","version":"3.2.0","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.2.0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"90695fc285c76ba54eb44cdb1b8436d780803cc5","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.2.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-1pD8gOKi3JEdTWTKgtS2sP3Z9jDOvdPga61G4ns9EKunc32TrX3DNPS27sxEX0TyncmHjyisACuR0v5ernqDdA==","shasum":"83dc2b5557880a0286e61b096061df40b985a980","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.0.tgz","fileCount":22,"unpackedSize":37774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwNjFCRA9TVsSAnZWagAAAKcP/2Xr42KXyePGFhd/Vb6C\nBzjfWiO4BTaIkms/Ip8zI7KwBMZ2krnwBZe9PXXfawZuQ2QJgydusSzoEP3s\nA403pfRGEhKotKNm3DsuZnfj7ucxaHad0crUVtpklMsF1TRzdxVysB22COqv\nGf4DZF8IptLSutIKQmQODgrfIX6KbOAtQp9d7MOcDPvdJ+LZvagarhbwMQz6\n2iNPrZ1qx1e4HqIVlPfyCQsz32oW0pAxQfYpq3LrTmwKoXhF56bh0G5ETId3\nG182ICMyiEAHJeoW+0175ai/fYOHZxDNyjJMynhsvrntrT+0X9X5d7aNjyox\nMJph1FbUZyOGVSRC3+BAxBMu5iVVXkEVf/vSb21gClzGddXA6InoVTJfoBNr\ngjFSOZmjRRD4Dlgguwij89EMey8fyTQRt1ei6yo2dhWyIxVntHUT92eCg+EJ\nJGVjBpQiH5MrGpJidPNe44oMSai1+G/cnvIs5pXWGT1fbaZnEHdWYKqDhG2h\nhYEUfpJB25qbTb7sn2yUwQx/ak7MmccEfiJlHkFqxSnXyEySBf1OKAigv4Xu\nEwUtBGEquealbK/ZxidcfyGgmFJPYNAlW6n1xuvFxn9/UOULekCTK/8X5Z19\na7ppbiudz+OjgV0BrIAklfROQcmJh5wYt9YTeo57lFZ750KAa0RKWHsEBaTA\nRzqc\r\n=T8Mr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDd/zlu6DObwmc7QcI45tlOeza69znnu90xQLSPwyTX6wIgCbJnD+gkbBDzVEASbw75e6axmshG4AttpO2srNx/YhM="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.0_1623251141697_0.4392734226938997"},"_hasShrinkwrap":false},"3.2.1":{"name":"@crave/farmblocks-sidenav","version":"3.2.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.6","@crave/farmblocks-input-radio":"^3.6.2","@crave/farmblocks-modal":"^4.2.0","@crave/farmblocks-text":"^3.6.5","@crave/farmblocks-theme":"^1.10.1","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"eaa4a7983a11c6bf79fd4512707b027b79295067","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.2.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-2flxm/dkbyDJXnKtGsGfWuwZ+raF555lfoU3hGlZoMrIa3w4tX4huBom9CoxlM8L0ayOD+xCFoSL6Pqa2pmIjw==","shasum":"f0fa99bef93375b9157a4da7f39ec87802cd5459","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.1.tgz","fileCount":22,"unpackedSize":38026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3gK+CRA9TVsSAnZWagAATucQAJWVEImeq2h3QLUNNr8U\nOgm6di7pQsBPyuESmhUMo3uXR2/v6xmSQE13/vS99fg2MVQ94quixGLWo1jx\nu2xF+8L0sSmaI0zefCbK6RRlfJ7pQZqN2RIWsUqIQri6R4L5BVtSgLUNx7mv\nLyRzOH4aWRfb71TH/wMQDgU39hbp0eyYwzSVOkFLUVlnIsTlZIqLLzEsNPJW\nAUcVVjufMX7H9HH7/G5Bv9lbV8Sq5dqjSzw1F6JbLAU9fMBevUlIAjWk1gJq\nOSHC1iK8F8MR82+ge0W43zp0AGA+v6uCIsKSirUn6aUAi+wVDCyNcXFpB4N+\n+YwbVszF2jw5/zKTaQbN4k0alf9MVhY2fAtprXXBfZHadwqF9tuI0bJlomUQ\nN+X8RFiciL6dtTeI0VEPBI9IACHKcPJS5d2Qp9LNquAiI5L2D6EXeYtTNh//\n9atqLpk5ge3yRTJaAZ5f9n17N/f9enF2XE5vY5NTuDZzTBcMoCJjn4wI2xYi\nsK0u6j4uVi2zq/WoFu18IOWy8GG+WkTGMsf+h1jGyfrQgPZFUWRIGK8mh1Vg\nfgmTP3yM/4Q/rKIDQXfCTmdFAQkyjZNHRI0nL0VTTBOlqO2/3yXIKLkpRPNf\nYci1ot78HbQcf7EyJOW6r0GndjsFPHOeNDk149gF2QY4K8PxJp9jZJIEFLwI\n93Ch\r\n=8Rp3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn+iuGde9VA9yTmJGe5jc2dyWRMVzsAd75eIKmOKAaVAIgNtlZ9qfug44u361ydGl4sIodUglmEMHlWw8FgwWmVks="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.1_1625162429926_0.42247058429510553"},"_hasShrinkwrap":false},"3.2.2-alpha-add-font-size-6125.1.1":{"name":"@crave/farmblocks-sidenav","version":"3.2.2-alpha-add-font-size-6125.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.7-alpha-add-font-size-6125.1.10+7f475499","@crave/farmblocks-input-radio":"^3.6.3-alpha-add-font-size-6125.1.10+7f475499","@crave/farmblocks-modal":"^4.2.1-alpha-add-font-size-6125.1.7+7f475499","@crave/farmblocks-text":"^3.6.6-alpha-add-font-size-6125.1.10+7f475499","@crave/farmblocks-theme":"^1.10.2-alpha-add-font-size-6125.1.104+7f475499","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"7f475499e3df2fdea986714bf3eec2907eff074b","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.2.2-alpha-add-font-size-6125.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-LsCJUP53FiEOc0HA0fcGdadat4UVtAB7oAMWyf0x+cJ/Z3eQoryF5XvKF+FeOrbIbA4N+GAbveL+y7BVSLA5CQ==","shasum":"8a6c2b0fa975b5a0ff8c17816bf17ec62015b350","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.2-alpha-add-font-size-6125.1.1.tgz","fileCount":22,"unpackedSize":38259,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5dwvCRA9TVsSAnZWagAAoUYP+QEM6swY+QWBBZNaEWuV\nQ5sJ6NkVf1BClB3ecqpIYLiiTyyuVru8NQoZN2nDdVPdC4MC9wh2zfkI15Mp\nfb7s5TQVb2zhDb+WelsyZHIT5k2sUUAxTvQl/nm7uI+MZ6UQJkat7onEkvCm\nThbFG1d8UG7wk6JXLIRBJxziXwyrmYeJ9IellPTr0PDj9giUFBiDHFgo4x79\nI8DYaOJw5Vq/d3l435SgHbi1Budtge7SLRm6LzG9013EBNC+cX23e38M5oOG\n60qKph2mcwrmKX8k16JOvcHlNDns+ISLymgml6x+hEtFNlrxy97FgGisIN1E\nBE6lzvQWcKqL8GOPAuJJjDWsgM0aNjqYAFWHlbmIXcnfwiDSG/7w2PZrIGU6\nQ0MwbUmsW587B1wUo2o4gwa6s5Jiq6O6LV4My/04gucpWVqF3CkSw7+rUw1q\nrGXWh+tJcs92Z+/xINATKWV1kyLuCOTRaejHy/6tnUqFoV3KEsdvrQSCzSeN\nhdV3EsjJgD9do/2AcDZhQO5Alrb925EDyzUzp0ol274i3rSFQ1YuzPf5UHaA\nC6+QRIdb+NxVelozVaRoPZbkcq4H3+cWlaQr7NLBFMZ/Z3Jv60xgnxLa1u8v\nsiMRpbm5iJxsuKH6nCTqgPuLsnipo2skyAmwxTPAdjzB8LL6D+SLaHBok67F\n9+x/\r\n=P7xs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDpptp+NFnObnCLnUlTUkw72l2g4x2x8veehHBMIb6CwIgHuafJU2DyOO39c8uk3So47FuJyDemJjnd2+ticr0Cf4="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.2-alpha-add-font-size-6125.1.1_1625676846916_0.5395501055890071"},"_hasShrinkwrap":false},"3.2.2":{"name":"@crave/farmblocks-sidenav","version":"3.2.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.7","@crave/farmblocks-input-radio":"^3.6.3","@crave/farmblocks-modal":"^4.2.1","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"529df422c27b1ee56543ec2e1c331ec17d8d216f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.2.2","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-/fJ9xgZtvri/EH0fyoDCDRkI8ye2jiioPVRv4J/Ed4jvujS0Z8hNeUEIjOAj6Eyx0is50GLKueH8zicmXW5cDA==","shasum":"999f4e399aef88bcad70945e2d1c9fd90abfa7d2","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.2.tgz","fileCount":22,"unpackedSize":38237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5eNPCRA9TVsSAnZWagAAcDIP+QAwFDbmA5EsRj3/Ul0r\nr96kmKhtybaU9BZFNNSQePaMGCPnvpixmKGespassLclm5tZefQNqfLS3aE+\nJ4o2oFP3SXcBw9WUlkgM6gVg1PbNzdKjw7bqbHznss8AT9Jza4TOd3labbXO\ntAkrQZLoEl5CYKb/aoJMX51avY3h0JuX78n/Rr25T+dQipux9b1YK+sPt0xi\nNQfwbNxPayhKzPE1yoqqPGgl+D6hEUAA6QdvRYx4xSsa5VYsa0jYwP+6r/hG\nubBRm6opCD2TqAn5TP/Gnr2FgJvWzfAaAHS31mWaeKckjOHoQCb3gYhCnie/\npJJTO9JlLafVlIOGs1c4xq0BZPyGRPmwv/NCctiqCCo/NiIR8kgzH9BQ4gMm\nxwCrBPBvJI+AArHUCu82RuskyPHrbW2gPVz3Uie15lE0Iqv41PxYobvSgez+\nUNPuJDZaKVKN5vaiziQYU0ZEbGrb/AcYZfjTnKoQlvOGQwwsE9gbENhtEMw7\n6GcyucKh90J8dW9IMrFgKGrg3RuYVTLaCQMUKd3+P2VNvjl9FSXTyHj2Rraf\n50wdA2a/KD8959P3go+1afzMp2vAysi16FBs9g1QwIfk9Gv/2TLPH5HpONz2\nFCQ4lEU7fKHnAnXCk5bt+OLHbe5NzhOcy8I2Rfk4b88WkZOAEhGqi0NA7r4A\n/N/z\r\n=HKVD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9xvQWficAjDV1/B6ca20nWGrmSUJlp/fJsnRBmbgrKAiEA8tFRlO7ODh5i8x4F29utQ5+JH7WZ3uMY/00wTEbTIwY="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.2_1625678667904_0.3362692066104995"},"_hasShrinkwrap":false},"3.2.3-alpha-fix-useScrollLock-6130.1.1":{"name":"@crave/farmblocks-sidenav","version":"3.2.3-alpha-fix-useScrollLock-6130.1.1","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.7","@crave/farmblocks-input-radio":"^3.6.3","@crave/farmblocks-modal":"^4.2.2-alpha-fix-useScrollLock-6130.1.1+83eb6ba5","@crave/farmblocks-text":"^3.6.6","@crave/farmblocks-theme":"^1.11.0","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"83eb6ba5f54abcc303045b4ebe36eb7648f06d69","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.2.3-alpha-fix-useScrollLock-6130.1.1","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-R48pPyAIBRceZM+oq/TYyrbaMkNX3GIQghPGEB5UZ01mjkODg8uuOJxnLhqEn2JNuSTSu7YW1F38Ib8Dm6wpnQ==","shasum":"44c45ac038ca2cee8f9bc1995b9f147c85ecde72","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.3-alpha-fix-useScrollLock-6130.1.1.tgz","fileCount":22,"unpackedSize":38321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+vkICRA9TVsSAnZWagAAM5cQAIGJh9qFEZsrQkTm84f0\n+zV4DGe/Y4q1KyM4xpElMxk+epT1bdiMXw8Azw7fFLYEmPYeXPKqilnJuffD\nJNRMMafNPL224UNKU+URk9vDQbZFdrbRsV7t03wIh2EUyrHuzgQeFESL1Fvg\nB9v16QJccKvYVChmYOEyQzLySfXn10HwtMm2VAkhkWRDdfX+wgEE8Qg+NZRD\n84ZNhBRSSczf9xL+kwZDtf/vEnd6SxK6yvwHsNPvpJ1Eald+2tVxP4t8d1HX\ng5zeBktaQe92MJm8PYs89CwL/14EVqvgZIOiAwhL39pVpoX4fpuPO01V8i9W\nkyuYTemvvtTe55DeR4v2xkj8vx8VH7Y3labhPpKR6F7Ia5kAapHAuO9vPzII\ncSKoHgzs46yeV7phmtg9JX6v68sFKaWEuSRD4qY/khcy6WAVspA+bnNDUId3\nJqOAJ1D+WwtNVHq+CFsXcWzwLkvgPvwHS5HB8aysZPbE/X+WDJJW7Tddv/iW\nSuGwgSigN+srsGUReQWI2PVoz/oEDnHaehPJG6TPKZQQVJ/uQi4FaTSDECvA\nzjVL3u53eqVKdXOQGBuA1it5AOyzzyVO2U2mskBinZjNRw6dKiE5bEU0cGto\n70ldlvShExjZ1JogNy577boxX2vE/EVs/KOEaku7JDjPKQ2gGw+Smsx6Bxuf\n58pM\r\n=WBv4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMYbtlD0XxOLlFnVUGDLHxCAsGhdyAqmAZDXjigTO1MwIgDGkuDOnGzoeyuo134G3RHzDJknp2Yhcp49HYfvZj8hk="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.3-alpha-fix-useScrollLock-6130.1.1_1627060488095_0.2607570762668354"},"_hasShrinkwrap":false},"3.2.3":{"name":"@crave/farmblocks-sidenav","version":"3.2.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.8","@crave/farmblocks-input-radio":"^3.6.4","@crave/farmblocks-text":"^3.6.7","@crave/farmblocks-theme":"^1.12.0","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"3f925c2d08be62ee3671411e5fe69272aa3c6960","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.2.3","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-6rSZRwzDYIOBIOysZ67z0DpRkwtmZwlF5W2DfEiJlWEQFaftwHYSRWdcl3pjnmdtxgVgg1+Dxh7KKC7MUvfe1A==","shasum":"49b3f855a31a7c6b37e6834c12f17ff68411c835","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.3.tgz","fileCount":22,"unpackedSize":38450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+0AYCRA9TVsSAnZWagAAMEMQAJpxUzqYs/OlZorLIoHK\nP3jtRaroW0XQFt75uxgI+cSdS4uVrObrnLxjztibpbzR2rDYrZVxgaNBVtnk\nV2v+wlMfCFy9kgYUNLULPj6ACdyMd34qr+XztAZftyLdFgPQAKfBJ876WR4y\nJXHxlsiDIxYzxbyxZfHmXYiC30hrbAytrFYlnTl5iAhejZLTbYUHO6GhSwnP\nEkquHC8xOTEZjlc6jbRd99QCTGgq9KTswr4MqMiVwg2WI1L/DM6hj+5FuAmU\nkNDZWcTxURknbVQOqslTd9/wxXOXbZXnCxy4FtkZF1TRkaKsW1NoXniDo+K6\n8LkkAqq7CFA8LyXWwgtle94FAeNNNlpDhdgbJRlujm8M92q2gvr7s2mUycFI\nO6YsAKNVsjXOAJA9yC4l9Y+8syTpZifxPHxrxGeYXKxLIHFOUiqUOcM/GLqA\nUU2SCEaUP2CpI3qNOv3qcMPfqwXFl2u9Jk1X/at7M8rhCAES2qdEj8OSUjtv\ne8wjflTq1xqQxuvEsF/zyoShIoGU/0otVLYNSYE3FM4WrHJ8Ja8KWryaLeQY\njUlmAiICqn1cZQEg2DZ5CZSc9RR0LFctUEzn7/0lbXrPW9YGVDyyA3RQZnt0\nOOyKnV0KUdRR7pZkYZFkLXNsvZvwtnjthVLWLp9AH7yDZwKuE8WFh8nDS6oD\n50qb\r\n=pBXM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE9kjAm9YXWQg2q5rv+NC223csPz9lb1qHdua0M9pZIsAiEAtngH8w7hx6tvqNcrLInvskcIocLtas5FTMAQdddDSsM="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.3_1627078680577_0.22777897078773512"},"_hasShrinkwrap":false},"3.2.6-alpha-lerna-force-publish-6137.1.0":{"name":"@crave/farmblocks-sidenav","version":"3.2.6-alpha-lerna-force-publish-6137.1.0","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.11-alpha-lerna-force-publish-6137.1.0+091356cb","@crave/farmblocks-input-radio":"^3.6.7-alpha-lerna-force-publish-6137.1.0+091356cb","@crave/farmblocks-text":"^3.6.10-alpha-lerna-force-publish-6137.1.0+091356cb","@crave/farmblocks-theme":"^1.12.3-alpha-lerna-force-publish-6137.1.0+091356cb","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"091356cb26d3d195b382de0928e69fe7f006cfcc","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.2.6-alpha-lerna-force-publish-6137.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-TGojG8Ju73Gq8RYFGjg8LT6w8qYIPIP8hU1ugM6m49mPVUvlicEwL+8GdfrB/UXIt+cl5Hnt0LQiJ61MBCXh9A==","shasum":"6ee4fd5b54094d89736fd7b9fefb756672d4e593","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.6-alpha-lerna-force-publish-6137.1.0.tgz","fileCount":22,"unpackedSize":39094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/r6fCRA9TVsSAnZWagAAMOsP/1WnzD1looDAjE10C0Va\ngVrBy5Bnxu17LHsNjiM8NRwoyqb3F0mRIpNzT/nEsPxDtNmv0+jQqFktgU+2\nxKUTPwdocxngnA8XSRZc6l+AbiT35e5SXsHCxjDo9E/B5TkxiTuFNQSNekiT\nY5D5EA7haWWTQjjW1Kuk7UgLSE2YfUDbfiCu4hZs4hxML+BDvZKbrE8hyBEP\n99X2Xs8Gtjt3sY4HvYVcEmHzwpeWne7cp6RSNjaWq3kQaX/AIDs8GNcQ/ILZ\nLzjAiNJ++iEw2D+onM/YcwOIxCfShjWVCsSL+x2Av1wGnsQFOQ7bNyozpgAP\nyCbQM7rnnWJsa5u3e1tV8SE2+lJoRyp1s9f69gt4VeZxAJ95YuUSFYjILZTh\njdyB/WUVb+K0lXXFGqkP9soELyiasEz8w+KsyibXypEmJiWReL6f6c+rC2w0\naoH1b22SpYqLQO18GEnvtKqhvJ6NhoAXMxvvCiyCsyGIo88MYogWdpOZL/Eg\nRZEVU+Qa/aX6Y3z2Yjx4xxLtKmouvyGor3KBlOyHjOPUhR5agsk1m8jG8dwD\nl4HPlL1EprYyODU+LzJCevjqx4FKFqQYvEWaapDYKevD1JafhhxB3BRQnYwf\nTKA9mGbyM53Co1/ArtHvfifMf4S02aycH3d3MLJclptjZGKEDX2S/iaKjafm\nQ3pB\r\n=juFd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEnKqwE6zZh51Gjx0BrM6z0ltoOxIm2ikikZiGOGvG/8AiAZISXThzEgDD2gFMfjyqSunvX2+j3ieiyctgVrzw3gjg=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.6-alpha-lerna-force-publish-6137.1.0_1627307679616_0.4435731707793633"},"_hasShrinkwrap":false},"3.2.6-alpha-adjust-xsmall-font-size-value-6142.1.0":{"name":"@crave/farmblocks-sidenav","version":"3.2.6-alpha-adjust-xsmall-font-size-value-6142.1.0","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.11-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","@crave/farmblocks-input-radio":"^3.6.7-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","@crave/farmblocks-text":"^3.6.10-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","@crave/farmblocks-theme":"^1.12.3-alpha-adjust-xsmall-font-size-value-6142.1.0+03a0b7e8","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"03a0b7e879d9889f456636c79fca43fdc271c84a","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.2.6-alpha-adjust-xsmall-font-size-value-6142.1.0","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-Vdf6BwS0t8gCyq7nbMqfUcTWgTUd1m6G4BpDIz3RexkXb+qD54h+bboaYp3R9UzY/+08Rv9yUm48E1XXOK1hIw==","shasum":"ad33cd8d5a8679a9731f98c49c933c8662b8df41","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.6-alpha-adjust-xsmall-font-size-value-6142.1.0.tgz","fileCount":22,"unpackedSize":39144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAf3CRA9TVsSAnZWagAAtuUP/1tp4feKyOP1pWVkTYBc\nE3klHjjJZbgh2HUXcssf+pEK+KjZGFR2RSBg38Jy7/0MV8N2q5A93/Q0HeYz\n122nQCX7/C3//bOXGBaArYfvN2niMjQie4Btcl+f1b3X6HQFaDr2vENH9U6s\nbjAtdfZbWxr90EIkX6d7r5AUbaMNbqqXjyduveHm1kb3xF1HBREmOHAwxa6A\n5x2Rt1DjPygtVEg28N6UaER874m6bBgmyGtYMEZKQH6nkRcnnFWvNUMBelbY\nl3pjS+m5oaMJirLrfwGzo+Of9HygOTSqkpoBxrbYyUnp38YO9LZLJ7KNa/b2\nFJo70sS7dMCBtpF+Aoe1Qb25s+1ApUMMtJ1tN34q2/ddNva/BPdd6jW/jkdh\nZmfIgK/RoF8KT0M1cnVGNh9nkMK8SFEt89jJKFDKWFHSMEqDzWqNDFCzU8+H\nl1kHRjOQ0ygtWOHkkEvB65liav/+mU656j7YT90Vxo5cucewWOTQx/nHb1E7\ncJwgFEZlY5lD7T4KTO1qi2z1mRpfsE8rzoK4XcP8btWwHMOsE90y6Q+7L5z1\nzusbLDS4EjN9M9DpG/5i0tQkPRqBcKP5CST0yOptuIdz40KfKPWg0ujyGBi3\n9ESoBh/e0JHWoE6k5DCcvFEyl7z314+n6pKJiuEQTnLDpXwe2e5SqPf9bFem\ntOR5\r\n=IqTY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDg39Us7wUA+ZZKiSGh9syBwAD/uGW0H7Su1mhbv2VlvAIgEvo+I2h+dWFCawhOhqaj14HspPvc8u/P+6A4XgGHfZk="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.6-alpha-adjust-xsmall-font-size-value-6142.1.0_1628702711718_0.5469919422426335"},"_hasShrinkwrap":false},"3.2.6":{"name":"@crave/farmblocks-sidenav","version":"3.2.6","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.11","@crave/farmblocks-input-radio":"^3.6.7","@crave/farmblocks-text":"^3.6.10","@crave/farmblocks-theme":"^1.12.3","polished":"^4.1.1"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"0c3be1617e4e4bd27d1b07b98987befeea153300","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.2.6","_nodeVersion":"12.1.0","_npmVersion":"lerna/4.0.0/node@v12.1.0+x64 (linux)","dist":{"integrity":"sha512-lEMd8S346sjQ09QLhynOdU+Gg192gzssJchI1cQDNflrFmV+m6XWWG05NKtPMDK8geFaRGnNK3a7TKsLT+SDcg==","shasum":"e0c9902a8b094d11e255b35f0df8526c89c140d1","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.6.tgz","fileCount":22,"unpackedSize":39085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFBKjCRA9TVsSAnZWagAAb7UQAJyL6uNqqfChLOlhSGW2\na6TOdqEDfWZz7l0NAKrRpQ2fSdD0dUCJnFJCBgQ0Et6K/F96mQ7hPKX1DnlT\nCEaomJhCjO+5xgrhWWoTIVQF62t5KTU5WPf4j7o2jr3JHPUdM2KGac3F+tLz\nqhoYrJvQ8Jcc0Q/70gQYmgcRIpC7htvrfSdv1RCEwGiXIR2I3cNIK53YPFuy\nw7+jE6hr8W6U79YpzOfYhEUwKZ4y/qoskVbYoPsJWaUV6o5xKgKreWr0jLPA\nXGs4lXrGwOM1nyIxpVqm4P9JEaq6ggJLAZH8EneeiqvAZ0cfPY9P7IGEIJCG\nnf4CfCUE3sTMHBG4/Dm/uvRnvYVPdm2JYY7G7VuTzjVxWuZ1UTWIgNXe59kT\nnHhT8JZ1Ojg2tIcqCL1cmYPtgcf2S4OCjcjG7IBjIFTGqwao5el4DC7htHrZ\nIahCAnoPZhQ7LJCEZ+UbSdGWIUOeFsM46kqSEym6UhGvfjhhvBBhXWx64DtM\nMzanc1sWbgReTQRXWxAAkQFUOR88sxnV05DJB91r4o4GVkd6kERkKrDpZD3O\nwboyAnWZCih4IVALI0gkArrRBNS9YcUDX26ySu/HkPblXLDGOwqvWNhp3VHo\n+KLO07gxWFOlsOryC/GQCydZP34fd/8pBdD/F/kAQEaHdDtw+E67ZB33AxwG\n/iuz\r\n=RGMe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAa2hBovFls/qCkHhZOC32YmJFwXp2j2cEOfK2Ppb3JAiEA/DV2R5EWCZ4BFY98YzMkbVh6Cunp+433sCNRVzAN+NQ="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"will@sourcewhatsgood.com"},{"name":"juliansotuyo","email":"julian.sotuyo@cravehq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.6_1628705443532_0.05571755083151264"},"_hasShrinkwrap":false},"3.2.7-alpha-update-deps-6181.1.11":{"name":"@crave/farmblocks-sidenav","version":"3.2.7-alpha-update-deps-6181.1.11","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.0.0","prop-types":"^15.7.2","react":"^16.13.0","styled-components":"^5.2.2"},"dependencies":{"@crave/farmblocks-image":"^3.2.11","@crave/farmblocks-input-radio":"^3.6.7","@crave/farmblocks-text":"^3.6.10","@crave/farmblocks-theme":"^1.12.3","polished":"^4.1.3"},"devDependencies":{"react-responsive":"^8.2.0","react-router-dom":"^5.2.0","storybook-react-router":"^1.0.8"},"gitHead":"779d1088718520d7065685e77da80ec9affcd861","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.2.7-alpha-update-deps-6181.1.11","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-O4OWOoWMWu+/wF+C656LopUCzVhpW36VMzedqr5mTzhlDVO2yxDRP6zeIOdX0HM0dFsOf5iWKg7aKM8DyW6HSg==","shasum":"66a91501026e3ccad18b80b1a8c4ac2358b1b93c","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.7-alpha-update-deps-6181.1.11.tgz","fileCount":22,"unpackedSize":39137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzfacCRA9TVsSAnZWagAAp+kP/2FRfHqPvIpb3CeZmJ2P\n/E26ZyEHdljG5MvJDL7xfoD/fZBv8YqdGh4G2CZcCDNdaMKqy+CglIul980Z\n8a8pDR3kuCBThqAV398DI0oysPPulLuTu3HIYubDPmsd/LFZNWt5oZj+B4Cq\nZ7dHouF8AwpCgl2JELKB+dYVQLUBC8pH9mAyVZFFAYgMMGS2BGOvh4ZazUpm\nNcPmue9CHh2NXutZA8tFKrvwrbBhha7iyUsn9vDN6tAyXN/DGe2D6aToMtV9\n+gELYFt9xm5ZrazyaY1ve00Hzgh8izkcjNcyx610pO4vXZ1gqFuFvlROLPYR\nxQhqeA87lRGn1pS/E4EhsXPg9jpG4tygLsFM2ufhfitrYZo9LXFQWkv24wlD\nJepMK0xYYhcTz1IuRsV66ymW+AbPhGYJdly/IuAHfzAsJLaLpkGwHGRLi45v\nzZad5IBV92mQLtcMt3UfJ+b+mENat75M2RMgH4B9QRfuoGpU6D4mjOHTenFH\nn1TwEuwQMXIpQp32EdOBUR49EFnSZv5xIXDgmckAMDN0GstxSNRfyDqV44GQ\n8UxMMQACaX2tSAMkeQJZ4ltiBoqMiXEjvmZl5DNSGL45j4XI+yJNV0eVDA39\nt8gRWWfIPHn8uqbxX9Fngkvxvlp9z1RpXjB6yEJEgl81qxY90GndwtbgVcrV\nC9DJ\r\n=o21F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMiw9s1dGbT8+ZepLZ+B2a0cI2B54jWQDCncnNoIvwGAiALIJOTUK7Wx/FmJi5sguij4Upt94OQfk+HanOzdUoyRg=="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.7-alpha-update-deps-6181.1.11_1640887964804_0.4294151456274009"},"_hasShrinkwrap":false},"3.2.7":{"name":"@crave/farmblocks-sidenav","version":"3.2.7","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.2","prop-types":"^15.8.0","react":"^17.0.2","styled-components":"^5.3.3"},"dependencies":{"@crave/farmblocks-image":"^3.2.12","@crave/farmblocks-input-radio":"^3.6.8","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","polished":"^4.1.3"},"devDependencies":{"react-responsive":"^9.0.0-beta.5"},"gitHead":"22b3a1773647b5b8be826e84ef0d9dab024ebfb0","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.2.7","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-YtavasL1/gwzASeyiH6GSx9XV21EMfFU1xklg6uqxZFeGv220uC3yfHQKlhyxCj9G0h0OgtFYGtLVDQcjTuJXA==","shasum":"01d8df1d0dd58eabe4c9f5600c2d15d92fdd0548","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.7.tgz","fileCount":21,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1ZP1CRA9TVsSAnZWagAA1cEQAJzp9KmtWxdEtUDkrRIr\nqnWX6VNmQDhZm/YamQ6dSfOa3IG8ox3NsoL4Azby22afk2vhN8jR8HBTtoPy\nAqKI+w7be76kemGc1I4PE3ZYtaBcSbCJv+ynP8PmyjvOTeerw7T6+aMXahLP\n33JuI+0Br6KjHs/EpAf+QQu6NmT6cJARD/7l4J6CdaNyOumGUalSMLGQgqCV\na8HgQ3cp5KjK6cZC07irxqSj6x9gQjwKWss1xfwvUmL3bgyk6flMJ3sEycJJ\nGx2tRLUTAMPrn0M1Xp6PvS/myf/J3/BRHF742YIZUn/GpuD/5+w+6NmbEj4l\n6W4aEqPyYho0P+LmfFgURa4am/pD71v+7MOls6eW7U+LeXXpNJY/zf+J16JT\n1ZP6NZdXKlpkv6REsJdgJDqif7BBuk84NteHXLScu49tUnpinWrQoipKu/kX\nr9M7CwsWsZz9w/FpAttbG2hzbnidEAWzN+sdxsTLWP/LgYzBZFpATbWzsqBp\ncMdOsDyfZQOdirqRwnQci6sSA43jTF1GNp1dXwD+BAeqlI9DXu6RzRjZvYD9\nJ5KS2EjmJSiJIYw6mgBa5BIhUm3qogwHtj3fH89CR9sIyRL5SiogfXWfj81E\n1Ufi2f9FI2p2+Gs356XTDWaeDys0hQsXRYmPLrS3sS1dj+qwiXA/NkxrrJ8D\nOr0z\r\n=ssnN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2eizONkysN+UKDrUOU7w8e131tZu0tb7w1fj2VB0BBAiEAkSqJh2IQ6/QMFojuxnp+XFAqQOS12YB6nFk/F1ZkBkQ="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.7_1641386996993_0.07131811921165165"},"_hasShrinkwrap":false},"3.2.8-alpha-fix-deps-6232.1.2":{"name":"@crave/farmblocks-sidenav","version":"3.2.8-alpha-fix-deps-6232.1.2","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","prop-types":"^15.8.0","react":"^17.0.2","styled-components":"^5.3.3"},"dependencies":{"@crave/farmblocks-image":"^3.2.12","@crave/farmblocks-input-radio":"^3.6.8","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","polished":"^4.1.3"},"devDependencies":{"react-responsive":"^9.0.0-beta.5"},"gitHead":"1d3df5d366925f772bd4889bd76badcc42bc595f","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.2.8-alpha-fix-deps-6232.1.2","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-2sNk/dwfpZlXL+G3NSve053FC+xbGZ6tsRkuPJhAjqjYWPG2V5rxFB04Db3BlksUAjA3yFEx4eeRHCBP93wHcw==","shasum":"1b9b4c0327551a7d0fc5118abb81bacab2c78326","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.8-alpha-fix-deps-6232.1.2.tgz","fileCount":21,"unpackedSize":25398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBCSvCRA9TVsSAnZWagAA/pwP/1ghm7dEj4J8HWofnR+9\n5Z9ukIM5oDxZmHv+rq46EHuJjVNgozHB+MgqPlc3CC9nMapga3nbX+HzvX9d\nIw9xDI9klpfuU/zAmINCzjuDBX9iylzkZ5H/qboDHWfT2yjHpU5z5xG9JQVc\n2qsedrCGjlDYxhdwfn5jWujYkIDpNminLUJLm8gSCsSCI90C3b3hHf4T5RYL\n6NDbn4SQjVqvkx0SEdJyETEbg5tR68hB3tshYPrnVOtvv+t8E5izcWbk5ZCH\n8nUDXggvj6U85NdTlqED+TSPXQUwyXmfMTIpA1jXriiDLDJ7FkeJzdObDHbQ\niHVhBhwOem+h2GRh+uMwMgZJQSo9ktjmdXD4vTESMVXEt21ZPDhZUeG05glm\nTHS6DHRg82Mu0EMTLBy75nm5QYPO/ZCd+Qc/qNnfQluhx1mYo9BtxwNT4czJ\nGIwbY75IlgYiZAhbMztzMMGcx6yY56yKlSRBT2sCNcQMUe9Vu62LzZvtwKZC\nALY0yYDDG+2XfegIDdL4hnAdfsRrJGgCi2g/NPaGtuORH6V5oAZRFnTwDLQ4\nLDWtcu57hKe45GmvG1Zhm3E9UUD/xKFDb6RKZYo4CXjjKUYowWYMYaMXgUOG\nFwcfngM1gfcu5sixJktrjtop8dsWXYSUOuUWNehRhzAyAA9FbbmUZZP4KheV\nJnFQ\r\n=poTb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnnvRQmf0FvVC0h6HL1xm8YbR1b6B4j/AVCTJR3lNTMAIgcyEikzBqXVNljAN3UEia2O7Ur9WRY2kJ56LyGvgCXCw="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.8-alpha-fix-deps-6232.1.2_1644438703058_0.5751462693817211"},"_hasShrinkwrap":false},"3.2.8":{"name":"@crave/farmblocks-sidenav","version":"3.2.8","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","prop-types":"^15.8.0","react":"^17.0.2","styled-components":"^5.3.3"},"dependencies":{"@crave/farmblocks-image":"^3.2.12","@crave/farmblocks-input-radio":"^3.6.8","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","polished":"^4.1.3"},"devDependencies":{"react-responsive":"^9.0.0-beta.5"},"gitHead":"aed8b93e683ff6733de9c58d26f2e407f9b1aa73","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.2.8","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-TrTa3vYMRzZ/OUji/VLnJED7UG7dReyO8MJ08VQA8c98yTRm/WBmxkbZTKneQlDwWdkFjrwTt7ZDDxzfVrGByA==","shasum":"ffec5a92f54fd9bd7d1978ffbe009c43c5c4227d","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.8.tgz","fileCount":21,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBSRECRA9TVsSAnZWagAAGXcP/3H+WSIc10lwlNFBnq3Y\nqGgupXez4TmpuybNLZ8f0BlyvwQC+/ZyOY0CivpOgR3FKJp35Vto2SLYlpfN\n2JkkpQ1vAuFk3YOiayJg6axADjjMYIgE8F7bbTpN5lWFJfpDcJ9T9vA3+8lP\nnHunsM3zdwM6wqArunOZvEjquT2ftxgZaKvqhx5QUYYwHRhct+hUXeA1/ZBO\nJKm5ys+kmzoByTiNPTt/I9ebvz6uvnGc0BvE/jz6MRVo1smfYdn7JNXb/tBt\nAVSiChR4Luo1FjXqOiB88rylO+IAV/N+gjaxckgiYp7phi8jNiqw1FPJZ15X\nFydfcangX5UhceMUdiJKjjFB5vPMHKtEHcFdfDRcovUNW1q/kN+DmorElDiA\ncyb6/gAqxFxhvsk2a00m6hBZuLfMaT8wwXkKOFh1s0pSbynECMsDZRlnK+5F\n/u3RTtTolTXGeav/E7ZU6JsF3ASy219Fo3c25hNeMcHeOJ9V1U+d4H+uFH5C\nA2EkTiylnQcNEFEnAvVX/ehayor64s5HtInT4P2h0tGD/zt/UIbrGIlIxfLo\nu8RbO9YvIG7kxaBmV350i6DsplRYtNvPefh5YFgE1w1r5XuDp9oqwJwXrWQd\n/Bov1d24EdluvFujaI/VbaKQnuNKimmlO+B9QPBLlOEY5W87hcxHBzAZUFFX\nbGM0\r\n=nZgW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtDQU6e+dx4/eCUp8YPtwLvPy0Lk9nbltmlOuF95CqtAIgNfgYw+K+ZAiExDeNWMf+B5B40Q9cjDyIPND+TyPdmbc="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.8_1644504132536_0.3669612557142914"},"_hasShrinkwrap":false},"3.2.9-alpha-react-responsive-6256.1.3":{"name":"@crave/farmblocks-sidenav","version":"3.2.9-alpha-react-responsive-6256.1.3","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","prop-types":"^15.8.0","react":"^17.0.2","styled-components":"^5.3.3"},"dependencies":{"@crave/farmblocks-image":"^3.2.12","@crave/farmblocks-input-radio":"^3.6.8","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","polished":"^4.1.3"},"gitHead":"22baa8714e94411b50053f605157c51a9c197889","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","_id":"@crave/farmblocks-sidenav@3.2.9-alpha-react-responsive-6256.1.3","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-+1nJstVKIHoo2PZKBR5tbg2xeZlLhqoer2GDd2MenpkJttZnQ5IPRCBPnWx0XxHki4HJYu+EqQ93+4HIf5S++w==","shasum":"e509f45d51436bb579395cc4c4cf69150f861727","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.9-alpha-react-responsive-6256.1.3.tgz","fileCount":21,"unpackedSize":25338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKhQVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAMw//XAJIxRx/8TF/adp71uUG29qGX9N+NocVtoHZXgV8+X0g2br9\r\nRRInkvsBMQn/5gY4877Pgy0annGezWgmVv2zvEG4tcEB2awIw5N1rzu+Fuyo\r\nXt/7afb1y9RjA1Y2tGz0SOX3b2C50IDrh7mhE9puRPXyfruLkel/cTeOrLsI\r\nPUhGoCcEooEN45liUAFEMSv5ORCfZ68x0KLbFPxggFewP0Dt4FpB5vqMQsiq\r\nKopOv4bVhwncNzCBGxqGXXQ5QCQhI7TTsLz7XnyGtp3LiNToajHHpT/oNKet\r\nhnF0pVyQUAgRy3EI5sQnIoe4nAW0FCHDONZJDf29l+a7Fg58x66nN0ZLc3VH\r\npOIhopm//qizzC9NSF4oBwsye2tR5098osni/jdb2imemFYPyIuAHm49ZTiR\r\nOrLsIzMC8cxFF7yU3eMHB+9kfYPvsATXkujbCTb+tWRw1IPVPzW0gWCClc1m\r\nLHwukj1R6iFSp4f6YjEIL/TX7gaHIkZ128oi7gRvhcUBaJvQaVoCc2XPRvVQ\r\nbjPSX2ymm9ZO4HlW97yvJ/FtwNYdlwO8U1Q5JKTMQH2jr45uvLmyqui402jO\r\neb6dgGsureoDben7LOy+7IuJUo3UlioIni/HR8S/Km1UGZSqGoo53cg4TdH8\r\n82lF6Q9EAUx4Kf+aokB026Hy6Fs5jLaOlLc=\r\n=apGz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChyv6pGo59xcJB5cYE9N2JdH4Y72jI5Xs3bnSlqDmpugIhAKcAf7dFRWo04RpERxGioth9KwLhPQ8u0uKMA/eoKPfM"}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.9-alpha-react-responsive-6256.1.3_1646924820634_0.6280918257163353"},"_hasShrinkwrap":false},"3.2.9":{"name":"@crave/farmblocks-sidenav","version":"3.2.9","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)","author":{"name":"Crave Food Systems and AUTHORS"},"license":"MIT","main":"lib/index.js","publishConfig":{"access":"public"},"scripts":{"clean":"rm -rf lib","build":"yarn clean && babel --root-mode upward src -d lib --ignore 'src/**/*.test.js','src/**/*.story.js'"},"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"peerDependencies":{"@crave/farmblocks-icon":"^1.2.3","prop-types":"^15.8.0","react":"^17.0.2","styled-components":"^5.3.3"},"dependencies":{"@crave/farmblocks-image":"^3.2.12","@crave/farmblocks-input-radio":"^3.6.8","@crave/farmblocks-text":"^3.6.11","@crave/farmblocks-theme":"^1.12.4","polished":"^4.1.3"},"gitHead":"443e9ce163129074f181fdf4a554f6314d2f799e","contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"_id":"@crave/farmblocks-sidenav@3.2.9","_nodeVersion":"16.13.1","_npmVersion":"lerna/4.0.0/node@v16.13.1+x64 (linux)","dist":{"integrity":"sha512-vaWhtow6ErCfJiqovBG3lGuHR0yAOIBR9YAkPvSznbQ1pvJyzHd8QJMew6T3ZZ/Ui3FWBsWbLDDJwIUggXrQPQ==","shasum":"5a4ba64457da72cee9ae2a86cd4660849996ffd2","tarball":"https://registry.npmjs.org/@crave/farmblocks-sidenav/-/farmblocks-sidenav-3.2.9.tgz","fileCount":21,"unpackedSize":25297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKiiyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo26Q/+JWtVVRqLUps9lJB3rf+F2O6yhdRBKx4IqOSOaO+QbwONcEKZ\r\nbCilk8EWfHcJTzF03DSRbs6kE3ng93BvUMRPdu6rn7Kal1ASpTNTutPMBRYe\r\n5uu9EeaCKPaqESyq6fgf6zy7cFzdniS4671xcNLmV0p/9TZI/LSPz44MIXP4\r\nTM2hIFK0PI5LmVZ8W9RjC8KXXCxK4ULp2zg1AJDBg45jD1Xwqo/WQE2nkbN4\r\nHVCl68mznES8SC+301Hj3x4L17dlJkOYm/sK4uQHVvz61AKfj1U/t/WH43bg\r\n8bCtsC6psi/CHL4K6Mqn6nXvDS5jtnPUQLQnl2nP9O7gtc4njrPewfrgwwPk\r\n/XQfwwhjAulik2IaJRkXlsrqcuc58HQkq+znleuopRA9nphUJej4HxmJ5wSq\r\nxdL3Xj2jo3mrvB7uZ/852xMyAZTqqL8xuWI+ts6wVLlAMkp9j3wQBQ027NcU\r\nfFgI/+ijop0AJ8i/KJzwIffTbU7XRVHy6K6qr4+ZwG744R9pINCpv72jGqz0\r\n2SBz0cfQkn9gKvnF+bRsC+xeUTSFNx+Mndf8SAAE545FtqWPaIber9FKfdOv\r\nFqHoG+H6+GC3/5IJHo+ZhDSQbbxmp9qzS5u2HQHjjM1CnFE8YvISS/cuG9EL\r\noCrWOQWLk+7s/2aTh85OfznggqDdFOmQvso=\r\n=19DQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmNEklDCKZUfYITn3wgZJ/+LxPIcP7eTZIQIQmsx5HxwIgWrjLDMDc6P/6BLJPYLg15CweTzKNQnI+Pd/eDyLsJjA="}]},"_npmUser":{"name":"alcferreira","email":"alcf.2099@gmail.com"},"directories":{},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/farmblocks-sidenav_3.2.9_1646930098506_0.09029997329790307"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-11T20:20:37.262Z","0.1.1-alpha-side-nav-js-5314.1.84":"2019-10-11T20:20:37.569Z","modified":"2022-04-05T01:38:44.069Z","0.1.1-alpha-side-nav-js-5315.1.81":"2019-10-11T20:44:05.684Z","0.1.1-alpha-side-nav-js-5317.1.74":"2019-10-13T21:40:38.776Z","0.1.1-alpha-side-nav-js-5328.1.84":"2019-10-14T14:49:42.547Z","0.1.1-alpha-side-nav-js-5339.1.81":"2019-10-15T00:36:08.747Z","0.1.1-alpha-side-nav-js-5343.1.77":"2019-10-15T13:48:34.059Z","0.1.1-alpha.2717":"2019-10-16T17:22:33.403Z","0.1.1-alpha-side-nav-js-5368.1.72":"2019-10-16T18:08:41.644Z","0.1.1-alpha-side-nav-js-5370.1.70":"2019-10-16T18:57:40.532Z","0.1.1-alpha-side-nav-js-5424.1.62":"2019-10-23T17:50:38.325Z","0.1.1-alpha-side-nav-js-5427.1.61":"2019-10-23T17:59:31.046Z","0.1.1-alpha-side-nav-js-5441.1.50":"2019-10-28T18:06:23.566Z","0.1.1-alpha-side-nav-js-5463.1.50":"2019-10-29T17:43:15.463Z","0.1.1-alpha-side-nav-js-5474.1.50":"2019-10-31T20:11:55.831Z","0.1.1-alpha-side-nav-js-5500.1.49":"2019-11-04T13:48:52.589Z","0.1.1-alpha-side-nav-js-5503.1.49":"2019-11-08T01:45:31.033Z","0.1.1-alpha-side-nav-js-5505.1.49":"2019-11-08T02:45:13.821Z","0.1.1-alpha-side-nav-js-5507.1.49":"2019-11-08T16:21:09.301Z","0.1.1-alpha-side-nav-js-5542.1.49":"2019-11-13T14:59:57.666Z","1.0.0":"2019-11-13T17:34:11.740Z","1.0.1-alpha-mobile-tooltip-5545.1.5":"2019-11-13T19:10:12.955Z","1.0.1-alpha-use-new-icons-5553.1.26":"2019-11-14T16:02:13.162Z","1.0.1-alpha-mobile-tooltip-5561.1.12":"2019-11-18T13:46:10.963Z","1.0.1-alpha-use-new-icons-5568.1.29":"2019-11-18T21:02:38.038Z","1.0.1-alpha-use-new-icons-5574.1.34":"2019-11-19T17:30:55.466Z","1.0.1-alpha-use-new-icons-5576.1.28":"2019-11-19T17:48:20.408Z","2.0.0":"2019-11-19T18:02:43.919Z","2.0.1-alpha-mobile-tooltip-5579.1.12":"2019-11-19T20:15:32.141Z","2.0.1-alpha-drawer-5585.1.3":"2019-11-20T18:05:51.216Z","2.0.1-alpha-responsive-modal-5591.1.7":"2019-11-22T19:31:49.983Z","2.0.1-alpha-responsive-modal-5594.1.9":"2019-11-26T14:47:22.684Z","2.0.1-alpha-responsive-modal-5596.1.9":"2019-11-26T14:47:38.399Z","2.1.0":"2019-11-26T16:18:53.458Z","2.0.1-alpha-mobile-tooltip-5599.1.14":"2019-11-26T16:37:46.231Z","2.0.1-alpha-responsive-modal-5603.1.10":"2019-11-26T18:47:06.248Z","2.1.1":"2019-11-26T19:12:27.040Z","2.0.1-alpha-responsive-modal-5618.1.12":"2019-11-27T18:42:56.309Z","2.1.2-alpha-responsive-modal-5622.1.8":"2019-11-27T18:56:07.500Z","2.1.2":"2019-11-27T19:18:12.263Z","2.1.3":"2019-11-27T20:29:25.639Z","2.1.4-alpha-fix-proptype-warning-5631.1.1":"2019-11-28T19:50:45.139Z","2.1.4":"2019-11-28T20:07:15.277Z","2.1.5-alpha-tangerine-5635.1.1":"2019-12-03T18:56:06.896Z","2.1.5":"2019-12-03T19:18:40.746Z","2.1.6":"2019-12-18T16:56:25.109Z","2.1.7-alpha-image-with-box-shadow-5646.1.2":"2019-12-27T18:33:15.348Z","2.1.7":"2019-12-27T18:48:44.678Z","2.1.8-alpha-link-fontweight-5650.1.2":"2020-01-03T17:55:19.533Z","2.1.8":"2020-01-03T18:36:35.964Z","2.1.9-alpha-new-primary-button-colors-5656.1.2":"2020-01-08T17:11:53.289Z","2.1.9":"2020-01-08T17:33:44.335Z","2.1.10-alpha-responsive-text-5665.1.6":"2020-01-28T14:42:15.710Z","2.1.10":"2020-01-28T19:04:41.906Z","2.1.11-alpha-card-border-5671.1.2":"2020-02-03T20:05:21.620Z","2.1.11-alpha-card-border-5673.1.3":"2020-02-04T14:15:52.590Z","2.1.11":"2020-02-04T17:22:46.161Z","2.1.12-alpha-upd-dep-280220-5690.1.28":"2020-03-05T19:57:23.642Z","2.1.12":"2020-03-06T15:39:05.908Z","2.1.13":"2020-05-13T18:21:07.788Z","2.1.14":"2020-05-14T14:32:00.785Z","2.1.15-alpha-new-label-5742.1.5":"2020-06-19T19:34:33.421Z","2.1.15-alpha-redesign-form-fields-5751.1.9":"2020-06-23T14:11:35.050Z","2.1.15-alpha-redesign-form-fields-5753.1.9":"2020-06-23T14:52:09.262Z","2.1.15-alpha-new-label-5765.1.5":"2020-06-25T12:37:26.712Z","2.1.15":"2020-06-25T15:52:53.152Z","2.1.15-alpha-redesign-form-fields-5772.1.8":"2020-06-25T16:27:25.524Z","2.1.16-alpha-redesign-form-fields-5774.1.4":"2020-06-25T16:31:45.067Z","2.1.16-alpha-redesign-form-fields-5775.1.6":"2020-06-25T16:39:29.676Z","2.1.16-alpha-redesign-form-fields-5777.1.6":"2020-06-25T16:50:43.259Z","2.1.16-alpha-redesign-form-fields-5789.1.7":"2020-06-30T14:03:10.344Z","2.1.16":"2020-06-30T14:11:03.879Z","2.1.17-alpha-dropdown-button-props-5805.1.3":"2020-07-07T15:24:41.447Z","2.1.17":"2020-07-08T11:41:18.911Z","2.1.18-alpha-fix-icons-react-import-5808.1.2":"2020-07-09T14:55:22.127Z","2.1.18-alpha-fix-icons-react-import-5810.1.3":"2020-07-09T16:10:50.678Z","2.1.18-alpha-fix-icons-react-import-5812.1.4":"2020-07-09T16:22:14.115Z","2.1.18-alpha-fix-icons-react-import-5814.1.2":"2020-07-09T17:13:59.322Z","2.1.18-alpha-fix-icons-react-import-5816.1.3":"2020-07-09T17:24:25.876Z","2.1.18-alpha-fix-github-dribbble-icons-5818.1.1":"2020-07-09T17:47:02.813Z","2.1.18-alpha-another-icon-test-5829.1.4":"2020-07-13T15:06:53.708Z","2.1.18-alpha-another-icon-test-5832.1.6":"2020-07-13T15:33:15.756Z","3.0.0":"2020-07-14T16:24:39.024Z","3.0.1-alpha-protected-currency-5867.1.9":"2020-08-04T18:57:35.601Z","3.0.1-alpha-button-redesign-5884.1.23":"2020-09-02T19:52:32.332Z","3.0.1-alpha-button-redesign-5888.1.26":"2020-09-03T19:39:57.766Z","3.0.1-alpha-button-redesign-5890.1.26":"2020-09-03T19:49:10.929Z","3.0.1-alpha-button-redesign-5892.1.22":"2020-09-04T16:36:43.911Z","3.0.1":"2020-09-04T16:54:27.654Z","3.0.2-alpha-fix-button-white-space-5896.1.2":"2020-09-09T14:29:23.859Z","3.0.2-alpha-fix-button-white-space-5898.1.2":"2020-09-09T19:10:46.087Z","3.0.2":"2020-09-09T19:33:49.102Z","3.0.3-alpha-button-line-height-5901.1.2":"2020-09-10T12:20:37.011Z","3.0.3":"2020-09-10T12:52:55.684Z","3.0.4-alpha-modal-ssr-5906.1.1":"2020-09-25T18:42:44.475Z","3.0.4":"2020-09-28T12:26:44.708Z","3.0.5-alpha-esmodules-5917.1.6":"2020-10-14T14:46:10.045Z","3.0.5-alpha-esmodules-5921.1.7":"2020-10-15T13:30:41.719Z","3.0.5-alpha-esmodules-5925.1.6":"2020-10-21T18:28:31.494Z","3.0.5":"2020-10-21T19:28:58.492Z","3.0.6-alpha-icon-publish-5935.1.5":"2020-10-29T11:59:45.809Z","3.0.6":"2020-10-29T14:20:31.834Z","3.0.7-alpha-table-redesign-manual-1.8":"2021-01-21T12:14:47.896Z","3.0.7-alpha-modal-adjusts-5972.1.18":"2021-02-09T13:55:41.966Z","3.0.7-alpha-modal-adjusts-5973.1.20":"2021-02-09T15:19:15.515Z","3.0.7-alpha-modal-adjusts-5974.1.19":"2021-02-09T19:58:19.281Z","3.0.7":"2021-02-10T14:19:02.532Z","3.0.8-alpha-fix-empty-state-proptype-5977.1.1":"2021-02-10T21:23:47.848Z","3.0.8-alpha-fix-empty-state-proptype-5981.1.3":"2021-02-11T13:26:00.577Z","3.0.8":"2021-02-11T14:04:55.910Z","3.0.9-alpha-empty-state-styles-5986.1.2":"2021-02-15T14:21:41.171Z","3.0.9-alpha-empty-state-styles-5989.1.2":"2021-02-17T14:17:54.398Z","3.0.9":"2021-02-17T14:35:15.669Z","3.0.10-alpha-update-deps-032021-6011.1.17":"2021-03-31T14:29:17.677Z","3.0.10-alpha-update-deps-032021-6016.1.21":"2021-03-31T16:53:34.152Z","3.0.10-alpha-update-deps-032021-6038.1.36":"2021-04-09T19:19:38.939Z","3.0.10":"2021-04-19T14:43:46.102Z","3.0.11-alpha-update-icons-6066.1.4":"2021-04-27T15:07:59.597Z","3.0.11-alpha-update-icons-6070.1.4":"2021-04-27T20:50:28.687Z","3.0.11-alpha-update-icons-1.4":"2021-04-28T14:23:49.683Z","3.0.11-alpha-update-icons-2.4":"2021-04-28T15:19:32.224Z","3.1.0":"2021-04-29T12:20:03.682Z","3.1.1-alpha-sidenav-forward-ref-6105.1.1":"2021-06-08T16:35:13.271Z","3.2.0":"2021-06-09T15:05:41.804Z","3.2.1":"2021-07-01T18:00:30.138Z","3.2.2-alpha-add-font-size-6125.1.1":"2021-07-07T16:54:07.071Z","3.2.2":"2021-07-07T17:24:28.047Z","3.2.3-alpha-fix-useScrollLock-6130.1.1":"2021-07-23T17:14:48.219Z","3.2.3":"2021-07-23T22:18:00.694Z","3.2.6-alpha-lerna-force-publish-6137.1.0":"2021-07-26T13:54:39.793Z","3.2.6-alpha-adjust-xsmall-font-size-value-6142.1.0":"2021-08-11T17:25:11.898Z","3.2.6":"2021-08-11T18:10:43.674Z","3.2.7-alpha-update-deps-6181.1.11":"2021-12-30T18:12:44.946Z","3.2.7":"2022-01-05T12:49:57.174Z","3.2.8-alpha-fix-deps-6232.1.2":"2022-02-09T20:31:43.168Z","3.2.8":"2022-02-10T14:42:12.713Z","3.2.9-alpha-react-responsive-6256.1.3":"2022-03-10T15:07:01.035Z","3.2.9":"2022-03-10T16:34:58.658Z"},"maintainers":[{"name":"viniciusmartin","email":"vinicius.martin@cravehq.com"},{"name":"luis.nascimento","email":"luis.nascimento@cravehq.com"},{"name":"seocam","email":"seocam@seocam.com"},{"name":"vnakamura","email":"hello@vnakamura.com"},{"name":"alcferreira","email":"alcf.2099@gmail.com"},{"name":"imwra","email":"me@imwra.com"}],"homepage":"https://github.com/CraveFood/farmblocks#readme","keywords":["farmblocks","react","sidebar","nav"],"repository":{"type":"git","url":"git+https://github.com/CraveFood/farmblocks.git"},"contributors":[{"name":"Crave Food Systems:"},{"email":"https://github.com/CraveFood"},{"name":"Authors:"},{"name":"André L. C. Ferreira","email":"alcf.2099@gmail.com"},{"name":"Mateus Stanki","email":"devstanki@gmail.com"},{"name":"Victor Pinho","email":"vitorpinho376"},{"name":"Vinicius Nakamura","email":"vNakamura"}],"author":{"name":"Crave Food Systems and AUTHORS"},"bugs":{"url":"https://github.com/CraveFood/farmblocks/issues"},"license":"MIT","readme":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)\n\n# Farmblocks SideNav <!-- omit in toc -->\n\nA React Sidebar Navigation component\n\n## Table of Contents <!-- omit in toc -->\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [SideNav](#sidenav)\n  - [NavItem](#navitem)\n- [Helpers](#helpers)\n  - [PageWrapper](#pagewrapper)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @crave/farmblocks-sidenav\n```\n\nor with yarn\n\n```sh\nyarn add @crave/farmblocks-sidenav\n```\n\n## Usage\n\nBasic example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav from \"@crave/farmblocks-sidenav\";\n\nconst App = () => <SideNav render={() => <div>Sidebar Content</div>} />;\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nBasic example with NavItem and PageWrapper\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav\n      render={() => (\n        <>\n          <NavItem active>Item 1 (active)</NavItem>\n          <NavItem>Item 2</NavItem>\n          <NavItem>Item 3</NavItem>\n        </>\n      )}\n    />\n    <PageWrapper expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nComplete Example\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, { NavItem, PageWrapper } from \"@crave/farmblocks-sidenav\";\n\nconst App = () => {\n  const [expanded, { toggle, collapse }] = useToggle(false);\n  const [selected, setSelected] = useState(tabs[0]);\n  const tabs = [\"purveyor\", \"order\", \"search\", \"meat\"];\n  const icons = {\n    purveyor: <MdVendors />,\n    order: <MdOrders />,\n    search: <MdSearch />,\n    meat: <LgMeats />,\n  };\n\n  return (\n    <>\n      <SideNav\n        expanded={expanded}\n        onToggle={toggle}\n        onClose={collapse}\n        render={props => (\n          <>\n            <NavHeader />\n            {tabs.map(tab => (\n              <NavItem\n                key={tab}\n                onClick={() => setSelected(tab)}\n                active={tab === selected}\n                icon={icons[tab]}\n                {...props}\n              >\n                {tab}\n              </NavItem>\n            ))}\n          </>\n        )}\n      />\n\n      <PageWrapper expanded={expanded}>\n        <LoremIpsumBlock />\n      </PageWrapper>\n    </>\n  );\n};\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\nTo see these and more examples running, visit our [storybook](https://cravefood.github.io/farmblocks/?path=/story/sidenav-sidenav--side-nav-overlay)\n\n## API\n\n### SideNav\n\n- **expanded** (_Boolean_) = `true`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Style variant.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **onToggle** (_Function_)\n\n  > Passing this prop will render a hamburguer button on the page top/left corner, that will trigger this function on click.\n\n- **onClose** (_Function_)\n\n  > Passing this prop will render a close button on the sidebar top/right corner when expanded. (only applied on \"fullScreen\" || \"overlay\" variant)\n\n- **render** (_Function_)\n\n  > Render the sidebar content, passing as args the following props: highlightColor, variant.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover nav item and close button.\n\n- **backgroundColor** (_String_) = `farmblocks.theme.colors.SUGAR`\n\n  > Sidebar background color.\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **zIndex** (_Number_ ) = `100`\n\n  > The sidebar z-index\n\n### NavItem\n\n- **active** (_Boolean_)\n\n  > Whether the item is with active style or not.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > On \"fullScreen\" variant set rounded style, the other ones don't affect this component.\n\n- **children** (_Node_)\n\n  > Text content.\n\n- **highlightColor** (_String_) = `farmblocks.theme.colors.RED_ORANGE`\n\n  > Color used to highlight active/hover items.\n\n- **backgroundColor** (_String_)\n\n  > NavItem background color.\n\n- **icon** (_Node_)\n\n  > Icon node (don't use `icon` prop along with `image` prop)\n\n- **iconSize** (_String | Number_)\n\n  > Font size for the icon\n\n- **image** (_String_)\n\n  > Image src url (don't use `image` prop along with `icon` prop)\n\n- **imageProps** (_Object_)\n\n  > Props for image component, accept any farmblocks-image prop\n\n- **textProps** (_Object_)\n\n  > Props for children(text) component, accept any farmblocks-text prop\n\n## Helpers\n\n### PageWrapper\n\nWrapper to help your page follow sidenav variants.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport SideNav, {\n  NavItem,\n  PageWrapper,\n  variants,\n} from \"@crave/farmblocks-sidenav\";\n\nconst App = () => (\n  <>\n    <SideNav variant={variants.OVERLAY} expanded />\n    <PageWrapper variant={variants.OVERLAY} expanded>\n      <h1>Page Content</h1>\n    </PageWrapper>\n  </>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n```\n\n**API**\n\n- **expanded** (_Boolean_) = `false`\n\n  > Whether the sidebar is expanded or collapsed.\n\n- **variant** (`\"push\"` | `\"fullScreen\"` | `\"overlay\"`) = `\"push\"`\n\n  > Sidebar variant style.\n\n- **expandedWidth** (_String_) = `\"270px\"`\n\n  > Width on expanded `false` state. (only applied on \"push\" || \"overlay\" variant)\n\n- **collapsedWidth** (_String_) = `\"56px\"`\n\n  > Width on expanded `true` state. (only applied on \"push\" variant)\n\n- **offsetTop** (_String_) = `\"0\"`\n\n  > Top spacing gap.\n\n- **overlayProps** (_Object_)\n\n  > Props passed to overlay component\n\n## License\n\nMIT\n","readmeFilename":"README.md","description":"![Farmblocks logo](https://user-images.githubusercontent.com/7760/31051341-4d280118-a63c-11e7-9e8f-3b375ca8f9a0.png)"}