From f53370213a0f6dda1c980c93cd6b8256ae114793 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 15 Feb 2023 11:53:25 +0200 Subject: [PATCH] Add sidebar mobile toggle. Add activeSidebarItem in layout service and handle it in sidebar. Add isActive in menuItem. Make some improvents in slider-tabs --- .../page-content/page-content.component.ts | 23 ++-- .../sidebar/layout.service.ts | 111 +++++++++++------- .../sidebar/sideBar.component.html | 99 +++++++++------- .../sidebar/sideBar.component.ts | 103 +++++++++++++--- .../sidebar-mobile-toggle.component.ts | 42 +++++++ .../sidebar-mobile-toggle.module.ts | 11 ++ sharedComponents/menu.ts | 33 +++--- sharedComponents/navigationBar.component.html | 6 +- .../tabs/slider-tabs.component.ts | 48 +++++--- 9 files changed, 322 insertions(+), 154 deletions(-) create mode 100644 dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.component.ts create mode 100644 dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module.ts 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 @@ -