angularify/angular-semantic-ui

How to close the Sidebar upon select of a menu item?

dpdonohue opened this issue · 2 comments

Thanks for this cool project! How can I make the sidebar close when the user selects an option in the menu?

Thanks 😉
Unfortunately, you can't do that easily using an AngularJs binding or such things. However, you probably can use css classes provided by the original semantic-ui. The sidebar component can accept an optional visible class that keep it shown until you remove it.
I'm not 100% sure if it works

<sidebar class="visible">...

By using a ng-class instead of just a class you'll be able to bind this capability to a ng-click

Thanks I tried using ng-class but could not find the magic formula. This is simpler and works for me (JQuery required)

$scope.closeSidebar = function() {
    $('.ui.sidebar').sidebar('toggle');
};

corresponding HTML:

<div ng-controller="SidebarCtrl">
    <sidebar-link icon="home" title="Home" href="/" ng-click="closeSidebar()"></sidebar-link>
    <sidebar-link icon="rocket" title="Interests" href="interests" ng-click="closeSidebar()"></sidebar-link>
</div>