{"_id":"@7span/phoenix-react-ui-sidebar","_rev":"4-1a524cab3ee29edc5407f6764493d6c2","name":"@7span/phoenix-react-ui-sidebar","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@7span/phoenix-react-ui-sidebar","version":"1.0.0","keywords":[],"author":{"name":"7span"},"license":"MIT","_id":"@7span/phoenix-react-ui-sidebar@1.0.0","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"homepage":"https://github.com/akshay-7span/react-component-library#readme","bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"dist":{"shasum":"dddb819803ef00c9b655b1429561dfdf58262740","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-sidebar/-/phoenix-react-ui-sidebar-1.0.0.tgz","fileCount":4,"integrity":"sha512-J94IxFquQYf7XSakeJmw8qwXaOib2hSHXDFR07RbLLRgSW2Phld/6aX0f3wNk2MrHx9G03et7O3EIUJ0yTH2dg==","signatures":[{"sig":"MEUCIGhL5s8VxfTB4gZ2GqE4b0qrSn5mAOhrXCELI86t6/FLAiEAriqZswrKZymSQsxA6/62Vh2y6K022JE9xVVRUFWtQI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14876},"main":"index.js","gitHead":"ab65175ded5708f360c4d31ddf0b0cebff82bdf8","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"repository":{"url":"git+https://github.com/akshay-7span/react-component-library.git","type":"git"},"_npmVersion":"8.19.3","description":"A customizable button component for React applications, built with MUI.","directories":{},"_nodeVersion":"18.13.0","dependencies":{"yaml":"^1.10.2","react":"^18.3.1","react-dom":"^18.3.1","react-router":"^6.23.1","@mui/material":"^5.15.20","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","react-router-dom":"^6.23.1","@mui/icons-material":"^5.15.20"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/phoenix-react-ui-sidebar_1.0.0_1720765882161_0.4001558019745184","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@7span/phoenix-react-ui-sidebar","version":"1.0.1","keywords":[],"author":{"name":"7span"},"license":"MIT","_id":"@7span/phoenix-react-ui-sidebar@1.0.1","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"homepage":"https://github.com/akshay-7span/react-component-library#readme","bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"dist":{"shasum":"452aedf15da258cf72c4f79835c0618d8e6aed6e","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-sidebar/-/phoenix-react-ui-sidebar-1.0.1.tgz","fileCount":6,"integrity":"sha512-CWFimw+nwjJ0RddDlF435X948Gxx8NizJp2slTv6MIW+33ntIJZvLv7tQE4+0WR+uu7i+Hn9oUyydDp/9JFvSw==","signatures":[{"sig":"MEUCIQC86tauujuuafRQmTHNxY5q57r9Se+1B6yTnorZHyJBOwIgJKIY8BMQRwaCsqwJ+UokAQEckeFYYZqWOmzY9FhNnUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":43022},"main":"index.js","gitHead":"d80134af39bf5d2cb9ccaff0736dcae739077da5","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"repository":{"url":"git+https://github.com/akshay-7span/react-component-library.git","type":"git"},"_npmVersion":"8.19.3","description":"A customizable button component for React applications, built with MUI.","directories":{},"_nodeVersion":"18.13.0","dependencies":{"yaml":"^1.10.2","react":"^18.3.1","react-dom":"^18.3.1","react-router":"^6.23.1","@mui/material":"^5.15.20","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","react-router-dom":"^6.23.1","@mui/icons-material":"^5.15.20"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/phoenix-react-ui-sidebar_1.0.1_1720768050858_0.9432848981124635","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@7span/phoenix-react-ui-sidebar","version":"1.0.2","keywords":[],"author":{"name":"7span"},"license":"MIT","_id":"@7span/phoenix-react-ui-sidebar@1.0.2","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"homepage":"https://github.com/akshay-7span/react-component-library#readme","bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"dist":{"shasum":"01c2238cb6f4fede22b9a1960bd6ec09c9cd30ba","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-sidebar/-/phoenix-react-ui-sidebar-1.0.2.tgz","fileCount":6,"integrity":"sha512-j9A6nmtWMcCTMH6x7GLJtCsph5CATJYV3wUa4RtFUhTnvU1TwsLRBT4uzOH15uSi+Zq3RiTE1kzCyiGdWjf9Bw==","signatures":[{"sig":"MEQCIHsW08ayt+oqOqn1Zw/4J1sF5faeHJWijrOykBpyeCaqAiB3bBqauEfLqAizSf3lcccMiefriv4YgkymkDbBrFK5gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":43018},"main":"index.js","gitHead":"d80134af39bf5d2cb9ccaff0736dcae739077da5","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"repository":{"url":"git+https://github.com/akshay-7span/react-component-library.git","type":"git"},"_npmVersion":"8.19.3","description":"A customizable button component for React applications, built with MUI.","directories":{},"_nodeVersion":"18.13.0","dependencies":{"yaml":"^1.10.2","react":"^18.3.1","react-dom":"^18.3.1","react-router":"^6.23.1","@mui/material":"^5.15.20","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","react-router-dom":"^6.23.1","@mui/icons-material":"^5.15.20"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/phoenix-react-ui-sidebar_1.0.2_1720768126945_0.355524645070038","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@7span/phoenix-react-ui-sidebar","version":"1.0.3","keywords":[],"author":{"name":"7span"},"license":"MIT","_id":"@7span/phoenix-react-ui-sidebar@1.0.3","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"homepage":"https://github.com/akshay-7span/react-component-library#readme","bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"dist":{"shasum":"bfdc44d55fe19f970a92132e8eb5d9b931a79c66","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-sidebar/-/phoenix-react-ui-sidebar-1.0.3.tgz","fileCount":6,"integrity":"sha512-fsi018OewAr8dzjXzpVGbKEaEpue7GZTh4XO7VjFyLKc2xOs8jhUb5rzznewTngLMIoiLNgayOf25OjUWmPhZw==","signatures":[{"sig":"MEQCIHfxDgnxrDRMLuWqcPeH3H3IwNEuIzJBriYkkmkzPXU4AiB1j20GZQH0TxOv1DLsFXwYohIErnZnwQufVD7xjYFcnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":43094},"main":"index.js","gitHead":"99def0082c89ece2a4ec7cde18d071d4bc648c34","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"repository":{"url":"git+https://github.com/akshay-7span/react-component-library.git","type":"git"},"_npmVersion":"8.19.3","description":"A customizable button component for React applications, built with MUI.","directories":{},"_nodeVersion":"18.13.0","dependencies":{"yaml":"^1.10.2","react":"^18.3.1","react-dom":"^18.3.1","react-router":"^6.23.1","@mui/material":"^5.15.20","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","react-router-dom":"^6.23.1","@mui/icons-material":"^5.15.20"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/phoenix-react-ui-sidebar_1.0.3_1720768296556_0.16666202313220868","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@7span/phoenix-react-ui-sidebar","version":"1.0.4","description":"A customizable button component for React applications, built with MUI.","main":"index.js","repository":{"type":"git","url":"git+https://github.com/akshay-7span/react-component-library.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":{"name":"7span"},"license":"MIT","dependencies":{"react":"^18.3.1","react-router":"^6.23.1","react-dom":"^18.3.1","yaml":"^1.10.2","@emotion/react":"^11.11.4","@emotion/styled":"^11.11.5","@mui/icons-material":"^5.15.20","@mui/material":"^5.15.20","react-router-dom":"^6.23.1"},"bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"homepage":"https://github.com/akshay-7span/react-component-library#readme","devDependencies":{},"gitHead":"99def0082c89ece2a4ec7cde18d071d4bc648c34","_id":"@7span/phoenix-react-ui-sidebar@1.0.4","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-G5Sq6fU+TrRENGAhpcaMuG/5km4nDQlaWRLnWC0n5gjQv3fgaELm/jjK3PwD75J58f2tXrABg/FNG/GMpsD/Jg==","shasum":"e415ede5d70b92a048375323d7315ef046a5899f","tarball":"https://registry.npmjs.org/@7span/phoenix-react-ui-sidebar/-/phoenix-react-ui-sidebar-1.0.4.tgz","fileCount":6,"unpackedSize":43170,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzANdVAEuTpdX2YlbAObxB3ipFrXGTNGroSmHnv2xsTAIgdL+9cj18M/lKqY17fPjZfpYANTN4votXfzMQQ6q0eAc="}]},"_npmUser":{"name":"theharsh","email":"mail@theharsh.in"},"directories":{},"maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/phoenix-react-ui-sidebar_1.0.4_1720768364021_0.9404809919723673"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-12T06:31:22.043Z","modified":"2024-07-12T07:12:44.348Z","1.0.0":"2024-07-12T06:31:22.286Z","1.0.1":"2024-07-12T07:07:31.001Z","1.0.2":"2024-07-12T07:08:47.071Z","1.0.3":"2024-07-12T07:11:36.706Z","1.0.4":"2024-07-12T07:12:44.149Z"},"bugs":{"url":"https://github.com/akshay-7span/react-component-library/issues"},"author":{"name":"7span"},"license":"MIT","homepage":"https://github.com/akshay-7span/react-component-library#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/akshay-7span/react-component-library.git"},"description":"A customizable button component for React applications, built with MUI.","maintainers":[{"name":"theharsh","email":"mail@theharsh.in"}],"readme":"# Custom Sidebar Component\r\n\r\nA customizable sidebar component for React applications, built with MUI.\r\n\r\n## Features\r\n\r\n- Expandable/collapsible sections\r\n- Add new folders dynamically\r\n- Customizable styles\r\n- Optional search functionality\r\n- Integration with React Router\r\n\r\n## Installation\r\n\r\nInstall the package via npm:\r\n\r\n```bash\r\nnpm install @7span/phoenix-react-ui-sidebar\r\n```\r\n\r\nOr via yarn:\r\n```bash\r\nyarn add @7span/phoenix-react-ui-sidebar\r\n```\r\n\r\n## Usage\r\nHere's a basic example of how to use the custom Sidebar component in your React application:\r\n\r\n```\r\nimport React from \"react\";\r\nimport Sidebar from \"@7span/phoenix-react-ui-sidebar\";\r\nimport { BrowserRouter as Router } from \"react-router-dom\";\r\n\r\nconst menuItems = [\r\n { id: \"1\", text: \"Dashboard\", icon: },\r\n { id: \"2\", text: \"Settings\", icon: },\r\n];\r\n\r\nconst folderSections = [\r\n {\r\n id: \"1\",\r\n menuItemId: \"2\",\r\n text: \"Settings\",\r\n folderIcon: ,\r\n folders: [{ id: \"a\", name: \"Profile\" }, { id: \"b\", name: \"Security\" }],\r\n },\r\n];\r\n\r\nconst App = () => {\r\n const handleTabClick = (tabId) => {\r\n console.log(`Tab clicked: ${tabId}`);\r\n };\r\n\r\n const handleFolderClick = (sectionId, folderId) => {\r\n console.log(`Folder clicked: Section ${sectionId}, Folder ${folderId}`);\r\n };\r\n\r\n const handleAddFolder = (sectionId, newFolder) => {\r\n console.log(`New folder added to Section ${sectionId}:`, newFolder);\r\n };\r\n\r\n const handleSearch = (searchTerm) => {\r\n console.log(`Search term: ${searchTerm}`);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default App;\r\n\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|-------------------|-----------|---------|---------------------------------------------------------|\r\n| `menuItems` | Array | `[]` | Array of menu items with `id`, `text`, and `icon` |\r\n| `folderSections` | Array | `[]` | Array of folder sections with `id`, `menuItemId`, `text`, `folderIcon`, and `folders` |\r\n| `onTabClick` | Function | `null` | Callback function when a tab is clicked |\r\n| `onFolderClick` | Function | `null` | Callback function when a folder is clicked |\r\n| `onAddFolder` | Function | `null` | Callback function when a new folder is added |\r\n| `customStyles` | Object | `{}` | Custom styles for various parts of the component |\r\n| `logo` | String | `null` | URL of the logo image |\r\n| `showSearch` | Boolean | `false` | Show/hide the search bar |\r\n| `onSearch` | Function | `null` | Callback function for search input changes |\r\n\r\n\r\n## Customization\r\nYou can customize the Side by passing additional props or overriding the default styles:\r\n\r\n```\r\n\r\n\r\n\r\n```\r\n\r\n## Images\r\n|Sidebar Open | Sidebar collapse|\r\n|:-:|:-:|\r\n||\r\n\r\n\r\n## Author\r\n- Jenish Dadhania\r\n\r\n## Contributing\r\nIf you would like to contribute to the project, please follow these steps:\r\n1. Fork the repository\r\n2. Create a new branch (git checkout -b feature/your-feature)\r\n3. Make your changes\r\n4. Commit your changes (git commit -m 'Add some feature')\r\n5. Push to the branch (git push origin feature/your-feature)\r\n6. Open a Pull Request\r\n\r\n\r\n## License\r\nThis project is licensed under the MIT License\r\n\r\n## Contact\r\nIf you have any questions or suggestions, feel free to open an issue or contact me directly at [yo@7span.com].\r\n\r\n\r\nMade with by 7span\r\n##### This `README.md` file provides comprehensive details about the Sidebar component, including installation instructions, usage examples, prop descriptions, customization options, and the actual component code. Let me know if you need any more adjustments!\r\n\r\n","readmeFilename":"README.md"}