diff --git a/src/app/theme/sidebar/sidebar.component.ts b/src/app/theme/sidebar/sidebar.component.ts
index b3cc07c6..77bfc3af 100644
--- a/src/app/theme/sidebar/sidebar.component.ts
+++ b/src/app/theme/sidebar/sidebar.component.ts
@@ -19,6 +19,10 @@ export class Sidebar {
   menuHeight: number;
   isMenuCollapsed: boolean;
 
+  showHoverElem: boolean;
+  hoverElemHeight: number;
+  hoverElemTop: number;
+
   constructor(el: ElementRef, router: Router, private _sidebarService: SidebarService) {
     this.elementRef = el;
     this.router = router;
@@ -43,6 +47,13 @@ export class Sidebar {
     this.isMenuCollapsed = true;
   }
 
+  hoverItem = function ($event) {
+    this.showHoverElem = true;
+    this.hoverElemHeight =  $event.currentTarget.clientHeight;
+    // TODO: get rid of magic 66 constant
+    this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
+  }
+
   toggleSubMenu ($event, item) {
     var submenu = $($event.currentTarget).next();
 
diff --git a/src/app/theme/sidebar/sidebar.html b/src/app/theme/sidebar/sidebar.html
index 896d499b..28881677 100644
--- a/src/app/theme/sidebar/sidebar.html
+++ b/src/app/theme/sidebar/sidebar.html
@@ -7,7 +7,7 @@
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
       </a>
 
-      <a *ngIf="item.subMenu" ng-mouseenter="hoverItem($event, item)" (click)="toggleSubMenu($event, item)" class="al-sidebar-list-link">
+      <a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)" class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
         <b class="fa" [ngClass]="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}" *ngIf="item.subMenu"></b>
       </a>
@@ -15,19 +15,19 @@
       <ul *ngIf="item.subMenu" class="al-sidebar-sublist"
           [ngClass]="{expanded: item.expanded, 'slide-right': item.slideRight}">
         <li *ngFor="#subitem of item.subMenu" [ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
-          <a ng-mouseenter="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
+          <a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
              class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
             <b class="fa" *ngIf="subitem.subMenu" [ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
           </a>
           <ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
               [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
-            <li *ngFor="#subSubitem of subitem.subMenu" ng-mouseenter="hoverItem($event, item)" [ngClass]="{selected: subitem.selected}">
-              <a  ng-mouseenter="hoverItem($event, item)" [routerLink]="[subSubitem.name]">
+            <li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)" [ngClass]="{selected: subitem.selected}">
+              <a  (mouseenter)="hoverItem($event, item)" [routerLink]="[subSubitem.name]">
                 {{ subSubitem.title }}</a>
             </li>
           </ul>
           <a *ngIf="!subitem.subMenu" [routerLink]="[subitem.name]"
-             ng-mouseenter="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
+             (mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
             {{ subitem.title}}
           </a>
         </li>
@@ -35,5 +35,6 @@
 
     </li>
   </ul>
-  <div class="sidebar-hover-elem"></div>
+  <div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
+       [ngClass]="{'show-hover-elem': showHoverElem }"></div>
 </aside>