diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts
index 35f64427..9c7b5c14 100644
--- a/dashboard/sharedComponents/page-content/page-content.component.ts
+++ b/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,18 +31,14 @@ declare var ResizeObserver;
[attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
@@ -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, () => {
diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts
index d39fb765..4bd6bfa3 100644
--- a/dashboard/sharedComponents/sidebar/layout.service.ts
+++ b/dashboard/sharedComponents/sidebar/layout.service.ts
@@ -1,37 +1,44 @@
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'
})
export class LayoutService {
-
+
public static HEADER_HEIGHT = '65px';
private deviceBreakpoint: number;
-
+
/**
* Set this to true when sidebar items are ready.
*/
private openSubject: BehaviorSubject = new BehaviorSubject(false);
-
+
/**
* Set this to true when sidebar is hovered, otherwise false.
*/
private hoverSubject: BehaviorSubject = new BehaviorSubject(false);
-
+
/**
* Add hasSidebar: false on data of route config, if sidebar is not needed.
*/
private hasSidebarSubject: BehaviorSubject = new BehaviorSubject(false);
-
+
/**
* Add hasHeader: false on data of route config, if header is not needed.
*/
private hasHeaderSubject: BehaviorSubject = new BehaviorSubject(false);
-
+
/**
* Add hasAdminMenu: true on data of route config, if global sidebar should be used.
*/
@@ -52,13 +59,13 @@ export class LayoutService {
/**
* Add hasQuickContact: false on data of route config, if the quick-contact fixed button is not needed.
*/
- private hasQuickContactSubject: BehaviorSubject = new BehaviorSubject(true);
+ private hasQuickContactSubject: BehaviorSubject = new BehaviorSubject(true);
/**
* Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
*/
private activeMenuItemSubject: BehaviorSubject = new BehaviorSubject("");
-
+
/**
* Change to true will replace your Nav Header with the replaceHeader of your object.
* Be sure that replaceHeader exists.
@@ -66,37 +73,39 @@ export class LayoutService {
private replaceHeaderSubject: BehaviorSubject = new BehaviorSubject(false);
/** Check if the current device is mobile or tablet */
private isMobileSubject: BehaviorSubject = new BehaviorSubject(false);
+ /** Active sidebar Item*/
+ private activeSidebarItemSubject: BehaviorSubject = new BehaviorSubject(null);
private subscriptions: any[] = [];
-
+
ngOnDestroy() {
this.clearSubscriptions();
}
-
+
clearSubscriptions() {
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);
}
}
-
+
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);
}
}
@@ -145,7 +154,7 @@ export class LayoutService {
} else {
this.setSmallScreen(false);
}
- if (data['hasQuickContact'] !== undefined &&
+ if (data['hasQuickContact'] !== undefined &&
data['hasQuickContact'] === false) {
this.setHasQuickContact(false);
} else {
@@ -169,78 +178,82 @@ export class LayoutService {
get open(): boolean {
return this.openSubject.getValue();
}
-
+
setOpen(value: boolean) {
this.openSubject.next(value);
}
-
+
get hover(): boolean {
return this.hoverSubject.getValue();
}
-
+
setHover(value: boolean) {
this.hoverSubject.next(value);
}
-
+
+ get hasAnySidebar(): boolean {
+ return this.hasSidebarSubject.getValue() || this.hasInternalSidebarSubject.getValue() || this.hasAdminMenuSubject.getValue();
+ }
+
get hasSidebar(): Observable {
return this.hasSidebarSubject.asObservable();
}
-
+
setHasSidebar(value: boolean) {
this.hasSidebarSubject.next(value);
}
-
+
get hasHeader(): Observable {
return this.hasHeaderSubject.asObservable();
}
-
+
setHasHeader(value: boolean) {
this.hasHeaderSubject.next(value);
}
-
+
get hasAdminMenu(): Observable {
return this.hasAdminMenuSubject.asObservable();
}
-
+
setHasAdminMenu(value: boolean) {
this.hasAdminMenuSubject.next(value);
}
-
+
get hasInternalSidebar(): Observable {
return this.hasInternalSidebarSubject.asObservable();
}
-
+
setHasInternalSidebar(value: boolean) {
this.hasInternalSidebarSubject.next(value);
}
-
+
get isFrontPage(): Observable {
return this.isFrontPageSubject.asObservable();
}
-
+
setFrontPage(value: boolean) {
this.isFrontPageSubject.next(value);
}
-
+
get replaceHeader(): Observable {
return this.replaceHeaderSubject.asObservable();
}
-
+
get replaceHeaderValue(): boolean {
return this.replaceHeaderSubject.getValue();
}
-
+
setReplaceHeader(value: boolean) {
this.replaceHeaderSubject.next(value);
}
-
+
/**
* @deprecated
* */
get isSmallScreen(): boolean {
return this.isSmallScreenSubject.getValue();
}
-
+
/**
* @deprecated
* */
@@ -248,13 +261,13 @@ export class LayoutService {
this.isSmallScreenSubject.next(value);
}
- get hasQuickContact(): Observable {
- return this.hasQuickContactSubject.asObservable();
- }
+ get hasQuickContact(): Observable {
+ return this.hasQuickContactSubject.asObservable();
+ }
- setHasQuickContact(value: boolean) {
- this.hasQuickContactSubject.next(value);
- }
+ setHasQuickContact(value: boolean) {
+ this.hasQuickContactSubject.next(value);
+ }
get activeMenuItem(): string {
return this.activeMenuItemSubject.getValue();
@@ -263,12 +276,20 @@ export class LayoutService {
setActiveMenuItem(value: string) {
this.activeMenuItemSubject.next(value);
}
-
+
get isMobile(): Observable {
return this.isMobileSubject.asObservable();
}
-
+
get isMobileValue(): boolean {
return this.isMobileSubject.getValue();
}
+
+ get activeSidebarItem(): Observable {
+ return this.activeSidebarItemSubject.asObservable();
+ }
+
+ setActiveSidebarItem(value: SidebarItem) {
+ this.activeSidebarItemSubject.next(value);
+ }
}
diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.html b/dashboard/sharedComponents/sidebar/sideBar.component.html
index 29682e8e..6e4bd598 100644
--- a/dashboard/sharedComponents/sidebar/sideBar.component.html
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.html
@@ -1,46 +1,59 @@
-