{"id":18583547,"url":"https://github.com/maxdome/angular-material-sidenav","last_synced_at":"2025-05-16T05:09:48.915Z","repository":{"id":84731418,"uuid":"144034892","full_name":"maxdome/angular-material-sidenav","owner":"maxdome","description":"SchwaFa/angular-material-sidenav#0.0.14 is not available - this is a late fork","archived":false,"fork":false,"pushed_at":"2018-08-08T15:45:33.000Z","size":688,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-17T16:45:20.913Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/maxdome.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-08T15:40:43.000Z","updated_at":"2018-08-08T15:45:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"8616fa0c-6777-4f2b-9633-fedb16bd0705","html_url":"https://github.com/maxdome/angular-material-sidenav","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxdome%2Fangular-material-sidenav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxdome%2Fangular-material-sidenav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxdome%2Fangular-material-sidenav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxdome%2Fangular-material-sidenav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxdome","download_url":"https://codeload.github.com/maxdome/angular-material-sidenav/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471049,"owners_count":22076587,"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":[],"created_at":"2024-11-07T00:23:28.517Z","updated_at":"2025-05-16T05:09:48.899Z","avatar_url":"https://github.com/maxdome.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"SchwaFa/angular-material-sidenav.git#0.0.14 not available any more - late fork\n\n\n# angular-material-sidenav\n\nSimple component that reproduce the Angular Material Style SideNav Menu from their own website [material.angularjs.org](https://material.angularjs.org/).\nAvailable [Demo](http://sovanna.github.io/angular-material-sidenav/demo/dist)\n\n##### 1. Installation\n\n\tbower install angular-material-sidenav --save\n\n##### 2. Configuration\n\nadd `sasrio.angular-material-sidenav`  to your main module's list of dependencies\n\n\tangular.module('myApp', ['sasrio.angular-material-sidenav'])\n\nuse the `ssSideNavSectionsProvider` as a **provider** to config your menu items\n\n\tssSideNavSectionsProvider.initWithSections([{\n\t\tid:\t\t'toogle_1',\n\t\tname:\t'Section Heading 1',\n\t\ttype:\t'heading',\n\t\tchildren: [{\n\t\t\tname:\t'Toogle 1',\n\t\t\ttype:\t'toggle',\n\t\t\tpages:\t[{\n\t\t\t\tid:\t\t'toggle_item_1',\n\t\t\t\tname:\t'item 1',\n\t\t\t\tstate:\t'common.toggle.item1'\n\t\t\t}, {\n\t\t\t\tid:\t\t'toggle_item_2',\n\t\t\t\tname:\t'item 2',\n\t\t\t\tstate:\t'common.toggle.item2'\n\t\t\t}]\n\t\t}]\n\t}, {\n\t\tid:\t\t\t'link_1',\n\t\tname:\t\t'Simple link to Index state',\n\t\tstate:\t\t'common.index,\n\t\ttype:\t\t'link',\n\t\thidden:\ttrue // show menu ('true' for hide menu)\n\t}]);\n\n**by default, if hidden property is not set, item will be displayed. So to hide one, just pass property to true.**\n\nAlso, provide to module the `$mdThemingProvider` in order to get same colors\n\n\tssSideNavSectionsProvider.initWithTheme($mdThemingProvider);\n\nYou can check the [demo source code of app.js](https://github.com/sovanna/angular-material-sidenav/blob/master/demo/app/scripts/app.js) to see more on how you can add items\n\n##### 3. Usage\n\nIn order to display your sidenav menu, use the factory `ssSideNav` to get **all sections** and send them into the directive , example :\n\n**note: update the components to the lastest as some of the implementations have changed (e.g method changeSectionVisible no more exist)**)\n\n\t// in your controller, add the factory ssSideNav\n\tangular.module('app.controller', [\n\t\t'$timeout',\n\t  \t'ssSideNav',\n\t  \tfunction ($timeout, ssSideNav) {\n\t    \t$scope.menu = ssSideNav;\n\n\t\t\t// Show or Hide menu\n\t\t\tssSideNav.setVisible('link_1');\n\t\t\tssSideNav.setVisibleFor([{\n\t\t\t  id: 'toggle_item_1',\n\t\t\t  value: true\n\t\t\t}, {\n\t\t\t  id: 'link_1',\n\t\t\t  value: false\n\t\t\t}]);\n\n\t\t\t$timeout(function () {\n\t\t\t  ssSideNav.setVisible('toogle_2', false);\n\t\t\t});\n\n\t\t\t$timeout(function () {\n\t\t\t\t// force selection on child dropdown menu item and select its state too.\n\t\t\t\tssSideNav.forceSelectionWithId('toogle_1_link_2');\n\t\t\t}, 1000 * 3);\n\t  }\n\t]);\n\nand of course, in your html view:\n\n\t\u003css-sidenav menu=\"menu\"\u003e\u003c/ss-sidenav\u003e\n\n##### 4. Customization\n\nColors are handle using a **directive** from the gist [dh94 mdStyleColor](https://gist.github.com/dh94/517187e03fdde3c18103)\n\nAll sidenav is builded using the **primary** color configured with `$mdThemingProvider.\n\nIf you look the source code, you can easily add new template item, new kind of items and so on...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxdome%2Fangular-material-sidenav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxdome%2Fangular-material-sidenav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxdome%2Fangular-material-sidenav/lists"}