Binding multiple actions in controller in ember

I designed a mockup for a website that has a sidebar with a menu that appears on mouseEnter, and disappears on mouseLeave. This was mocked up with jQuery, though now I'm trying to recreate this functionality using Ember. I have this working with mouseEnter correctly so far, but I can't figure out how to also bind mouseLeave.

From what I've read so far, implementing a View seems to be the answer though, since view's are deprecated I'm not sure how to go about this.

Here's what I have so far:

/app/controllers/sidebar.js

import Ember from 'ember';

export default Ember.Controller.extend({
  title: 'Ticket Log',
  menu_showing: false,
  actions: {
    toggleMenu: function () {
      this.set('menu_showing', !this.get('menu_showing'));
      console.log(this.get('menu_showing'));
    }
  }
});

/app/templates/sidebar.hbs

<div  id="sidebar" class="panel panel-default">
  
    <div id="sidebar-menu">
      <div id="sidebar-menu-buttons">
        <button id="sidebar-menu-toggle" type="button" class="btn btn-default glyphicon glyphicon-menu-hamburger"></button>
        <button id="sidebar-menu-lock" type="button" class="btn btn-default glyphicon glyphicon-lock"></button>
      </div>
      <div id="sidebar-menu-pills" class="panel panel-default">
        <div class="panel-body">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">Ticket Log</a></li>
            <li><a href="#">Customer Info</a></li>
            <li><a href="#">Asset Info</a></li>
          </ul>
        </div>
      </div>
    </div>
  
  
  
</div>