diff --git a/ogWebconsole/src/app/layout/header/header.component.css b/ogWebconsole/src/app/layout/header/header.component.css index 4643182..042a528 100644 --- a/ogWebconsole/src/app/layout/header/header.component.css +++ b/ogWebconsole/src/app/layout/header/header.component.css @@ -1,6 +1,7 @@ mat-toolbar { /*height: 7vh;*/ - min-height: 60px; + min-height: 65px; + min-width: 375px; background-color: #3f51b5; color: white; } @@ -54,4 +55,29 @@ mat-toolbar { .hide-on-small { display: inline; } +} + +@media (max-width: 576px) { + .navbar-actions-row { + display: none; + } + + mat-toolbar { + display: flex; + justify-content: space-between; + } + + .isSmallScreenButtons { + display: flex; + justify-content: center; + align-items: center; + } + + .trace-button .mat-icon { + margin-right: 0px !important; + } + + .smallScreenMenubutton { + margin-right: 2vh; + } } \ No newline at end of file diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html index c650b7e..3413417 100644 --- a/ogWebconsole/src/app/layout/header/header.component.html +++ b/ogWebconsole/src/app/layout/header/header.component.html @@ -1,5 +1,6 @@ - + Opengnsys webconsole @@ -8,12 +9,14 @@ menu - + + + + + + \ No newline at end of file diff --git a/ogWebconsole/src/app/layout/header/header.component.ts b/ogWebconsole/src/app/layout/header/header.component.ts index e490528..212ef50 100644 --- a/ogWebconsole/src/app/layout/header/header.component.ts +++ b/ogWebconsole/src/app/layout/header/header.component.ts @@ -3,6 +3,7 @@ import { jwtDecode } from 'jwt-decode'; import { ChangePasswordModalComponent } from '../../components/admin/users/users/change-password-modal/change-password-modal.component'; import { MatDialog } from "@angular/material/dialog"; import { GlobalStatusComponent } from 'src/app/components/global-status/global-status.component'; +import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; @Component({ selector: 'app-header', @@ -12,6 +13,7 @@ import { GlobalStatusComponent } from 'src/app/components/global-status/global-s export class HeaderComponent implements OnInit { isSuperAdmin: boolean = false; + isSmallScreen: boolean = false; @Output() toggleSidebar = new EventEmitter(); private decodedToken: any; @@ -21,7 +23,7 @@ export class HeaderComponent implements OnInit { this.toggleSidebar.emit(); } - constructor(public dialog: MatDialog) { } + constructor(public dialog: MatDialog, private breakpointObserver: BreakpointObserver) { } ngOnInit(): void { const token = localStorage.getItem('loginToken'); @@ -35,6 +37,9 @@ export class HeaderComponent implements OnInit { console.error('Error decoding JWT:', error); } } + this.breakpointObserver.observe(['(max-width: 576px)']).subscribe((result) => { + this.isSmallScreen = result.matches; + }) } ngDoCheck(): void {