WIP

src/app/@theme/components/header/breakPoint.ts

@@ -0,0 +1,34 @@
+export const DEFAULT_MEDIA_BREAKPOINTS = [
+    {
+        name: 'xs',
+        width: 0,
+    },
+    {
+        name: 'is',
+        width: 400,
+    },
+    {
+        name: 'sm',
+        width: 576,
+    },
+    {
+        name: 'md',
+        width: 768,
+    },
+    {
+        name: 'lg',
+        width: 992,
+    },
+    {
+        name: 'xl',
+        width: 1200,
+    },
+    {
+        name: 'xxl',
+        width: 1400,
+    },
+    {
+        name: 'xxxl',
+        width: 1600,
+    },
+];

src/app/@theme/components/header/header.component.ts

@@ -9,6 +9,7 @@ import { HeaderService } from '../../../services/header.service';
 import { NbAuthService } from '@nebular/auth';
 import { AuthService } from '../../../services/auth.service';
 import { UserProfileAction } from '../../../entity/Auth';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'ngx-header',
@@ -19,6 +20,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
   header: string = '';
   private destroy$: Subject<void> = new Subject<void>();
   userPictureOnly: boolean = false;
+  isLessThanMd: boolean = false;
 
   themes = [
     {
@@ -68,7 +70,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
       return null;
     }
   }
-  constructor(private sidebarService: NbSidebarService,
+  constructor(
+    private sidebarService: NbSidebarService,
     private menuService: NbMenuService,
     private themeService: NbThemeService,
     private userService: UserData,
@@ -77,15 +80,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
     private headerService: HeaderService,
     private oAuthService: NbAuthService,
     private authService: AuthService,
+    protected router: Router,
   ) {
 
     this.headerService.headerChange$.pipe(takeUntil(this.destroy$)).subscribe(result => {
       this.header = result;
     });
-    this.menuService.onItemClick().pipe(takeUntil(this.destroy$))
-      .subscribe(result => {
-        if (result.item.title == 'Log out') this.logout();
-      });
   }
 
 
@@ -93,13 +93,18 @@ export class HeaderComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.currentTheme = this.themeService.currentTheme;
 
-    const { xl } = this.breakpointService.getBreakpointsMap();
+    const { md, xl } = this.breakpointService.getBreakpointsMap();
     this.themeService.onMediaQueryChange()
       .pipe(
-        map(([, currentBreakpoint]) => currentBreakpoint.width < xl),
+        map(([, currentBreakpoint]) => currentBreakpoint.width),
         takeUntil(this.destroy$),
       )
-      .subscribe((isLessThanXl: boolean) => this.userPictureOnly = isLessThanXl);
+      .subscribe((screenWidth: number) => {
+        let isLessThanXl = screenWidth < xl;
+        this.isLessThanMd = screenWidth < md;
+        this.userPictureOnly = isLessThanXl
+
+      });
 
     this.themeService.onThemeChange()
       .pipe(
@@ -108,6 +113,22 @@ export class HeaderComponent implements OnInit, OnDestroy {
       )
       .subscribe(themeName => this.currentTheme = themeName);
 
+    this.menuService.onItemClick().subscribe(result => {
+      if (this.isLessThanMd && result.tag == 'NavMenu' && result.item.link) {
+        this.toggleSidebar();
+      } else if (result.tag == 'UserProfileMenu') {
+        switch (result.item.data as UserProfileAction) {
+          case UserProfileAction.None: break;
+          case UserProfileAction.GoToProfile:
+            this.router.navigate(["/myapp/profile"]);
+            break;
+          case UserProfileAction.LogOut:
+            this.logout();
+            break;
+          default: break;
+        }
+      }
+    });
   }
 
   ngOnDestroy() {