В Angular Material есть компонент Sidenav
В нём необходимо разместить двухуровневое меню, похожее на
Детали:
- по клику на элемент 1 уровня он разворачивается / сворачивается
- по клику на элемент 2 уровня просходит переход по ссылке (ui-sref="") (используется ui-router)
- иконка слева не нужна
- стрелка справа нужна
- при сворачивании sidebar не нужно оставлять узкую полоску с иконками, т. к. иконок нет.
- реализовать в виде директивы
- html шаблон компонента содержит один корневой элемент <md-sidenav>
- в js одна директива <main-menu> с контроллером
- данные для построения меню можно получить из сервиса menuService.getPages().then(function(pages) { ... });
- pages массив вида
[
{
"state": "index.usermanagement",
"title": "User Management"
},
{
"state": "index.usermanagement.users",
"title": "Users"
},
{
"state": "index.usermanagement.groups",
"title": "Groups"
}
]
Что должно быть в итоге:
- 3 файла: js, html, css (если нужен)