{"id":15543003,"url":"https://github.com/tsubik/ember-side-menu","last_synced_at":"2025-04-14T12:31:43.765Z","repository":{"id":8955505,"uuid":"60362346","full_name":"tsubik/ember-side-menu","owner":"tsubik","description":"Side menu component for Ember.js applications","archived":false,"fork":false,"pushed_at":"2022-03-21T18:15:00.000Z","size":1889,"stargazers_count":60,"open_issues_count":4,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-03T12:27:27.214Z","etag":null,"topics":["burger-menu","ember","ember-addon","mobile-menu"],"latest_commit_sha":null,"homepage":"https://tsubik.com/ember-side-menu/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsubik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-03T16:32:36.000Z","updated_at":"2024-05-30T02:20:54.000Z","dependencies_parsed_at":"2022-09-01T04:11:35.845Z","dependency_job_id":null,"html_url":"https://github.com/tsubik/ember-side-menu","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsubik%2Fember-side-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsubik%2Fember-side-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsubik%2Fember-side-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsubik%2Fember-side-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsubik","download_url":"https://codeload.github.com/tsubik/ember-side-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248881551,"owners_count":21176871,"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":["burger-menu","ember","ember-addon","mobile-menu"],"created_at":"2024-10-02T12:25:17.505Z","updated_at":"2025-04-14T12:31:43.742Z","avatar_url":"https://github.com/tsubik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember-side-menu\n\n[![Build Status](https://travis-ci.org/tsubik/ember-side-menu.svg?branch=master)](https://travis-ci.org/tsubik/ember-side-menu)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-side-menu.svg)](https://emberobserver.com/addons/ember-side-menu)\n[![npm version](https://badge.fury.io/js/ember-side-menu.svg)](https://badge.fury.io/js/ember-side-menu)\n\nMobile friendly Ember menu component using CSS transitions. More effects and SVG path animations coming soon.\n\n![menu](https://cloud.githubusercontent.com/assets/1286444/16232587/722922f2-37cb-11e6-89bc-e529a916b80f.gif)\n\n## Demo\n\nCheck out the live demo [here][live-demo]\n\n## Ember Compability\n\nThis addon is compatible with and tested against Ember 2.x and higher.\n\n## Installation\n\n`ember install ember-side-menu`\n\nImport ember-side-menu styles in your application's `app.scss` file.\n\n`@import \"ember-side-menu\";`\n\n## Usage\n\n### Side Menu\n\n`{{#side-menu}}` component is a main container of your menu. Place it on some top level of your DOM\ndocument for example in `application.hbs` file.\n\n``` handlebars\n\n{{#side-menu}}\n  \u003cheader class=\"navbar navbar-default\"\u003e\n    \u003cdiv class=\"navbar-header\"\u003e\n    ...\n    \u003c/div\u003e\n  \u003c/header\u003e\n  \u003cul class=\"nav\"\u003e\n    \u003cli class=\"header\"\u003eEvents\u003c/li\u003e\n    \u003cli\u003e\n      {{#side-menu-link-to \"new\"}}\n        {{inline-svg \"plus\" class=\"icon\"}}\n        New Event\n      {{/side-menu-link-to}}\n    \u003c/li\u003e\n    \u003cli class=\"divider\"\u003e\u003c/li\u003e\n    ...\n    \u003cli\u003e\n      \u003ca href=\"https://cowbell-labs.com/\" target=\"_blank\"\u003e\n        {{inline-svg \"cowbell\" class=\"icon cowbell\"}}\n        Cowbell Labs\n      \u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n{{/side-menu}}\n{{content-backdrop}}\n\u003cdiv class=\"page-content\"\u003e\n  {{partial \"shared/navbar\"}}\n\n  \u003cmain\u003e\n    \u003cdiv class=\"container\"\u003e\n      {{outlet}}\n    \u003c/div\u003e\n  \u003c/main\u003e\n\n  {{outlet \"footer\"}}\n\u003c/div\u003e\n\n```\n\n#### Parameters\n\n* id - (string), menu Id, use when using multiple menus, default: \"default\"\n* side - (string), which side of screen your menu takes. Possible values: [\"left\", \"right\"], default: \"left\"\n* width - (string), target width of open menu. CSS width - example values: [\"40px\", \"40%\", ...], default: null (default width set in\nCSS stylesheet to 70%)\n* initialTapAreaWidth - (integer, in px) - area width on left/right screen edge when menu swipe opening\nis initiated, default: 30\n* slightlyOpenWidth - (integer, in px) - width of slightly open menu. Menu is opened slightly on tap event\nwithin `initialTapAreaWidth` to the edge, default: 20\n* slightlyOpenAfter - (integer, in ms) - time delay after which menu is slighlty opened if it is still closed,\ndefault: 300\n\n### Content Backdrop\n\nIf you want to add backdrop to the rest of the layout while menu opening, then just place `{{content-backdrop}}`\ncomponent after `{{#side-menu}}` component.\n\n``` handlebars\n\n{{#side-menu}}\n...\n{{/side-menu}}\n{{content-backdrop}}\n\n```\n\n#### Parameters\n\n* menuId - (string), id of controlled menu, default: \"default\"\n\n### Side Menu Toggle\n\nLike a button component to toggle menu.\n\nYou can use default toggle button consist with some toggle bars\n\n``` handlebars\n{{side-menu-toggle}}\n```\n\nYou can use your own design block.\n\n``` handlebars\n{{#side-menu-toggle}}\n  \u003cspan class=\"glyphicon glyphicon-menu-hamburger\"\u003e\u003c/span\u003e\n{{/side-menu-toggle}}\n```\n\nYou can create a custom one by extending the main component.\n\n``` javascript\nimport SideMenuToggle from \"ember-side-menu/components/side-menu-toggle\";\n\nexport default SideMenuToggle.extend({\n    tagName: \"button\",\n    classNames: [\"navbar-btn\", \"btn\", \"btn-link\", \"pull-left\"],\n});\n```\n\n#### Parameters\n\n* side - (string), which side of screen your menu toggle takes. Possible values: [\"left\", \"right\"], default: \"left\"\n* menuId - (string), id of controlled menu, default: \"default\"\n\n### Side Menu Link To\n\nWorks like a standard `{{link-to}}` helper, but also closes the menu.\n\n``` handlebars\n{{#side-menu-link-to \"new\"}}\n  New Event\n{{/side-menu-link-to}\n\n```\n\n#### Parameters\n\n* menuId - (string), id of menu which should be closed when clicking, default: \"default\"\n\n### Using multiple side menus\n\nThere is a possiblity to declare more instances of side menu components, and control them separately.\nDefault menu id is `default` and it could be omitted, if you want to use more than one instance of side-menu\nyou should not forget about setting relevant `menuId` for connected menu components.\n\n``` handlebars\n\n{{#side-menu side=\"left\" id=\"leftMenu\"}}\n  Left Menu\n{{/side-menu}}\n{{#side-menu side=\"right\" id=\"rightMenu\"}}\n  Right Menu\n{{/side-menu}}\n\n{{side-menu-toggle menuId=\"leftMenu\"}}\n{{side-menu-toggle menuId=\"rightMenu\"}}\n\n{{content-backdrop menuId=\"leftMenu\"}}\n{{content-backdrop menuId=\"rightMenu\"}}\n\n```\n\n### Side Menu Service\n\nThere is an available `sideMenu` service to control the menu.\n\n``` javascript\nexport default Ember.Route.extend({\n  sideMenu: Ember.inject.service(),\n\n  actions: {\n    openSideMenu() {\n      this.get(\"sideMenu\").open();\n    },\n  },\n});\n```\n\n#### Methods\n\n* open(menuId='default')\n* close(menuId='default')\n* toggle(menuId='default')\n\n#### Properties\n\nFor backward compability there is a possiblity to control or check `default` menu properties directly on service object.\n\n* isOpen (boolean)\n* isClosed (boolean)\n* isSlightlyOpen (boolean)\n* progress (number) 0-100\n\nWhen using mutliple menus or changing default `menuId` then menu's state is held in `menus` object.\n\nFor example to get `isOpen` property for menu with id `sampleMenu` we can use `this.get(\"sideMenu.menus.sampleMenu.isOpen\"`.\n\n## License\n\nMIT\n\n[live-demo]: https://tsubik.com/ember-side-menu\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsubik%2Fember-side-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsubik%2Fember-side-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsubik%2Fember-side-menu/lists"}