Add sidebar mobile toggle. Add activeSidebarItem in layout service and handle it in sidebar. Add isActive in menuItem. Make some improvents in slider-tabs

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -10,7 +10,7 @@ import {
   PLATFORM_ID,
   ViewChild
 } from "@angular/core";
-import {LayoutService} from "../sidebar/layout.service";
+import {LayoutService, SidebarItem} from "../sidebar/layout.service";
 
 declare var UIkit;
 declare var ResizeObserver;
@@ -31,21 +31,17 @@ declare var ResizeObserver;
            [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
         <div class="uk-container uk-container-large">
           <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
-            <div class="header">
              <ng-content select="[header]"></ng-content>
           </div>
         </div>
       </div>
-      </div>
       <div id="page_content_actions" #actions class="uk-blur-background" [class.uk-border-bottom]="border && isStickyActive">
         <div class="uk-container uk-container-large">
           <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
-            <div class="actions">
             <ng-content select="[actions]"></ng-content>
           </div>
         </div>
       </div>
-      </div>
       <div id="page_content_inner" class="uk-container uk-container-large">
         <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical':''">
           <ng-content select="[inner]"></ng-content>
@@ -69,15 +65,15 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   public offset: number;
   public shouldSticky: boolean = true;
   public isMobile: boolean = false;
+  public isStickyActive: boolean = false;
+  public footer_height: number = 0;
   @ViewChild('header') header: ElementRef;
   @ViewChild('actions') actions: ElementRef;
-  public footer_height: number = 0;
   @ViewChild("sticky_footer") sticky_footer: ElementRef;
   private sticky = {
     header: null,
     footer: null
   }
-  public isStickyActive: boolean = false;
   subscriptions = [];
 
   constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
@@ -85,12 +81,12 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit() {
-    if (typeof document !== "undefined") {
-      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
-      this.stickyBugWorkaround();
-    }
     this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
       this.isMobile = isMobile;
+      if (typeof document !== "undefined") {
+        this.offset = this.isMobile?0:Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
+        this.stickyBugWorkaround();
+      }
       this.cdr.detectChanges();
     }));
   }
@@ -104,7 +100,6 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
       this.observeStickyFooter();
       if (this.shouldSticky && typeof document !== 'undefined') {
         this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), {
-          media: '@m',
           offset: this.offset
         });
         this.subscriptions.push(UIkit.util.on(document, 'active', '#' + this.sticky.header.$el.id, () => {

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -1,9 +1,16 @@
 import {Injectable} from "@angular/core";
 import {BehaviorSubject, Observable, Subscriber} from "rxjs";
 import {ActivationStart, Router} from "@angular/router";
+import {Icon} from "../../../sharedComponents/menu";
 
 declare var ResizeObserver;
 
+export interface SidebarItem {
+  icon?: Icon,
+  name: string,
+  subItem?: SidebarItem
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -66,6 +73,8 @@ export class LayoutService {
   private replaceHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   /** Check if the current device is mobile or tablet */
   private isMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  /** Active sidebar Item*/
+  private activeSidebarItemSubject: BehaviorSubject<SidebarItem> = new BehaviorSubject<SidebarItem>(null);
   private subscriptions: any[] = [];
 
   ngOnDestroy() {
@@ -76,19 +85,19 @@ export class LayoutService {
     this.subscriptions.forEach(subscription => {
       if (subscription instanceof Subscriber) {
         subscription.unsubscribe();
-      } else if(subscription instanceof ResizeObserver) {
+      } else if (subscription instanceof ResizeObserver) {
         subscription.disconnect();
       }
     })
   }
 
   setObserver() {
-    if(typeof ResizeObserver !== "undefined" && typeof document !== "undefined") {
+    if (typeof ResizeObserver !== "undefined" && typeof document !== "undefined") {
       this.deviceBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-m').replace('px', '')) + 1;
       let resizeObs = new ResizeObserver(entries => {
         entries.forEach(entry => {
           this.isMobileSubject.next(entry.target.clientWidth < this.deviceBreakpoint);
-        })
+        });
       });
       this.subscriptions.push(resizeObs);
       resizeObs.observe(document.documentElement);
@@ -96,7 +105,7 @@ export class LayoutService {
   }
 
   constructor(private router: Router) {
-    if(typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
       this.isMobileSubject.next(window.innerWidth < this.deviceBreakpoint);
     }
     this.subscriptions.push(this.router.events.subscribe(event => {
@@ -112,12 +121,12 @@ export class LayoutService {
         if (data['hasHeader'] !== undefined &&
           data['hasHeader'] === false) {
           this.setHasHeader(false);
-          if(typeof document !== "undefined") {
+          if (typeof document !== "undefined") {
             document.documentElement.style.setProperty('--header-height', '0');
           }
         } else {
           this.setHasHeader(true);
-          if(typeof document !== "undefined") {
+          if (typeof document !== "undefined") {
             document.documentElement.style.setProperty('--header-height', LayoutService.HEADER_HEIGHT);
           }
         }
@@ -182,6 +191,10 @@ export class LayoutService {
     this.hoverSubject.next(value);
   }
 
+  get hasAnySidebar(): boolean {
+    return this.hasSidebarSubject.getValue() || this.hasInternalSidebarSubject.getValue() || this.hasAdminMenuSubject.getValue();
+  }
+
   get hasSidebar(): Observable<boolean> {
     return this.hasSidebarSubject.asObservable();
   }
@@ -271,4 +284,12 @@ export class LayoutService {
   get isMobileValue(): boolean {
     return this.isMobileSubject.getValue();
   }
+
+  get activeSidebarItem(): Observable<SidebarItem> {
+    return this.activeSidebarItemSubject.asObservable();
+  }
+
+  setActiveSidebarItem(value: SidebarItem) {
+    this.activeSidebarItemSubject.next(value);
+  }
 }

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -1,22 +1,37 @@
-<aside id="sidebar_main">
+<aside id="sidebar_main" class="uk-visible@m">
   <div sidebar-content>
-    <div *ngIf="items.length > 0" class="menu_section mobile uk-margin-large-top" style="min-height: 30vh">
+    <ng-container *ngTemplateOutlet="menu; context: {mobile: false}"></ng-container>
-      <ul #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 400">
+  </div>
+</aside>
+<div class="uk-hidden@m">
+  <div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'">
+    <div class="uk-offcanvas-bar uk-padding-remove-horizontal">
+      <button class="uk-offcanvas-close uk-icon uk-close">
+        <icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
+      </button>
+      <ng-container *ngTemplateOutlet="menu; context: {mobile: true}"></ng-container>
+    </div>
+  </div>
+</div>
+<ng-template #menu let-mobile=mobile>
+  <div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" [class.mobile]="mobile" style="min-height: 30vh">
+    <ul #nav class="uk-list uk-nav uk-nav-parent-icon"
+        [class.uk-nav-default]="!mobile" [class.uk-nav-primary]="mobile" uk-nav="duration: 400">
       <ng-template ngFor [ngForOf]="items" let-item>
-          <li [class.uk-active]="isTheActiveMenuItem(item)"
+        <li [class.uk-active]="item.isActive"
             [class.uk-parent]="item.items.length > 0">
-            <a [routerLink]="getItemRoute(item)" [title]="item.title"
+          <a [routerLink]="getItemRoute(item)" [title]="item.title" (click)="item.items.length === 0?closeOffcanvas():null"
              [queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null" class="uk-flex uk-flex-middle">
             <div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto">
               <icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [svg]="item.icon.svg" [flex]="true"></icon>
             </div>
             <span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
           </a>
-            <ul *ngIf="item.items?.length > 0 && (isBrowser || isTheActiveMenuItem(item))" class="uk-nav-sub">
+          <ul *ngIf="item.items?.length > 0 && (isBrowser || item.isActive)" class="uk-nav-sub">
             <li *ngFor="let subItem of item.items"
-                  [class.uk-active]="isTheActiveMenuItem(item, subItem)">
+                [class.uk-active]="subItem.isActive">
-                <a [routerLink]="subItem.route?subItem.route:null" [queryParams]="subItem.route?subItem.params:null"
+              <a [routerLink]="subItem.route?subItem.route:null" [title]="subItem.title" (click)="closeOffcanvas()"
-                   [queryParamsHandling]="subItem.route?queryParamsHandling:null" [title]="subItem.title">
+                 [queryParams]="subItem.route?subItem.params:null" [queryParamsHandling]="subItem.route?queryParamsHandling:null">
                 <span class="uk-text-truncate">{{subItem.title}}</span></a>
             </li>
           </ul>
@@ -24,11 +39,11 @@
       </ng-template>
     </ul>
   </div>
-    <ng-template [ngIf]="specialMenuItem">
+  <div *ngIf="specialMenuItem" class="menu_section uk-margin-xlarge-top" [class.mobile]="mobile" >
-      <div class="menu_section uk-margin-xlarge-top">
       <ul class="uk-list uk-nav uk-nav-default" uk-nav>
         <li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
           <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
+             (click)="closeOffcanvas()"
              [queryParamsHandling]="queryParamsHandling">
             <div class="uk-flex uk-flex-middle uk-flex-center">
               <div *ngIf="specialMenuItem.icon" class="uk-width-auto">
@@ -41,6 +56,4 @@
         </li>
       </ul>
     </div>
-    </ng-template>
+</ng-template>
-  </div>
-</aside>

dashboard/sharedComponents/sidebar/sideBar.component.ts

@@ -1,9 +1,20 @@
-import {AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild} from '@angular/core';
+import {
+  AfterViewInit, ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  Input, OnChanges,
+  OnDestroy,
+  OnInit,
+  PLATFORM_ID, SimpleChanges,
+  ViewChild
+} from '@angular/core';
 import {MenuItem} from "../../../sharedComponents/menu";
-import {ActivatedRoute, Router} from "@angular/router";
+import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
 import {DomSanitizer} from "@angular/platform-browser";
 import {properties} from "../../../../../environments/environment";
 import {LayoutService} from "./layout.service";
+import {Subscription} from "rxjs";
 
 declare var UIkit;
 
@@ -11,18 +22,30 @@ declare var UIkit;
   selector: 'dashboard-sidebar',
   templateUrl: 'sideBar.component.html'
 })
-export class SideBarComponent implements AfterViewInit {
+export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
   @Input() items: MenuItem[] = [];
   @Input() activeItem: string = '';
   @Input() activeSubItem: string = '';
   @Input() specialMenuItem: MenuItem = null;
   @Input() queryParamsHandling;
-  @ViewChild("nav") nav: ElementRef
+  @ViewChild("nav") nav: ElementRef;
+  @ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef;
   public properties = properties;
+  private subscriptions: any[] = [];
   
   constructor(private route: ActivatedRoute, private router: Router,
               private sanitizer: DomSanitizer, private layoutService: LayoutService,
-              @Inject(PLATFORM_ID) private platformId) {}
+              private cdr: ChangeDetectorRef, @Inject(PLATFORM_ID) private platformId) {
+    this.subscriptions.push(this.router.events.subscribe(event => {
+      if(event instanceof NavigationEnd && (!this.activeItem && !this.activeSubItem)) {
+        this.setActiveMenuItem();
+      }
+    }));
+  }
+
+  ngOnInit() {
+    this.setActiveMenuItem();
+  }
 
   ngAfterViewInit() {
     if(this.nav && typeof UIkit !== "undefined") {
@@ -34,6 +57,21 @@ export class SideBarComponent implements AfterViewInit {
     }
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes.activeItem || changes.activeSubItem || changes.items) {
+      this.setActiveMenuItem();
+    }
+  }
+
+  ngOnDestroy() {
+    this.layoutService.setActiveSidebarItem(null);
+    this.subscriptions.forEach(subscription => {
+      if(subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
   get isBrowser() {
     return this.platformId === 'browser';
   }
@@ -46,7 +84,7 @@ export class SideBarComponent implements AfterViewInit {
   }
   
   get activeIndex(): number {
-    return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0;
+    return this.items?this.items.findIndex(item => item.isActive):0;
   }
   
   getItemRoute(item: MenuItem) {
@@ -58,7 +96,42 @@ export class SideBarComponent implements AfterViewInit {
     }
   }
 
-  isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
+  setActiveMenuItem() {
+    this.items.forEach(item => {
+      item.isActive = this.isTheActiveMenuItem(item);
+      if(item.isActive) {
+        if(item.items.length > 0) {
+          item.items.forEach(subItem => {
+            subItem.isActive = this.isTheActiveMenuItem(item, subItem);
+            if(subItem.isActive) {
+              this.layoutService.setActiveSidebarItem({
+                name: item.title,
+                icon: item.icon,
+                subItem: {
+                  name: subItem.title
+                }
+              });
+            }
+          });
+        } else {
+          this.layoutService.setActiveSidebarItem({
+            name: item.title,
+            icon: item.icon
+          });
+        }
+      } else {
+        item.items.forEach(subItem => {
+          subItem.isActive = false;
+        });
+      }
+    });
+    if(!this.items.find(item => item.isActive)) {
+      this.layoutService.setActiveSidebarItem(null);
+    }
+    this.cdr.detectChanges();
+  }
+  
+  private isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
     if (this.activeItem || this.activeSubItem) {
       return (!subItem && this.activeItem === item._id) ||
         (subItem && this.activeItem === item._id && this.activeSubItem === subItem._id);
@@ -74,15 +147,13 @@ export class SideBarComponent implements AfterViewInit {
     return (menuItemURL == this.router.url.split('?')[0])
   }
   
-  satinizeHTML(html) {
-    return this.sanitizer.bypassSecurityTrustHtml(html);
-  }
-  
-  public get isSmallScreen() {
-    return this.layoutService.isSmallScreen;
-  }
-  
   public get open() {
     return this.layoutService.open;
   }
+  
+  public closeOffcanvas() {
+    if(this.sidebar_offcanvas) {
+      UIkit.offcanvas(this.sidebar_offcanvas.nativeElement).hide();
+    }
+  }
 }

dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.component.ts

@@ -0,0 +1,42 @@
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {LayoutService, SidebarItem} from "../layout.service";
+import {Subscription} from "rxjs";
+
+@Component({
+  selector: 'sidebar-mobile-toggle',
+  template: `
+    <a *ngIf="activeSidebarItem" href="#sidebar_offcanvas" class="sidebar_mobile_toggle uk-link-reset uk-width-2-3 uk-flex uk-flex-middle" uk-toggle>
+      <div *ngIf="activeSidebarItem.icon && (activeSidebarItem.icon.svg || activeSidebarItem.icon.name)" class="uk-width-auto">
+        <icon class="menu-icon" [customClass]="activeSidebarItem.icon.class" [name]="activeSidebarItem.icon.name" ratio="0.9" [svg]="activeSidebarItem.icon.svg" [flex]="true"></icon>
+      </div>
+      <span class="uk-width-expand uk-text-truncate uk-margin-small-left uk-text-bolder">
+          {{activeSidebarItem.name}}
+        <span *ngIf="activeSidebarItem.subItem">- {{activeSidebarItem.subItem.name}}</span>
+      </span>
+      <div class="uk-width-auto uk-margin-small-left">
+        <icon name="arrow_drop_down" ratio="1.5"  [flex]="true"></icon>
+      </div>
+    </a>
+  `
+})
+export class SidebarMobileToggleComponent implements OnInit, OnDestroy {
+  public activeSidebarItem: SidebarItem;
+  private subscriptions: any[] = [];
+  
+  constructor(private layoutService: LayoutService) {
+  }
+  
+  ngOnInit() {
+    this.subscriptions.push(this.layoutService.activeSidebarItem.subscribe(activeSidebarItem => {
+      this.activeSidebarItem = activeSidebarItem;
+    }));
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      if(subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+}

dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {SidebarMobileToggleComponent} from "./sidebar-mobile-toggle.component";
+import {IconsModule} from "../../../../utils/icons/icons.module";
+
+@NgModule({
+  imports: [CommonModule, IconsModule],
+  declarations: [SidebarMobileToggleComponent],
+  exports: [SidebarMobileToggleComponent]
+})
+export class SidebarMobileToggleModule {}

sharedComponents/menu.ts

@@ -3,6 +3,7 @@ export interface Icon {
   svg?: string,
   class?: string
 }
+
 export class MenuItem {
   _id: string = ""; // for root menu in order to close the dropdown when clicked
   title: string = "";
@@ -20,6 +21,7 @@ export class MenuItem {
   open: boolean;
   customClass: string = null;
   isFeatured: boolean;
+  isActive: boolean;
   target: string = "_blank";
 
   constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[],
@@ -43,12 +45,12 @@ export class MenuItem {
     this.isFeatured = isFeatured;
   }
 
-  public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string=""): boolean {
+  public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string = ""): boolean {
-    if(menu.route && menu.route.length > 0 && MenuItem.isTheActiveMenuItem(menu, currentRoute, activeMenuItem)) {
+    if (menu.route && menu.route.length > 0 && MenuItem.isTheActiveMenuItem(menu, currentRoute, activeMenuItem)) {
       return true;
-    } else if(menu.items.length > 0) {
+    } else if (menu.items.length > 0) {
-      for(let menuItem of menu.items) {
+      for (let menuItem of menu.items) {
-        if(MenuItem.isTheActiveMenuItem(menuItem, currentRoute, activeMenuItem)) {
+        if (MenuItem.isTheActiveMenuItem(menuItem, currentRoute, activeMenuItem)) {
           return true;
         }
       }
@@ -67,6 +69,7 @@ export class MenuItem {
 
 
 }
+
 export class MenuItemExtended extends MenuItem {
   isOpen: boolean = false;
   parentItemId: string;
@@ -85,4 +88,4 @@ export class SideMenuItem extends MenuItem {
   ukIcon: string = '';
 }
 
-export enum MenuAlignment {LEFT="LEFT", CENTER="CENTER", RIGHT="RIGHT"}
+export enum MenuAlignment {LEFT = "LEFT", CENTER = "CENTER", RIGHT = "RIGHT"}

sharedComponents/navigationBar.component.html

@@ -24,7 +24,7 @@
         <button class="uk-offcanvas-close uk-icon uk-close">
           <icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
         </button>
-        <ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-top uk-nav-parent-icon" uk-nav>
+        <ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-large-top uk-nav-parent-icon" uk-nav>
           <ng-container *ngIf="!onlyTop">
             <li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
               <a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
@@ -314,7 +314,7 @@
     <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
            [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
            [alt]="activeHeader.title">
-    <div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div>
+    <div *ngIf="activeHeader.logoInfo" class="uk-visible@l" [innerHTML]="activeHeader.logoInfo"></div>
     <ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
       <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
         <p class="uk-margin-remove">{{activeHeader.title}}</p>
@@ -326,7 +326,7 @@
     <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
          [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
          [alt]="activeHeader.title">
-    <div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div>
+    <div *ngIf="activeHeader.logoInfo" class="uk-visible@l" [innerHTML]="activeHeader.logoInfo"></div>
     <ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
       <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
         <p class="uk-margin-remove">{{activeHeader.title}}</p>

sharedComponents/tabs/slider-tabs.component.ts

@@ -27,30 +27,32 @@ declare var UIkit;
             [attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
             [ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
           <ng-container *ngIf="type === 'static'">
-            <li *ngFor="let tab of leftTabs" class="uk-text-capitalize">
+            <li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block">
               <a>{{tab.title}}</a>
             </li>
-            <li *ngFor="let tab of rightTabs; let i=index;"
+            <li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
-                [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
+                class="uk-text-capitalize uk-text-truncate uk-display-block">
-                class="uk-text-capitalize">
               <a [ngClass]="tab.customClass">{{tab.title}}</a>
             </li>
           </ng-container>
           <ng-container *ngIf="type === 'dynamic'">
-            <li *ngFor="let tab of leftTabs" [class.uk-active]="tab.active" class="uk-text-capitalize">
+            <li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" style="max-width: 50%">
-              <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a>
+              <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
+                 (click)="showActive(i)"
+                 class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
             </li>
-            <li *ngFor="let tab of rightTabs; let i=index;" [class.uk-active]="tab.active"
+            <li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [class.uk-active]="tab.active"
-                [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
+                [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''">
-                class="uk-text-capitalize">
+              <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
-              <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a>
+                 (click)="showActive(i)"
+                 class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
             </li>
           </ng-container>
           <ng-container *ngIf="type === 'scrollable'">
-            <li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active">
+            <li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active">
               <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
             </li>
-            <li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize"
+            <li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block"
                 [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
                 [class.uk-active]="tab.active">
               <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
@@ -109,6 +111,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
   @ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
   @ViewChild('sliderElement') sliderElement: ElementRef;
   @ViewChild('tabsElement') tabsElement: ElementRef;
+  private slider;
   /**
    * Notify regarding new active element
    * */
@@ -127,23 +130,25 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
     if (typeof document !== 'undefined' && this.tabs.length > 0) {
       setTimeout(() => {
         if (this.position === 'horizontal') {
-          let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
+          this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
-          slider.clsActive = 'uk-slider-active';
+          this.slider.clsActive = 'uk-slider-active';
-          slider.updateActiveClasses();
+          this.slider.updateActiveClasses();
-          slider.slides.forEach((item, index) => {
+          this.slider.slides.forEach((item, index) => {
             if(!this.tabs.get(index).active) {
               item.classList.remove('uk-active');
             }
           });
-          console.log(slider);
           if (this.type === 'static') {
             let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
             tabs.show(this.activeIndex);
             if (this.connect.includes('#')) {
               this.scrollToStart();
             }
+          } else if(this.type =='dynamic') {
+            this.activeIndex = this.tabs.toArray().findIndex(tab => tab.active);
+            this.slider.show(this.activeIndex);
           } else if (this.type === 'scrollable') {
-            this.scrollable(slider);
+            this.scrollable(this.slider);
           }
         } else {
           this.scrollable();
@@ -199,6 +204,13 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  public showActive(index) {
+    this.activeIndex = index;
+    if(this.slider) {
+      this.slider.show(this.activeIndex);
+    }
+  }
+  
   private activeFragment(fragment, slider) {
     let index = 0;
     if (fragment) {