I was able to get the navbarBrand to show up through:
eehNavigationProvider.navbarBrand.text = 'My Brand';
but not through:
eehNavigationProvider.navbarBrand = { text:'My Brand' };
which roughly how the example is showing it.

This code adds sidebar menuitems without error, but the menuitems are not displayed.

I'm sure the code is executed, because the 'hi from foreach' is displayed on the console, also, i stepped through the code and I'm sure it is being processed.

Any suggestions?

    .config(["initProvider", 'eehNavigationProvider', function(initProvider, eehNavigationProvider) {
            initProvider.$get().then(function (init) {
                    angular.forEach(init, function (value, key) {

                        eehNavigationProvider.sidebarMenuItem(value.name, {
                            text: value.text,
                            iconClass: value.iconClass,
                            href: value.url || '/',
                            isCollapsed: value.isCollapsed,
                            isVisible: value.isVisible
                        });
                        console.log('hi from foreach');
                    })
            }

The way it works currently is both the parent and the active child get highlighted in the same color / style. In certain color schemes, the whole thing looks gaudy.

Is their any way where in I can style the active child differently so as to clearly differentiate between parent and child (other than the indentation).

P.S : I went through a bit of source code, seems like both the parent and repeating children get the class 'active'.

only with Microsoft Edge browser I got this issue when eeh-navigation-sidebar is rendered:

TypeError: Object doesn't support property or method 'matches'
at Anonymous function (http://localhost:2500/bower_components/eeh-navigation/dist/eeh-navigation.js:390:25)
.....................................................................

This is the line concerned:
var arrowIconElements = Array.prototype.filter.call(sidebarMenuItems, function(item) { return item.matches(".sidebar-arrow"); });

Here is the link to the example that I followed for tuxedo.
http://www.ethanhann.com/eeh-navigation/#/examples/tuxedo-menu-integration
Currently, when i click outside of the sidebar it hides. Any ideas on how to get this same effect after clicking on a menu item? Any help appreciated.

<eeh-navigation-navbar menu-name="publicMenu.name" nav-class="publicMenu.css" brand-text="publicMenu.text" brand-src="publicMenu.logo" brand-state="publicMenu.state"></eeh-navigation-navbar>

Even though I set the brand-src attribute, the brand logo is still missing. Would you please help us fix this issue? Thanks.

see: af9e2b0
and ethanhann/menu.js

New Repos

• eeh-menu
• eeh-menu-bs-3
• menu.js

See: https://github.com/MenuJS

I'm struggling to work out all of the CSS components that make up the entire framework of the eeh-navigation-sidebar. I have tried playing around with the li.leaf.active items but it doesn't seem to be working out for me.

I was wondering if you get time, could you possibly add some CSS examples to your API documentation and current examples on your website.

I am just finding that even applying some custom CSS, some elements are still getting overridden with default settings from your stylesheets. It would be good to know exactly which elements to target.

Thanks.

• a688c7c
• 192ff0f
• d09705e
• 42806ae
• 079bb2e

Hi

I love your navigation directives - thanks very much.

Just a small thing . . .

I need ui-bootstrap Ver: 0.14.3 for other dependencies, but it seems as if your directives are using deprecated uib directives. I get the following messages in the console:

collapse is now deprecated. Use uib-collapse instead.
$tooltip is now deprecated. Use $uibTooltip instead.
DropdownController is now deprecated. Use UibDropdownController instead.
... etc

Would it be possible to upgrade to the latest version of ui-bootstrap?

Codepen: http://codepen.io/ethanhann/pen/NxPVpv
Fix: ca5cadf

I have setup an example of the eeh-navigation-sidebar as per the documentation. In my example I have decided not to show the collapsed button in the menu (sidebar-collapsed-button-is-visible="false"), however, I want to control the visibility from an icon in the navbar (e.g. a hamburger icon).

Is there a way to control the collapsed state through either an attribute in the HTML or even in the controller so I could reference it through an ng-click attribute for example.

injecting eehnavigation into a controller and accessing an item will generate a duplicate menu item

I know it you mention the necessary dependencies in the "about" section, and it's probably just that I'm a rookie in w/ front end dev, but it would be helpful to also mention the required tags in the "getting started" guide. (e.g. <script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>)

Hi,

I have a navigation menu with 3 menu Items ( menuItem1, menuItem2, menuItem3)
The navigation works file and the corresponding state is executed.

$stateProvider
        .state('demo', {
            abstract: true,
            templateUrl: 'app.html'
        })
        .state('demo.menuItem1', {
            templateUrl: 'example1.html'
        })
        .state('demo.menuItem2', {
            templateUrl: 'list.html'
        })
        .state('demo.menuItem2.detail',{
            templateUrl: 'list-detail.html'
        })
        .state('demo.menuItem3', {
            templateUrl: 'example2.html'
        })
        

    eehNavigationProvider.iconBaseClass('glyphicon');

    eehNavigationProvider
        .menuItem('menuOne.menuItem1', {
            text: 'MenuItem1',
            iconClass: 'glyphicon-home',
            state: 'demo.menuItem1',
            weight: -10
        })
        .menuItem('menuOne.menuItem2', {
            text: 'MenuItem2',
            iconClass: 'glyphicon-list',
            state: 'demo.menuItem2',
            weight: -9
        })
         .menuItem('menuOne.menuItem2', {
            text: 'MenuItem3',
            iconClass: 'glyphicon-list',
            state: 'demo.menuItem3',
            weight: -8
        })

Now I am trying to navigate inside a view of a given state. For example let us say that I have a list in the state corresponding to menuItem1 and I want to navigate to the detail of each list item inside that list.
If I click inside a the list of demo.menuItem2 on the link:

 <a ui-sref="demo.menuItem2.detail">Detail</a>

The state is not changed. Do you know how this could be done?

Thanks,

I used eeh-navigation.js (unminified version) inside my project and having problem with ActiveParentMenuItemDirective when JS is bundeld and minified.
The incriminated code was at line 105:
angular.module("eehNavigation").directive("eehActiveParentMenuItem", ActiveParentMenuItemDirective);

I resolved declaring location:
angular.module("eehNavigation").directive("eehActiveParentMenuItem", ['$location', ActiveParentMenuItemDirective]);

Looks like the demo site broke on a recent build. Still using 'menuItem' instead of 'navbar/sidbarMenuItem'

When you set the sidebarIsCollapsed property true, the sidebar shrink but the spans with the text doesn't get the hidden class on first load, until you expand and collapse again manually

Hello,
I'm facing a strange issue, when I assign a function to an item. The item is duplicated in the menu !
Any idea about this issue?
Thank yon in advance.

For example you generate the top header bar with this
<nav class="navbar navbar-default navbar-static-top eeh-navigation" role="navigation">
How can I change it to have a different background, like "primary"?

Second-Level Sidebar Menu items are not ordered by weight.

Looking through previous issues, this code came up:

http://codepen.io/mbukosky/pen/qdVBWe/

Doesn't work for me. The controller adds a third menu item, but it does not appear. If you collapse the menu, it does add the third menu in the display.

I am trying to build a menu dynamically. I have the directive in my HTML, and when I try to use the API in the controller, no menu items are added. If .menuItem is called directly in the controller (meaning not after a promise is returned) menu items are added, but they are not added if the API is used after a promise, or as a part of setTimeout().

The current demos are confusing and hard to dig into: #25, #22, #19

Hi

If you look at your Bootstrap Navbar example, the Multi-Level menu-items in the SideBar are "active" when you first load the page.

If you then click on "Blank", even more Multi-Level menu-items suddenly become "active.

Why is this?

See these screen shots.

http://www.ethanhann.com/eeh-navigation-demo/#/navbar-sidebar

Where I can find this one please?

I have a root controller that 'resolves' the currently logged in user and adds that user to a service - I just want to access this service and display this user object in the sidebar so I mimicked how the search input is set up but I can't seem to get access to the service at any point in the directive - I see I can pass a function of sorts to the search submit but I don't see that played through - where should the submit function definition be assigned?

Thanks for all of your work on this directive it is extremely handy and exactly what I needed.

I have gone through the examples as best I could dissect them - it would be helpful if the examples were isolated to a single application each rather than all of them nested within the main application as its difficult to break out the individual parts....regardless I have an issue where it loads the icons in a collapsed sidebar (using font awesome) but the text is visible (is missing the the ".hidden" css class) and displaying as 'underlined' with the initial load. If I click the 'expand' icon it expands (still the text is underlined) and then click 'collapse' everything looks good the text has the 'hidden' class .... code looks like

<eeh-navigation-sidebar menu-name="'bar'" 
        search-input-icon-class="'fa-search'" 
        sidebar-is-collapsed="true" 
        sidebar-collapsed-icon-class="'fa-arrow-right'" 
        sidebar-expanded-icon-class="'fa-arrow-left'">
             <ui-view></ui-view>
</eeh-navigation-sidebar>

   var app = angular.module('myapp', [
        'eehNavigation',
        'pascalprecht.translate',
        'ui-router',
        'ngSanitize',
        'ngResource',
        'ngAnimate'
   ]);

app.config(['eehNavigationProvider', function (eehNavigationProvider) {
   $stateProvider.state('somestate',
   {
          url: '/someurl'
          templateUrl: '/sometemplate.html'
   }),
    eehNavigationProvider.iconBaseClass("fa")  
    eehNavigationProvider
      .menuItem('foo.user', {
           text: 'Me',
           iconClass: 'fa-user'
           state: 'somstate'
       })
}]);

I know that I can fix the underlined text with custom CSS. I am only mentioning it as it may help to troubleshoot why it is displaying at all.

hi! i need to pass $stateParams to my dynamic menu. how can i do it right?

I have downloaded the eeh-navigation demo project from https://github.com/ethanhann/eeh-navigation-demo (linked from #19).

Can you please outline the steps how to build and run the demo? I have run 'npm install' in the eeh-navigation-demo-master. I am not sure what to do after that. Please help.
Thanks.

Hi Ethan,

While using nested side bar menu - if sidebar is collapse nested menu root hide, while side bar on open mode nested menu work as expected. screen shots attached.

can u tell me what i am doing wrong. I am using version 3.3.

$stateProvider.state('home',{
    url : '/',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
}).state('about',{
    url : '/about',
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
});

eehNavigationProvider.navbarBrand.text = 'My Product';
eehNavigationProvider.navbarBrand.href = '/home';

eehNavigationProvider.sidebarMenuItem('homez', 
{
      text: 'Home',
      iconClass: 'fa-home',
      href: '/#/about' 
});


eehNavigationProvider
  .sidebarMenuItem('root', { // The root level of the nested menu.
      text: 'Root',
      isCollapsed: false
  })
  .sidebarMenuItem('root.foo', { // The first item under root.
      text: 'Foo',
      href: '/some/path'
  })
  .sidebarMenuItem('root.bar', { // The second item under root.
      text: 'Bar',
      href: '/some/path'
  })
  .sidebarMenuItem('root.baz', { // The third item under root.
      text: 'Baz'
  })
  .sidebarMenuItem('root.baz.qux', { // The first item under root.baz
      text: 'Quz',
      href: '/some/path'
  })
  .sidebarMenuItem('root.baz.quux', { // The second item under root.baz
      text: 'Quux',
      href: '/some/path'
  });

}]);


Hello,

From reading over the documents it says that

It is possible to create a menu item with the eehNavigation service, but it is not recommended. Instead, create the menu item in .config and only do minimal wiring/contextual configuration elsewhere with the eehNavigation service.

If this is the case, how would you go about adding dynamic menu items? I have a use case where the menu items will be returned from a service. But given the life-cycle of angular, it is not possible to use services inside a config. Any suggestions?

Thanks for the support and great app

sorry if the title is kinda weird, dont know how to express it.

currently at the top of the sidebar there's a search field in it.

i want remove/replace it with a logo or something else.

can it be done ? if so, how ? can you point me to some example or clue ?

thanks.

Hey,

I noticed that the "root-menu-name" is incorrect in the example

<eeh-navigation-navbar root-menu-name="'foo'"></eeh-navigation-navbar>

I believe it should be

<eeh-navigation-navbar menu-name="'foo'"></eeh-navigation-navbar>

I am using your plugin to great effect in one of my projects. However, I have come across a situation where in I need to show a notification style counter right next to the menu name. Something like this

Currently the API includes text, icon and href. Inclusion of markup isn't possible. Am I missing something here?

mounting the menu from a JSON (eehnavigation)

Why is this, can't get it to work either

All my menu related JS repos will be moved to https://github.com/MenuJS. Most have already been moved.

When sidebar-is-collapsed="true" sidebar is collapsed but menu-item-text is not hidden

I am trying to implement a way of 'hiding' the eeh-navigation-sidebar when a user is not logged in so I can retain the ui-router states. I can't set an ng-hide or an ng-if override as it hides the nested <ui-view> element along with the entire sidebar and I would prefer to keep my content inside the eeh-navigation-page-wrapper.

I tried using ng-class to add width: 0 but that doesn't seem to be working either. I'm just wondering if the eeh-navigation actually supports ng-class and if I'm adding my CSS wrong. If so, could you possibly provide a small example of how I could achieve this scenario.

Thanks heaps.

Is there any examples that demonstrate how to target the CSS styling of the sidebar? In your examples there is no CSS applied, but I am struggling to find what elements apply to the sidebar. Even applying an override to the nav-class elements doesn't seem to be helping.

I am using material design for my project, I don't want to use bootstrap, is it possible ? if yes what how do to do it.

I really like this control and have integrated it nicely into my web application (thank you). The last thing I am trying to achieve is adding a 'profile' area at the top of the eeh-navigation control. I have added a <div> to the very top of the window and started the eeh-navigation straight under this (150px down). The problem with this is that the eeh-navigation-page-wrapper wants to start level with the top of the sidebar, so it too is starting further down the screen. I have had to apply margin-top: -150px; to push the page wrapper back up to the top of the screen, however, this does not seem ideal for me. I have also found that by starting the eeh-navigation-sidebar at 150 makes it span offscreen (vertically) by the same amount, so my page wrapper is causing a vertical scrollbar even with no content.

Is there a way I can add a 'profile' container that is built in to the eeh-navigation-sidebar and accessible in the DOM, but does not affect the page wrapper?