Gentelella Ember integration

left-menu.emblem

.col-md-3.left_col
  .left_col.scroll-view
    .navbar.nav_title
      span.site_title 
        i.fa.fa-shopping-bag
        + MKManager
    .clearfix
    .profile
      .profile_info
        span Welcome,
        h2 
          session.data.authenticated.account.username
    .clearfix

    #sidebar-menu.main_menu_side.hidden-print.main_menu
      .menu_section
        ul.nav.side-menu
          li
            = link-to "collection" 
              i.fa.fa-home
              | Collection
          li
            = link-to "stats"
              i.fa.fa-pie-chart
              | Stats
          li
            = link-to "settings"
              i.fa.fa-cog
              | Settings
          li
            a
              i.fa.fa-share-square-o
              | Export
              span.fa.fa-chevron-down
            ul.nav.child_menu
              li
                = link-to "export" "excel" | Excel
              li
                = link-to "export" "csv" | CSV

.top_nav
  .nav_menu
    nav role="navigation"
      .nav.toggle
        a#menu_toggle
          i.fa.fa-bars

      ul.nav.navbar-nav.navbar-right
        li
          a.user-profile.dropdown-toggle href="javascript:;" data-toggle="dropdown" aria-expanded="false"
            session.data.authenticated.account.username
            +
            span.fa.fa-angle-down
          ul.dropdown-menu.dropdown-usermenu.pull-right
            li
              = link-to "logout"
                i.fa.fa-sign-out.pull-right title="Logout"
                | Logout               

.right_col role="main"
  = yield

left-menu.js

import Ember from 'ember';

export default Ember.Component.extend({
  session: Ember.inject.service(),
  didInsertElement: function () {
    this._super(...arguments);
    let CURRENT_URL = window.location.href.split('?')[0],
    $BODY = $('body'),
    $MENU_TOGGLE = $('#menu_toggle'),
    $SIDEBAR_MENU = $('#sidebar-menu'),
    $SIDEBAR_FOOTER = $('.sidebar-footer'),
    $LEFT_COL = $('.left_col'),
    $RIGHT_COL = $('.right_col'),
    $NAV_MENU = $('.nav_menu'),
    $FOOTER = $('footer');

    // TODO: This is some kind of easy fix, maybe we can improve this
    var setContentHeight = function () {
        // reset height
        $RIGHT_COL.css('min-height', $(window).height());

        var bodyHeight = $BODY.outerHeight(),
            footerHeight = $BODY.hasClass('footer_fixed') ? 0 : $FOOTER.height(),
            leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
            contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

        // normalize content
        contentHeight -= $NAV_MENU.height() + footerHeight;

        $RIGHT_COL.css('min-height', contentHeight);
    };

    $SIDEBAR_MENU.find('a').on('click', function() {
        var $li = $(this).parent();

        if ($li.is('.active')) {
            $li.removeClass('active active-sm');
            $('ul:first', $li).slideUp(function() {
                setContentHeight();
            });
        } else {
            $li.removeClass('active active-sm');
            // prevent closing menu if we are on child menu
            if (!$li.parent().is('.child_menu')) {
                $SIDEBAR_MENU.find('li').removeClass('active active-sm');
                $SIDEBAR_MENU.find('li ul').slideUp();
            }
            
            $li.addClass('active');

            $('ul:first', $li).slideDown(function() {
                setContentHeight();
            });
        }
    });

    // toggle small or large menu
    $MENU_TOGGLE.on('click', function() {
        if ($BODY.hasClass('nav-md')) {
            $SIDEBAR_MENU.find('li.active ul').hide();
            $SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
        } else {
            $SIDEBAR_MENU.find('li.active-sm ul').show();
            $SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
        }

        $BODY.toggleClass('nav-md nav-sm');

        setContentHeight();
    });

    // check active menu
    $SIDEBAR_MENU.find('a[href="' + CURRENT_URL + '"]').parent('li').addClass('current-page');

    $SIDEBAR_MENU.find('a').filter(function () {
        return this.href === CURRENT_URL;
    }).parent('li').addClass('current-page').parents('ul').slideDown(function() {
        setContentHeight();
    }).parent().addClass('active');

    // recompute content when resizing
    $(window).smartresize(function(){  
        setContentHeight();
    });

    setContentHeight();

    // fixed sidebar
    if ($.fn.mCustomScrollbar) {
        $('.menu_fixed').mCustomScrollbar({
            autoHideScrollbar: true,
            theme: 'minimal',
            mouseWheel:{ preventDefault: true }
        });
    }
  }  
});