{"id":25834357,"url":"https://github.com/hamzamhadbi/simple-side-menu","last_synced_at":"2025-03-01T00:37:25.317Z","repository":{"id":57360870,"uuid":"159604805","full_name":"HamzaMhadbi/simple-side-menu","owner":"HamzaMhadbi","description":"Simple react side menu","archived":false,"fork":false,"pushed_at":"2024-02-18T22:31:40.000Z","size":579,"stargazers_count":9,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-18T18:03:12.406Z","etag":null,"topics":["navigation","navigation-drawer","react","react-router","sidebar","sidemenu","sidenav"],"latest_commit_sha":null,"homepage":"https://hamzamhadbi.github.io/simple-side-menu","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HamzaMhadbi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-29T03:56:25.000Z","updated_at":"2024-02-02T21:29:36.000Z","dependencies_parsed_at":"2022-09-06T21:41:32.248Z","dependency_job_id":null,"html_url":"https://github.com/HamzaMhadbi/simple-side-menu","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamzaMhadbi%2Fsimple-side-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamzaMhadbi%2Fsimple-side-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamzaMhadbi%2Fsimple-side-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HamzaMhadbi%2Fsimple-side-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HamzaMhadbi","download_url":"https://codeload.github.com/HamzaMhadbi/simple-side-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241293183,"owners_count":19939751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["navigation","navigation-drawer","react","react-router","sidebar","sidemenu","sidenav"],"created_at":"2025-03-01T00:37:24.652Z","updated_at":"2025-03-01T00:37:25.309Z","avatar_url":"https://github.com/HamzaMhadbi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Side Menu\n\na simple Side menu component written only in React.js and CSS3.\n\n\u003e **Important**: This component must be used with React Router V4.\n\n## Demo\n\n[Take a look at the demo](http://HamzaMhadbi.github.io/simple-side-menu)\n\n## Installation\n\nWe need to install react router dom firstly if is it not installed\n\n```bash\nnpm install react-router-dom --save\n```\n\n```bash\nnpm install simple-side-menu --save\n```\n\n## Usage\n\n**menu.js**\n\n```javascript\nexport default [\n  {\n    title: \"Dashboard\",\n    iconClassName: \"fa fa-dashboard\",\n    icon: \"\",\n    to: \"/simple-side-menu\"\n  },\n  {\n    title: \"Group\",\n    isCollapsible: true,\n    icon: \"group\",\n    subItems: [\n      {\n        title: \"New group\",\n        icon: \"group_add\",\n        to: \"/simple-side-menu/group/new\"\n      },\n      {\n        title: \"New person\",\n        icon: \"person_add\",\n        to: \"/simple-side-menu/group/person/new\"\n      }\n    ]\n  },\n  {\n    title: \"Notifications\",\n    icon: \"notifications\",\n\n    subItems: [\n      {\n        title: \"Active\",\n        icon: \"notifications_active\",\n        to: \"/simple-side-menu/notifications/active\"\n      },\n      {\n        title: \"Off\",\n        icon: \"notifications_off\",\n        to: \"/simple-side-menu/notifications/off\"\n      }\n    ]\n  },\n  {\n    title: \"Settings\",\n    isCollapsible: true,\n    iconClassName: \"ion-gear-b\",\n    subItems: [\n      {\n        title: \"Profile\",\n        icon: \"person\",\n        to: \"/simple-side-menu/settings/profile\"\n      },\n      {\n        title: \"Applications\",\n        icon: \u003ci className=\"material-icons\"\u003eapps\u003c/i\u003e,\n        to: \"/simple-side-menu/settings/apps\"\n      }\n    ]\n  },\n  {\n    title: \"Sign out\",\n    icon: \u003ci className=\"ion-log-out\" /\u003e,\n    to: \"/simple-side-menu/sign-out\"\n  }\n];\n```\n\n**Menu.js**\n\n```javascript\nimport React, { PureComponent } from \"react\";\nimport { BrowserRouter as Router, Route } from \"react-router-dom\";\nimport { Container, Header, SideMenu } from \"simple-side-menu\";\n\nimport MENU_ITEMS from \"./menu\";\n\nclass Menu extends PureComponent {\n  state = {\n    isOpen: true\n  };\n\n  toggleMenu = () =\u003e {\n    this.setState(prevState =\u003e ({\n      isOpen: !prevState.isOpen\n    }));\n  };\n\n  render() {\n    return (\n      \u003cRouter\u003e\n        \u003cContainer\u003e\n          \u003cSideMenu\n            isOpen={this.state.isOpen}\n            header={\u003cHeader logo=\"../public/logo.png\" title=\"MENU_TITLE\" /\u003e}\n            items={MENU_ITEMS}\n          /\u003e\n          \u003cdiv className=\"main\"\u003e\n            \u003cbutton onClick={this.toggleMenu}\u003eToggle Me\u003c/button\u003e\n            \u003cRoute exact path=\"/\" component={Dashboard} /\u003e\n            \u003cRoute path=\"/group/new\" component={AddGroup} /\u003e\n            \u003cRoute path=\"/group/person/new\" component={AddPerson} /\u003e\n            \u003cRoute\n              path=\"/notifications/active\"\n              component={NotificationsActive}\n            /\u003e\n            \u003cRoute path=\"/notifications/off\" component={NotificationsOff} /\u003e\n            \u003cRoute path=\"/settings/profile\" component={Profile} /\u003e\n            \u003cRoute path=\"/settings/apps\" component={Application} /\u003e\n            \u003cRoute path=\"/sign-out\" component={LogOut} /\u003e\n          \u003c/div\u003e\n        \u003c/Container\u003e\n      \u003c/Router\u003e\n    );\n  }\n}\n\nconst RoutePath = ({ path }) =\u003e \u003ch4\u003e{path}\u003c/h4\u003e;\n\nconst Dashboard = () =\u003e \u003cRoutePath path=\"/dashboard\" /\u003e;\nconst AddGroup = () =\u003e \u003cRoutePath path=\"/group/new\" /\u003e;\nconst AddPerson = () =\u003e \u003cRoutePath path=\"/group/person/new\" /\u003e;\nconst NotificationsActive = () =\u003e \u003cRoutePath path=\"/notifications/active\" /\u003e;\nconst NotificationsOff = () =\u003e \u003cRoutePath path=\"/notifications/off\" /\u003e;\nconst Profile = () =\u003e \u003cRoutePath path=\"/settings/profile\" /\u003e;\nconst Application = () =\u003e \u003cRoutePath path=\"/settings/apps\" /\u003e;\nconst LogOut = () =\u003e \u003cRoutePath path=\"/sign-out\" /\u003e;\n\nexport default Menu;\n```\n\n## API\n\n`\u003cSideMenu /\u003e`\n\n| Prop                 | Type   | Default        | Description                                                                                                        |\n| -------------------- | ------ | -------------- | ------------------------------------------------------------------------------------------------------------------ |\n| isOpen               | bool   | true           | Specify if the side menu must be opened.                                                                           |\n| items                | array  | **Required**   | Property for the configuration of the component SideMenu. check the [menu.js](#usage)                              |\n| header               | elem   | null           | Property for the side menu header. you can use Header component or any JSX element.                                |\n| isExpandable         | bool   | false          | This property make possibile usage of the expanded mode. **don't use it with toggle menu fonctionnality**.         |\n| defaultIconClassName | string | material-icons | Property for default icon className used for menu item and sub menu item, the Allowed values (material-icons, fa). |\n\n`\u003cHeader /\u003e`\n\n| Prop            | Type   | Default                 | Description                                 |\n| --------------- | ------ | ----------------------- | ------------------------------------------- |\n| to              | string | /                       | Path of home page                           |\n| logo            | string | null                    | The source path for the logo of application |\n| title           | string | null                    | The title of the side menu                  |\n| headerClassName | string | nav-container\\_\\_header | the Header className.                       |\n| logoClassName   | string | nav-container\\_\\_logo   | The Logo className.                         |\n| titleClassName  | string | nav-container\\_\\_title  | The title className.                        |\n\n## Styling\n\n```CSS\n.nav-container {\n  background-color: #db3d44;\n}\n\n.sub-menu {\n  background-color: #ff6666;\n}\n\n.sub-menu__item--active,\n.sub-menu__item:hover,\n.sub-menu__item:visited,\n.menu-item--active,\n.menu-item \u003e *:first-child:hover {\n  background-color: #af3136;\n}\n\n.nav-container__header,\n.side-menu,\n.menu-item {\n\tbox-shadow: 0 1px 0 #fff !important;\n  -webkit-box-shadow:  0 1px 0 #fff !important;\n  -moz-box-shadow: 0 1px 0 #fff !important;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamzamhadbi%2Fsimple-side-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamzamhadbi%2Fsimple-side-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamzamhadbi%2Fsimple-side-menu/lists"}