app.html

<template>
  <require from="~/_templates/sidebar/sidebar"></require>
  <require from="~/_templates/topbar/topbar"></require>
  <div class="container body">
    <div class="main_container">
      <!-- sidebar menu -->
      <side-bar class="side-bar"></side-bar>
      <!-- /sidebar menu -->

      <!-- top navigation -->
      <top-bar class="top-bar"></top-bar>
      <!-- /top navigation -->

      <!-- page content -->
      <div class="right_col" role="main">
        <router-view class="dist-body content"></router-view>
      </div>
      <!-- /page content -->

      <!-- footer content -->
      <footer class="footer">
        <div class="pull-right">
          Made by Sarbakan from an original template by <a href="https://colorlib.com">Colorlib</a>
        </div>
        <div class="clearfix"></div>
      </footer>
      <!-- /footer content -->
    </div>
  </div>
</template>

sidebar.js

import {inject, LogManager} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import {EventAggregator} from 'aurelia-event-aggregator';
import {BindingSignaler} from 'aurelia-templating-resources';
import {SecurityContext} from '~/services/SecurityContext';
import {MenuCategories} from '~/services/MenuCategories';

@inject(Router, SecurityContext, EventAggregator, BindingSignaler, MenuCategories)
export class SideBar {
  categoriesElements = [];

  constructor(router:Router, securityContext:SecurityContext, eventAggregator, signaler, menuCategories:MenuCategories) {
    this.router = router;
    this.securityContext = securityContext;
    this.eventAggregator = eventAggregator;
    this.signaler = signaler;
    this.menuCategories = menuCategories;

    this.collapsed = false;
    debugger; // This one is triggered

    this.securityContext.onChange(() => {
      this.signaler.signal('securityContext:change');
    });
  }

  activate() {
    debugger; // This is never triggered
    this.menuCategories.initialize(this.router);
  }


  slidetoggle(el) {
    if(!el.firstUl){
      el.firstUl = $('ul:first', el);
    }
    el.firstUl.slideToggle();
    el.classList.toggle('active');
  }

  // -- Logging ------

  get logger() {
    if (!this._logger)
      this._logger = LogManager.getLogger(this.constructor.name);
    return this._logger;
  }
}

export class KeysValueConverter {
  toView(value) {
    return Object.keys(value);
  }
}