{"_id":"@ascendtis/react-pro-sidebar","name":"@ascendtis/react-pro-sidebar","dist-tags":{"latest":"1.1.0-alpha.2"},"versions":{"1.1.0-alpha.2":{"name":"@ascendtis/react-pro-sidebar","version":"1.1.0-alpha.2","description":"high level and customizable side navigation","main":"dist/index.js","module":"dist/index.es.js","repository":{"type":"git","url":"git+https://github.com/azouaoui-med/react-pro-sidebar.git"},"author":{"name":"Mohamed Azouaoui","email":"azouaoui.med@gmail.com"},"license":"MIT","private":false,"scripts":{"clean":"rimraf dist","build":"npm run clean && rollup -c","start":"rollup -c -w","storybook":"start-storybook -p 9001","build:storybook":"build-storybook","test":"jest","test:ci":"npm run test --coverage --watchAll=false --runInBand --forceExit","test:watch":"jest --watch","lint":"eslint . --ext .ts,.tsx","lint:fix":"npm run lint --fix","format":"prettier --write .","prepare":"husky install","gh-pages":"npm run build:storybook && gh-pages -d storybook-static"},"peerDependencies":{"react":">=16","react-dom":">=16"},"devDependencies":{"@babel/core":"^7.16.0","@babel/preset-env":"^7.16.4","@babel/preset-react":"^7.16.0","@rollup/plugin-commonjs":"^21.1.0","@rollup/plugin-node-resolve":"^13.3.0","@storybook/addon-essentials":"^6.4.7","@storybook/react":"^6.4.7","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@testing-library/user-event":"^14.4.3","@types/jest":"^27.0.3","@types/react":"^18.0.25","@types/react-dom":"^18.0.9","@typescript-eslint/eslint-plugin":"^5.5.0","@typescript-eslint/parser":"^5.5.0","babel-jest":"^27.4.2","eslint":"^8.4.0","eslint-config-airbnb":"^19.0.2","eslint-config-airbnb-typescript":"^16.1.0","eslint-config-prettier":"^8.3.0","eslint-import-resolver-typescript":"^2.5.0","eslint-plugin-import":"^2.25.3","eslint-plugin-jest-dom":"^3.9.2","eslint-plugin-jsx-a11y":"^6.5.1","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.27.1","eslint-plugin-react-hooks":"^4.3.0","eslint-plugin-testing-library":"^5.0.1","gh-pages":"^4.0.0","husky":"^7.0.0","jest":"^27.4.3","lint-staged":">=10","prettier":"^2.5.1","react":"^18.2.0","react-dom":"^18.2.0","rimraf":"^3.0.2","rollup":"^2.79.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-typescript2":"^0.31.2","typescript":"^4.5.2"},"keywords":["react-component","react-sidebar","layout","sidebar","menu","submenu","component","collapsed","rtl"],"dependencies":{"@emotion/react":"^11.10.5","@emotion/styled":"^11.10.5","@popperjs/core":"^2.11.6","classnames":"^2.3.2"},"types":"./dist/index.d.ts","gitHead":"6514b95ab6ce77bc0cc37e2165d19d599e60df7e","bugs":{"url":"https://github.com/azouaoui-med/react-pro-sidebar/issues"},"homepage":"https://github.com/azouaoui-med/react-pro-sidebar#readme","_id":"@ascendtis/react-pro-sidebar@1.1.0-alpha.2","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-7dmz8CUlYtvn7VF9KrDgyEKfzkDzB+09d8YUgC4ywELn/IZm11tL3VtRZxUzZMMfT9wUwS0IMK2ImN6b4vHMhw==","shasum":"79110a327e42b362210b96f9a9a42a8424197f2e","tarball":"https://registry.npmjs.org/@ascendtis/react-pro-sidebar/-/react-pro-sidebar-1.1.0-alpha.2.tgz","fileCount":27,"unpackedSize":408733,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBqrDoSfsRRUP1fkqTZ6JHgbuHTBXnturO5dwTGLMtmSAiEA67Aost21zimgfMyjsxbAO1ojerW/W9dBJk1FSyPYA+A="}]},"_npmUser":{"name":"sufyan297","email":"sufyan297@gmail.com"},"directories":{},"maintainers":[{"name":"sufyan297","email":"sufyan297@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-pro-sidebar_1.1.0-alpha.2_1689402241062_0.5396648521239158"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-15T06:24:00.955Z","1.1.0-alpha.2":"2023-07-15T06:24:01.226Z","modified":"2023-07-15T06:24:01.523Z"},"maintainers":[{"name":"sufyan297","email":"sufyan297@gmail.com"}],"description":"high level and customizable side navigation","homepage":"https://github.com/azouaoui-med/react-pro-sidebar#readme","keywords":["react-component","react-sidebar","layout","sidebar","menu","submenu","component","collapsed","rtl"],"repository":{"type":"git","url":"git+https://github.com/azouaoui-med/react-pro-sidebar.git"},"author":{"name":"Mohamed Azouaoui","email":"azouaoui.med@gmail.com"},"bugs":{"url":"https://github.com/azouaoui-med/react-pro-sidebar/issues"},"license":"MIT","readme":"# [React Pro Sidebar](https://www.npmjs.com/package/react-pro-sidebar)\n\n[![npm][version]][npm-url]\n[![License][license]][npm-url]\n[![Peer][peer]][npm-url]\n[![Download][download]][npm-url]\n[![Stars][stars]][github-url]\n\n[version]: https://img.shields.io/npm/v/react-pro-sidebar.svg?style=flat-square\n[license]: https://img.shields.io/github/license/azouaoui-med/react-pro-sidebar?style=flat-square\n[peer]: https://img.shields.io/npm/dependency-version/react-pro-sidebar/peer/react?style=flat-square\n[download]: https://img.shields.io/npm/dt/react-pro-sidebar?style=flat-square\n[stars]: https://img.shields.io/github/stars/azouaoui-med/react-pro-sidebar?style=social\n[npm-url]: https://www.npmjs.com/package/react-pro-sidebar\n[github-url]: https://github.com/azouaoui-med/react-pro-sidebar\n\nReact Pro Sidebar provides a set of components for creating high level and customizable side navigation\n\n## Old versions\n\n- [v0.x](https://github.com/azouaoui-med/react-pro-sidebar/tree/v0.x)\n\n## Live Preview\n\n- [Demo](https://azouaoui-med.github.io/react-pro-sidebar/iframe.html?id=playground--playground&args=&viewMode=story)\n\n- [Storybook](https://azouaoui-med.github.io/react-pro-sidebar/?path=/docs/sidebar--basic)\n\n## Screenshot\n\n![react-pro-sidebar](https://user-images.githubusercontent.com/25878302/212479928-553c2d37-793b-4bcd-ac53-352f26337955.jpg)\n\n## Installation\n\n### yarn\n\n```bash\nyarn add react-pro-sidebar\n```\n\n### npm\n\n```bash\nnpm install react-pro-sidebar\n```\n\n## Usage\n\n```jsx\nimport { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';\n\n<Sidebar>\n  <Menu>\n    <SubMenu label=\"Charts\">\n      <MenuItem> Pie charts </MenuItem>\n      <MenuItem> Line charts </MenuItem>\n    </SubMenu>\n    <MenuItem> Documentation </MenuItem>\n    <MenuItem> Calendar </MenuItem>\n  </Menu>\n</Sidebar>;\n```\n\n## Using React Router\n\nYou can make use of the `component` prop to integrate [React Router](https://reactrouter.com/en/main) link\n\n**Example Usage**\n\n```jsx\nimport { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';\nimport { Link } from 'react-router-dom';\n\n<Sidebar>\n  <Menu\n    menuItemStyles={{\n      button: {\n        // the active class will be added automatically by react router\n        // so we can use it to style the active menu item\n        [`&.active`]: {\n          backgroundColor: '#13395e',\n          color: '#b6c8d9',\n        },\n      },\n    }}\n  >\n    <MenuItem component={<Link to=\"/documentation\" />}> Documentation</MenuItem>\n    <MenuItem component={<Link to=\"/calendar\" />}> Calendar</MenuItem>\n    <MenuItem component={<Link to=\"/e-commerce\" />}> E-commerce</MenuItem>\n  </Menu>\n</Sidebar>;\n```\n\n## Customization\n\nWe provide for each component `rootStyles` prop that can be used to customize the styles\n\nits recommended using utility classes (`sidebarClasses`, `menuClasses`) for selecting target child nodes\n\n**Example usage**\n\n```jsx\n<Sidebar\n  rootStyles={{\n    [`.${sidebarClasses.container}`]: {\n      backgroundColor: 'red',\n    },\n  }}\n>\n  // ...\n</Sidebar>\n```\n\nFor `Menu` component, in addition to `rootStyles` you can also use `menuItemStyles` prop for customizing all `MenuItem` & `SubMenu` components and their children\n\n**Type definition**\n\n```jsx\ninterface MenuItemStyles {\n  root?: ElementStyles;\n  button?: ElementStyles;\n  label?: ElementStyles;\n  prefix?: ElementStyles;\n  suffix?: ElementStyles;\n  icon?: ElementStyles;\n  subMenuContent?: ElementStyles;\n  SubMenuExpandIcon?: ElementStyles;\n}\n\ntype ElementStyles = CSSObject | ((params: MenuItemStylesParams) => CSSObject | undefined);\n```\n\n**Example usage**\n\n```jsx\n<Sidebar>\n  <Menu\n    menuItemStyles={{\n      button: ({ level, active, disabled }) => {\n        // only apply styles on first level elements of the tree\n        if (level === 0)\n          return {\n            color: disabled ? '#f5d9ff' : '#d359ff',\n            backgroundColor: active ? '#eecef9' : undefined,\n          };\n      },\n    }}\n  >\n    //...\n  </Menu>\n</Sidebar>\n```\n\n## API\n\n<table>\n    <thead>\n        <tr>\n            <th>Component</th>\n            <th>Prop</th>\n            <th>Type</th>\n            <th>Description</th>\n            <th>Default</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td rowspan=13>Sidebar</td>\n            <td >defaultCollapsed</td>\n            <td><code>boolean</code></td>\n            <td>Initial collapsed status</td>\n            <td><code>false</code></td>\n        </tr>\n        <tr>\n            <td>collapsed</td>\n            <td><code>boolean</code></td>\n            <td>Sidebar collapsed state</td>\n            <td><code>false</code></td>\n        </tr>\n        <tr>\n            <td>toggled</td>\n            <td><code>boolean</code></td>\n            <td>Sidebar toggled state</td>\n            <td><code>false</code></td>\n        </tr>\n        <tr>\n            <td>width</td>\n            <td><code>number | string</code></td>\n            <td>Width of the sidebar</td>\n            <td><code>270px</code></td>\n        </tr>\n        <tr>\n            <td>collapsedWidth</td>\n            <td><code>number | string</code></td>\n            <td>Width of the sidebar on collapsed state</td>\n            <td><code>80px</code></td>\n        </tr>\n        <tr>\n            <td>backgroundColor</td>\n            <td><code>string</code></td>\n            <td>Set background color for sidebar</td>\n            <td><code>rgb(249, 249, 249, 0.7)</code></td>\n        </tr>\n        <tr>\n            <td>image</td>\n            <td><code>string</code></td>\n            <td>Url of the image to use in the sidebar background, need to apply transparency to background color </td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>breakPoint</td>\n            <td><code>xs</code> | <code>sm</code> | <code>md</code> | <code>lg</code> | <code>xl</code> | <code>xxl</code> | <code>all</code></td>\n            <td>Set when the sidebar should trigger responsiveness behavior </td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>customBreakPoint</td>\n            <td><code>string</code></td>\n            <td>Set custom breakpoint value, this will override breakPoint prop </td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>transitionDuration</td>\n            <td><code>number</code></td>\n            <td>Duration for the transition in milliseconds to be used in collapse and toggle behavior</td>\n            <td><code>300</code></td>\n        </tr>\n        <tr>\n            <td>rtl</td>\n            <td><code>boolean</code></td>\n            <td>RTL direction</td>\n            <td><code>false</code></td>\n        </tr>\n        <tr>\n            <td>rootStyles</td>\n            <td><code>CSSObject</code></td>\n            <td>Apply styles to sidebar element</td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>onBackdropClick</td>\n            <td><code>() => void</code></td>\n            <td>Callback function to be called when backdrop is clicked</td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td rowspan=5>Menu</td>\n            <td>closeOnClick</td>\n            <td><code>boolean</code></td>\n            <td>If <code>true</code> and sidebar is in collapsed state, submenu popper will automatically close on MenuItem click</td>\n            <td><code>false</code></td>\n        </tr>\n         <tr>\n            <td>menuItemStyles</td>\n            <td><code>MenuItemStyles</code></td>\n            <td>Apply styles to MenuItem and SubMenu components and their children </td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td>renderExpandIcon</td>\n            <td><code>(params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) => React.ReactNode</code></td>\n            <td>Render method for customizing submenu expand icon</td>\n            <td>-</td>\n        </tr>\n          <tr>\n            <td>transitionDuration</td>\n            <td><code>number</code></td>\n            <td>Transition duration in milliseconds to use when sliding submenu content</td>\n            <td><code>300</code></td>\n        </tr>\n        <tr>\n            <td>rootStyles</td>\n            <td><code>CSSObject</code></td>\n            <td>Apply styles from Menu root element</td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td rowspan=7>MenuItem</td>\n            <td>icon</td>\n            <td><code>ReactNode</code></td>\n            <td>Icon for the menu item </td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td>active</td>\n            <td><code>boolean</code></td>\n            <td>If <code>true</code>, the component is active</td>\n            <td><code>false</code></td>\n        </tr>\n         <tr>\n            <td>disabled</td>\n            <td><code>boolean</code></td>\n            <td>If <code>true</code>, the component is disabled </td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td>prefix</td>\n            <td><code>ReactNode</code></td>\n            <td>Add a prefix to the menuItem </td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td>suffix</td>\n            <td><code>ReactNode</code></td>\n            <td>Add a suffix to the menuItem </td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td>component</td>\n            <td><code>string | ReactElement</code></td>\n            <td>A component used for menu button node, can be string (ex: 'div') or a component </td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>rootStyles</td>\n            <td><code>CSSObject</code></td>\n            <td>Apply styles to MenuItem element</td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td rowspan=11>SubMenu</td>\n            <td>label</td>\n            <td><code>string | ReactNode</code></td>\n            <td>Label for the submenu </td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td>icon</td>\n            <td><code>ReactNode</code></td>\n            <td>Icon for submenu</td>\n            <td>-</td>\n        </tr>\n         <tr>\n            <td>defaultOpen</td>\n            <td><code>boolean</code></td>\n            <td>Set if the submenu is open by default</td>\n            <td><code>false</code></td>\n        </tr>\n         <tr>\n            <td>open</td>\n            <td><code>boolean</code></td>\n            <td>Set open value if you want to control the state</td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>active</td>\n            <td><code>boolean</code></td>\n            <td>If <code>true</code>, the component is active</td>\n            <td><code>false</code></td>\n        </tr>\n         <tr>\n            <td>disabled</td>\n            <td><code>boolean</code></td>\n            <td>If <code>true</code>, the component is disabled </td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>prefix</td>\n            <td><code>ReactNode</code></td>\n            <td>Add a prefix to the submenu </td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>suffix</td>\n            <td><code>ReactNode</code></td>\n            <td>Add a suffix to the submenu </td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>onOpenChange</td>\n            <td><code>(open: boolean) => void</code></td>\n            <td>Callback function called when submenu state changes</td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>component</td>\n            <td><code>string | React.ReactElement</code></td>\n            <td>A component used for menu button node, can be string (ex: 'div') or a component </td>\n            <td>-</td>\n        </tr>\n        <tr>\n            <td>rootStyles</td>\n            <td><code>CSSObject</code></td>\n            <td>Apply styles to SubMenu element</td>\n            <td>-</td>\n        </tr>\n    </tbody>\n\n</table>\n\n## License\n\nMIT © [Mohamed Azouaoui](https://azouaoui.netlify.app)\n","readmeFilename":"README.md"}