Change sidebar active menu
This commit is contained in:
parent
e103ced738
commit
3f370dd293
|
@ -8,11 +8,11 @@ import { properties } from 'src/environments/environment';
|
|||
@Component({
|
||||
selector: 'admin-tabs',
|
||||
template: `
|
||||
<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m">
|
||||
<ul class="uk-tab uk-flex uk-flex-center uk-flex-left@m">
|
||||
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'portal'"><a routerLink="../portals"><span class="title">Portals</span></a></li>
|
||||
<li [class.uk-active]="tab === 'page'"><a routerLink="../pages"><span class="title">Pages</span></a></li>
|
||||
<li [class.uk-active]="tab === 'entity'"><a routerLink="../entities"><span class="title">Entities</span></a></li>
|
||||
<li *ngIf="env === 'development' && portal" [class.uk-active]="tab === 'menu'"><a routerLink="../menu"><span class="title">Menu</span></a></li>
|
||||
<li *ngIf="env === 'development' && portal && portal === 'connect'" [class.uk-active]="tab === 'menu'"><a routerLink="../menu"><span class="title">Menu</span></a></li>
|
||||
<li *ngIf="isPortalAdmin && !portal" [class.uk-active]="tab === 'class'"><a routerLink="../classes"><span class="title">Classes</span></a></li>
|
||||
</ul>
|
||||
`
|
||||
|
|
|
@ -14,7 +14,7 @@ declare var UIkit;
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page_content_inner" class="uk-section uk-container uk-container-large">
|
||||
<div id="page_content_inner" class="uk-section uk-padding-remove-top uk-container uk-container-large">
|
||||
<ng-content select="[inner]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<aside id="sidebar_main">
|
||||
<div id="sidebar_content">
|
||||
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
|
||||
<div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
|
||||
<ul class="uk-list uk-nav-parent-icon" uk-nav>
|
||||
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
|
||||
<li [class.uk-active]="isTheActiveMenuItem(item)"
|
||||
|
@ -9,11 +10,11 @@
|
|||
<a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?item.route:null"
|
||||
[title]="item.title"
|
||||
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
|
||||
<div class="uk-grid uk-flex-middle uk-flex-center" uk-grid>
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<div *ngIf="item.icon" class="uk-width-auto">
|
||||
<icon class="menu-icon" [svg]="item.icon" [flex]="true"></icon>
|
||||
</div>
|
||||
<span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate">{{item.title}}</span>
|
||||
<span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{item.title}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import {MenuItem} from "../../../sharedComponents/menu";
|
||||
import {Router} from "@angular/router";
|
||||
import {QueryParamsHandling, Router} from "@angular/router";
|
||||
import {DomSanitizer} from "@angular/platform-browser";
|
||||
import {properties} from "../../../../../environments/environment";
|
||||
import {LayoutService} from "./layout.service";
|
||||
|
@ -14,7 +14,7 @@ export class SideBarComponent implements OnInit {
|
|||
@Input() activeItem: string = '';
|
||||
@Input() activeSubItem: string = '';
|
||||
@Input() specialMenuItem: MenuItem = null;
|
||||
@Input() queryParamsHandling = "";
|
||||
@Input() queryParamsHandling;
|
||||
properties;
|
||||
|
||||
constructor(private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) {
|
||||
|
@ -25,6 +25,10 @@ export class SideBarComponent implements OnInit {
|
|||
}
|
||||
|
||||
|
||||
get activeIndex(): number {
|
||||
return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0;
|
||||
}
|
||||
|
||||
isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
|
||||
if (this.activeItem || this.activeSubItem) {
|
||||
return (!subItem && this.activeItem === item._id) ||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {ActivationStart, NavigationEnd, Router} from '@angular/router';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Injectable, Type} from '@angular/core';
|
||||
import {Subscription} from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
|
@ -9,13 +9,15 @@ export class SmoothScroll {
|
|||
private interval;
|
||||
private readonly sub;
|
||||
private lastComponent;
|
||||
private currentComponent: any;
|
||||
private currentComponent: string;
|
||||
|
||||
constructor(private router: Router) {
|
||||
if (typeof window !== "undefined") {
|
||||
this.sub = router.events.subscribe(event => {
|
||||
if (event instanceof ActivationStart) {
|
||||
this.currentComponent = event.snapshot.component;
|
||||
if(event.snapshot.component instanceof Type) {
|
||||
this.currentComponent = event.snapshot.component.name;
|
||||
}
|
||||
} else if (event instanceof NavigationEnd) {
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval);
|
||||
|
|
Loading…
Reference in New Issue