When I bower install angular-material-sidenav --save got

 "id": "ECONFLICT",
  "level": "error",
  "data": {},
  "message": "Unable to find suitable version for angular-ui-router",
  "stacktrace": "angular-ui-router: Unable to find suitable version for angular-ui-router\n    at createError (C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\util\\createError.js:4:15)\n    at Manager._electSuitable (C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\core\\Manager.js:823:15)\n    at C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\core\\Manager.js:609:25\n    at _fulfilled (C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\node_modules\\q\\q.js:834:54)\n    at self.promiseDispatch.done (C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\node_modules\\q\\q.js:863:30)\n    at Promise.promise.promiseDispatch (C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\node_modules\\q\\q.js:796:13)\n    at C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\node_modules\\q\\q.js:556:49\n    at runSingle (C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\node_modules\\q\\q.js:137:13)\n    at flush (C:\\Users\\humen\\AppData\\Roaming\\nvm\\v4.4.7\\node_modules\\bower\\lib\\node_modules\\q\\q.js:125:13)\n    at nextTickCallbackWith0Args (node.js:420:9)"
}]

Hi,

Currently it seems the menu is entirely dependent on ui-router, and that every menu link corresponds to a state. Is there any way to forgo that for certain links and instead just have an external URL? For example, I have some internal states but I also want to link out to a few other websites.

the steps I do:
1.

 <link rel="stylesheet" href="/css/liveadmin/lib/angular-material.css" />
  <link rel="stylesheet" href="/css/liveadmin/lib/angular-material-sidenav.css>
<script src="angular/angular.min.js"></script>
<script src="/angular/angular-material.min.js"></script>
<script src="angular/angular-animate.min.js"></script>
<script src="angular/angular-ui-router.min.js"></script>
<script src="angular/angular-touch.min.js"></script>
<script src="angular/angular-material-sidenav.js"></script>
<script src="js/app.js"></script>

app.js:

`app = angular.module "guildApp",
    ['ui.router',
     'sasrio.angular-material-sidenav'
    ]
app.config (ssSideNavSectionsProvider)->
    ssSideNavSectionsProvider.initWithSections([{
        id:     'toogle_1',
        name:   'Section Heading 1',
        type:   'heading',
        children: [{
            name:   'Toogle 1',
            type:   'toggle',
            pages:  [{
                id:     'toggle_item_1',
                name:   'item 1',
                state:  'common.toggle.item1'
            }, {
                id:     'toggle_item_2',
                name:   'item 2',
                state:  'common.toggle.item2'
            }]
        }]
        }, {
            id:         'link_1',
            name:       'Simple link to Index state',
            state:      'common.index',
            type:       'link',
            hidden: true
        }]);
app.controller "indexCtrl", ($scope, $timeout, ssSideNav)->
    $scope.hello = "hello wrold"
    ($timeout, ssSideNav)->
        $scope.menu = ssSideNav;
        ssSideNav.setVisible('link_1');
        ssSideNav.setVisibleFor([{
          id: 'toggle_item_1',
          value: true
        }, {
          id: 'link_1',
          value: false
        }]);
        $timeout( ->
            ssSideNav.setVisible('toogle_2', false);
        )

        $timeout(
            ->
                ssSideNav.forceSelectionWithId('toogle_1_link_2')
            , 1000 * 3);

1. html

<div ng-app="guildApp">
          <div ui-view layout="row" flex></div>
        <ss-sidenav menu="menu"></ss-sidenav>
        <div ng-controller="indexCtrl">
            {{hello}}
            <ss-sidenav menu="menu"></ss-sidenav>

        </div>

    </div>

but it doesn't work.....

Would be good to update the code to use md-icon as described in https://material.angularjs.org/latest/api/directive/mdIcon
thanks!

any support for adding icons? like this
{
id: 'link_1',
name: 'Link 1 ',
state: 'common.link1',
type: 'link',
icon: 'fa fa-check'
}

Hi.

If reload page on child state of toggle item, toggle section will close and ul height will 0.

Is it possible to use for example angular-translate?

Scroll in Firefox and Edge doesn´t works, but in chrome works fine.

why??

How can I fix the issue?

Two examples.

how to install this in rails im using rails asset not a bower

Hi,

I have defined below 'custom' theme color, How can I set 'custom' for slidenav to show that color?
$mdThemingProvider.theme('custom').primaryPalette('blue-grey');

Thanks

Hi, I was able to take this code and make it work with Angular Meteor. It's not perfect but a good starting point. I used the Yeoman generator ( https://github.com/ndxbxrme/generator-angular-meteor ) to help create the application.
More details are documented on the other website along with complete source code:
( ndxbxrme/generator-angular-meteor#45 ).

This is great thank you! It saved me heaps of time I would have head to spend to make my own version of this.

I have a set of states which I want to all be grouped under a single sidenav link. Clicking the link should open up the primary state, but I would like it so that when any of those states are loaded that menu link is selected.

At the moment if my menu link is "Customers" and clicking it loads the customers state (/customers), and then clicking on a customer entry loads the customers.edit state (/customers/1) the menu link will still be selected, but if I refresh the page (loading url /customers/1) the sidenav will load in an unselected state, when I would like the Customers menu link to still be selected.

It would be ideal if we could define a single action-state and an array of selection-states for each link, such that the action state is used when the link is clicked but the selection-states are used to determine when the link will be selected/highlighted.

I'm having troubles with this factory on the controller, but i can't find the reason.

https://docs.angularjs.org/error/$injector/unpr?p0=$stateProvider%20%3C-%20$state%20%3C-%20ssSideNav

Can you please guide me how to fix this?

Thanks

Got it,
Just add a stateParams key in the object
{
id: 'link_3',
name: 'Link 3',
state: 'common.link3',
stateParams: 'obj',
type: 'link',
}

angular material sidenav doesnt work in safari . there's any solution to this problem ?

Hello,
First, I would thank for this library.
I'm facing an issue to display more than one page under toggle.

With this code following, only Item 1 is displayed :
{ name:"Toogle 1", type:"toggle", pages: [ { id:"toogle_1_link_1", name:"item 1", state:"common.toggle1.item1" }, { id:"toogle_1_link_2", name:"item 2", state:"common.toggle1.item2" }, { id:"toogle_1_link_3", name:"item 3", state:"common.toggle1.item3" } ] }

If I put Page as hidden, Item 2 will display.
Any idea?
Thank you.

I'm not sure the 'main' section in your package.json is necessary when packaging angular modules. When installing it via npm, being an array instead of a single value causes an error and the installation fails.

I need to have ng-click and external link in side nav

like
<a ng-click="callMyFunction(1)">Call 1</a>
<a ng-click="callMyFunction(2)">Call 2</a>

and
<a href="http://google.com/" target="_blank">Google</a>

Hi Sovanna,
im using angular-material "~0.10.1", and angularjs "~1.4",
and getting : Error: [$injector:unpr] Unknown provider: ssSideNavSectionsProvider
can you adapt this?
sorry for my poor english.

I am trying to third level sub menu like, but this does not work

ssSideNavSectionsProvider.initWithSections([{ name: '', type: 'heading', children: [{ name: 'Toogle 1', type: 'toggle', pages: [{ name: 'item 1', state: 'common.toggle1.item1' }, { name: 'item 2', state: 'common.toggle1.item2' },{ name: 'item 3', type: 'toggle', pages: [{ name: 'item 1', state: 'common.toggle1.item1' }] }] }] }, { name: 'Simple link to Index state', state: 'common.index', type: 'link' }]);

Could you help me here.

In mobile view if active menu item in the toogle section, then after refresh page height switch becomes equal to 0.

I tried some md-accent, md-hue and seems like "primary" is just hardcoded?

following the Usage and have this error

Hi sovanna, this plugin in awesome..i need to implement multilevel navigation like for example

• Customers
  • Country
    • USA

      • State

        Alabama
        Atlanta
        Newyork

I'm able to get the first level items to get display it properly, but its not displaying its child item. Can you help me with it.

Thanks
Selva

if you go with the mouse cursor over the menu items they are not changing the background color, on mouse hover.

here they do:
https://material.angularjs.org

go to http://sovanna.github.io/angular-material-sidenav/demo/dist/#/toogle1/item1
select Item 1 in Toggle 1
reload with large screen, then shrink and reload in mobile screen
Item is getting selected in first case but not in second

Love your component and I'm using it now. One problem I see is: when the side-menu is open in collapsible mode, it does not automatically collapse again when a menu item is selected. For example, with the top-nav showing, resize the browser window to small and collapse the side-nav. Click on the md-icon=menu and then select an item after the side-nav expands. The side-nav will not automatically collapse.

Thanks again for this wonderful directive.

"main": [
"./angular-material-sidenav.js",
"./angular-material-sidenav.css"
],

I am using the demo code. When I try to open the toggle menu, the arrow icon changes but the dropdown doesn't work.

Need Help!
Thanks.

I'm planning to use your code into my project. But I'm using Angularjs 2, So will you able to support angularjs 2 going forward.

First of all, I want to say thank you.Recently,I use Angular 1.5.8 .You know 1.3.0 maybe too old .So can you upgrade your Angular version?

On sm devices, the submenus are getting 0px height and not showing, when using updated dependencies versions

I need to reload controller.
like this

<a ui-sref="app.details" ui-sref-opts="{reload: true}">Details</a>

But ssSideNav look like how to add reload option

     icon:   'icon-trending',
     type:   'link',
     state:  'app.details'

I assume ssSideNav.selectSection should open a section? I am adding following code to _common.js

$timeout(function () {
            alert('select common.toggle1.item1')
            ssSideNav.selectSection('common.toggle1.item1');
            //ssSideNav.selectSection('toogle_1_link_1'); //both don't work

}, 4000);