0

In this example: https://plnkr.co/edit/O9fbLcTV7QPvqB3FpiAA?p=preview

When you click the hamburger menu icon and select a nav item, it leaves the menu open until you click the hamburger icon again. Is there a good way to automatically collapse when a menu item is selected?

I tried: 

<li><a href="#" ng-click="isNavCollapsed = !isNavCollapsed;">Link 1</a></li>

Which works, but will trigger the nav menu collapse animation when not in mobile mode (on a wider screen).

Ted Scheckler
  • 1,389
  • 4
  • 16
  • 34

2 Answers2

0

You can add an event listener using plain JS, where you can check that the width of the window matches your mobile breakpoint. Just make sure you wrap the actual change to the scope variable in a $apply function otherwise AngularJS will not know about it:

https://plnkr.co/edit/ZzbXZ3lFxqX6Tlra46W5?p=preview

angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;


  document.addEventListener('click', collapseMenu, false);

  function collapseMenu(event) {
    if(event.target.matches('.nav.navbar-nav li a')  && window.innerWidth < 768) {
      $scope.$apply(function() {
        $scope.isNavCollapsed = true;
      });
    }
  }

  // prevent memory leaks by removing listener when scope is destroyed
  $scope.$on("$destroy", function() {
    document.removeEventListener('click', collapseMenu, false);
  });

});

Note that this will require you to keep your CSS and JS in sync with regards to the breakpoint value

Pop-A-Stash
  • 6,572
  • 5
  • 28
  • 54
  • Thanks for the suggestion... I was hoping to avoid event listeners. I ended up coming up with a more angularjs way to do it and posted my solution. – Ted Scheckler May 10 '19 at 15:48
  • This is actually the Angular way of doing things when what you need is outside of the standard angular tools. – Pop-A-Stash May 10 '19 at 15:52
0

I solved it by adding a flag 'hamburger_open' that triggers true on expanding() and false on collapsing().

<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed" expanding="hamburger_open=true" collapsing="hamburger_open=false">

... and hamburger_collapse function that checks if hamburger_open is true:

<li><a href="#" ng-click="hamburger_collapse()">Link 1</a></li>

  ...
  $scope.hamburger_collapse = function() {
    if($scope.hamburger_open) {
      $scope.isNavCollapsed = !$scope.isNavCollapsed;
    }
  }
  ...

https://plnkr.co/edit/IFIL8lgjK0oGDqZkLK5F?p=preview

Seems like an odd thing to have to do considering every modern mobile menu automatically collapses when a menu item is chosen.

Ted Scheckler
  • 1,389
  • 4
  • 16
  • 34
  • Unfortunately, this does not solve your issue with the animation running when the window is larger than mobile size – Pop-A-Stash May 10 '19 at 15:48
  • It does solve it when I try it... my problem: https://streamable.com/2du4k my solution: https://streamable.com/jsvy5 – Ted Scheckler May 10 '19 at 17:49
  • Your video does not show the case when the menu is open in mobile view, then window is resized to larger view, and then a link is clicked. You will still get the animation in this case.Personally, I would call that an edge case, but if you are going for full perfection, the only way is to know how wide the window is – Pop-A-Stash May 10 '19 at 18:11