How can I control the collapsed state of the sidebar within the navbar?

[RipleWare]

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.

[ethanhann]

The sidebar-is-collapsed attribute is meant to do what you are describing, but there is a bug where if the initial state is collapsed the text is still shown. I haven't gotten around to properly addressing the issue. You can work around this issue by adding the Bootstrap hidden class to all the elements with the menu-item-text class in the sidebar with a simple directive.

[RipleWare]

Thanks for your reply and I know you have closed this, but it doesn't seem to be working for me. For example, I have the following code:

                <eeh-navigation-sidebar
                    menu-name="'sideMenu'"
                    nav-class="myClass" 
                    search-input-is-visible="false"
                    sidebar-is-collapsed="toggleState">
                    <ui-view></ui-view>
                </eeh-navigation-sidebar>

Then I have a button in my navbar <button class="btn btn-primary" ng-click="vm.toggle()">Hide</button>

And my controller:

        $scope.toggleState = false;

        vm.toggle = function() {
            console.log($scope.toggleState);
            $scope.toggleState = !$scope.toggleState;
        };

I can see toggleState changing from true to false, but it doesn't seem to be applying to the sidebar property.

Am I doing this wrong, or should it be working?

[ethanhann]

It only sets the collapsed state when the sidebar initially renders. There is an internal function in the directive called toggleSidebarTextCollapse that would solve this problem if it were exposed. I'll expose it in an upcoming release.

[IbrahimHd]

Hi Ethan, I'm trying to contribute implementing this feature. I have moved setTextCollapseState function to a separate Service handleSidebarCollapseService. The function takes one argument, IsCollapsed, like this: setTextCollapseState(_sidebarIsCollapsed) . The collapse action still works fine after this change, but I'm wondering how could I make the Service accessible by the NavBar button?! The menuItem has a property for Click action which takes function as an input, like this: click: function () { return someLocalDefinedFcn(); } . The issue with this is that the function must be defined locally which is not the case! I need to call that function inside the Service mentioned above: Click: function () { return handleSidebarCollapseService.setTextCollapseState(_sidebarIsCollapsed); }

My question is:

1. How can I call that function through the Click property of the menuItem?
2. How to pass the state of the sidebar sidebarIsCollpased as shown above?

Thanks a lot in advance!

[ethanhann]

@IbrahimHd Feel free to submit a PR of what you have and I can take a look at it.

[IbrahimHd]

Hi Ethan,

In fact I did many modifications at my side (but not on github), so it became a bit difficult to reflect the changes on the repository at the time being as I have no time. In short, I got it worked! The Click property of the menuItem didn't worked for calling the function in the Service mentioned above. Alternatively, I added a new <i ng-click="toggleSidebar()> just after the brand in the top nav.

In the Service, I added $rootScope.$broadcast('sidebarIsCollapsed', _sidebarIsCollapsed); in order to populate the state of the Sidebar between the Sidebar itself and the Navbar.

Regards