Change sidebar active menu

This commit is contained in:
Konstantinos Triantafyllou 2022-03-17 13:28:25 +02:00
parent e103ced738
commit 3f370dd293
5 changed files with 17 additions and 10 deletions

View File

@ -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>
`

View File

@ -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>

View File

@ -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>

View File

@ -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) ||

View File

@ -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);