search

angularify / angular-semantic-ui

[WiP] AngularJS native directives for Semantic UI
http://angularify.github.io/angular-semantic-ui
MIT License
383 stars 89 forks source link

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

Open dpdonohue opened 9 years ago

dpdonohue commented 9 years ago

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

jspdown commented 9 years ago

Thanks :wink: 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

dpdonohue commented 9 years ago

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>