Add sidebar mobile toggle. Add activeSidebarItem in layout service and handle it in sidebar. Add isActive in menuItem. Make some improvents in slider-tabs
parent
ee71b895bf
commit
f53370213a
@ -1,46 +1,59 @@
|
||||
<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">
|
||||
<ul #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 400">
|
||||
<ng-template ngFor [ngForOf]="items" let-item>
|
||||
<li [class.uk-active]="isTheActiveMenuItem(item)"
|
||||
[class.uk-parent]="item.items.length > 0">
|
||||
<a [routerLink]="getItemRoute(item)" [title]="item.title"
|
||||
[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">
|
||||
<li *ngFor="let subItem of item.items"
|
||||
[class.uk-active]="isTheActiveMenuItem(item, subItem)">
|
||||
<a [routerLink]="subItem.route?subItem.route:null" [queryParams]="subItem.route?subItem.params:null"
|
||||
[queryParamsHandling]="subItem.route?queryParamsHandling:null" [title]="subItem.title">
|
||||
<span class="uk-text-truncate">{{subItem.title}}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
<ng-template [ngIf]="specialMenuItem">
|
||||
<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"
|
||||
[queryParamsHandling]="queryParamsHandling">
|
||||
<div class="uk-flex uk-flex-middle uk-flex-center">
|
||||
<div *ngIf="specialMenuItem.icon" class="uk-width-auto">
|
||||
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
|
||||
</div>
|
||||
<span class="uk-width-expand uk-text-truncate uk-margin-small-left"
|
||||
[class.hide-on-close]="specialMenuItem.icon">{{specialMenuItem.title}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-container *ngTemplateOutlet="menu; context: {mobile: false}"></ng-container>
|
||||
</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]="item.isActive"
|
||||
[class.uk-parent]="item.items.length > 0">
|
||||
<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 || item.isActive)" class="uk-nav-sub">
|
||||
<li *ngFor="let subItem of item.items"
|
||||
[class.uk-active]="subItem.isActive">
|
||||
<a [routerLink]="subItem.route?subItem.route:null" [title]="subItem.title" (click)="closeOffcanvas()"
|
||||
[queryParams]="subItem.route?subItem.params:null" [queryParamsHandling]="subItem.route?queryParamsHandling:null">
|
||||
<span class="uk-text-truncate">{{subItem.title}}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="specialMenuItem" class="menu_section uk-margin-xlarge-top" [class.mobile]="mobile" >
|
||||
<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">
|
||||
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
|
||||
</div>
|
||||
<span class="uk-width-expand uk-text-truncate uk-margin-small-left"
|
||||
[class.hide-on-close]="specialMenuItem.icon">{{specialMenuItem.title}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -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 {}
|
||||
Loading…
Reference in New Issue