refs #1791 Refactor layout components for improved sidebar behavior and responsiveness

2025-04-02 14:06:03 +02:00 · 2025-04-02 14:06:03 +02:00 · b5a6bb0559
parent 5baf4d8e3d
commit b5a6bb0559
9 changed files with 83 additions and 31 deletions
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@ -457,3 +457,4 @@ mat-button-toggle-group {
  width: 100%;
  box-sizing: border-box;
 }
+
--- a/ogWebconsole/src/app/layout/header/header.component.css
+++ b/ogWebconsole/src/app/layout/header/header.component.css
@ -45,3 +45,13 @@ mat-toolbar {
  background-color: #ced0df;
  cursor: not-allowed;
 }
+
+.hide-on-small {
+  display: none;
+}
+
+@media (min-width: 1328px) {
+  .hide-on-small {
+    display: inline;
+  }
+}
--- a/ogWebconsole/src/app/layout/header/header.component.html
+++ b/ogWebconsole/src/app/layout/header/header.component.html
@ -1,5 +1,5 @@
 <mat-toolbar>
-  <span class="navbar-title" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
+  <span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
    Opengnsys webconsole
  </span>

--- a/ogWebconsole/src/app/layout/header/header.component.ts
+++ b/ogWebconsole/src/app/layout/header/header.component.ts
@ -52,8 +52,6 @@ export class HeaderComponent implements OnInit {
    this.dialog.open(GlobalStatusComponent, {
      width: '45vw',
      height: '80vh', 
-      // maxWidth: '60vw', 
-      // maxHeight: '60vh'
    })
  }
 }
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
@ -6,5 +6,4 @@
 .sidebar {
  width: 15vw;
  min-width: 250px;
-  z-index: auto !important;
-}
+}
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.html
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.html
@ -1,11 +1,12 @@
 <app-header (toggleSidebar)="toggleSidebar()"></app-header>

 <mat-drawer-container class="container" autosize>
-  <mat-drawer class="sidebar" mode="side" [opened]="isSidebarVisible">
-    <app-sidebar></app-sidebar>
+  <mat-drawer class="sidebar" [mode]="sidebarMode" [opened]="isSidebarVisible" (close)="isSidebarVisible = false">
+    <app-sidebar [isVisible]="isSidebarVisible" [sidebarMode]="sidebarMode" (closeSidebar)="isSidebarVisible = false">
+    </app-sidebar>
  </mat-drawer>

  <mat-drawer-content class="content">
    <router-outlet></router-outlet>
  </mat-drawer-content>
-</mat-drawer-container>
+</mat-drawer-container>
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
@ -1,14 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-main-layout',
  templateUrl: './main-layout.component.html',
  styleUrls: ['./main-layout.component.css'],
 })
-export class MainLayoutComponent {
+export class MainLayoutComponent implements OnInit {
  isSidebarVisible: boolean = true;
+  sidebarMode: 'side' | 'over' = 'side';
+
+  constructor(private breakpointObserver: BreakpointObserver) { }
+
+  ngOnInit(): void {
+    this.breakpointObserver.observe(['(max-width: 1328px)']).subscribe((result) => {
+      if (result.matches) {
+        this.sidebarMode = 'over';
+        this.isSidebarVisible = false;
+      } else {
+        this.sidebarMode = 'side';
+        this.isSidebarVisible = true;
+      }
+    });
+  }

  toggleSidebar() {
    this.isSidebarVisible = !this.isSidebarVisible;
  }
-}
+}
--- a/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
+++ b/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
@ -7,14 +7,16 @@

  <mat-divider></mat-divider>

-  <mat-list-item routerLink="/groups" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/groups" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}"
+    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">apartment</mat-icon>
      <span>{{ 'groups' | translate }}</span>
    </span>
  </mat-list-item>

-  <mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}"
+    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">playlist_play</mat-icon>
      <span>{{ 'actions' | translate }}</span>
@ -23,19 +25,22 @@

  <!-- Submenu items for commands -->
  <mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/commands" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}"
+      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">chevron_right</mat-icon>
        <span>{{ 'commands' | translate }}</span>
      </span>
    </mat-list-item>
-    <mat-list-item routerLink="/commands-groups" matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands-groups" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">chevron_right</mat-icon>
        <span>{{ 'commandGroups' | translate }}</span>
      </span>
    </mat-list-item>
-    <mat-list-item routerLink="/commands-task" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands-task" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}"
+      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">chevron_right</mat-icon>
        <span>{{ 'tasks' | translate }}</span>
@ -43,14 +48,16 @@
    </mat-list-item>
  </mat-nav-list>

-  <mat-list-item routerLink="/subnets" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/subnets" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}"
+    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">lan</mat-icon>
      <span> {{ 'subnets' | translate }}</span>
    </span>
  </mat-list-item>

-  <mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}"
+    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">desktop_windows</mat-icon>
      <span>{{ 'boot' | translate }}</span>
@ -59,19 +66,22 @@

  <!-- Submenu items for Boot -->
  <mat-nav-list *ngIf="showOgBootSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/pxe-images" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe-images" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}"
+      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">album</mat-icon>
        <span>{{ 'ogLive' | translate }}</span>
      </span>
    </mat-list-item>
-    <mat-list-item routerLink="/pxe" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}"
+      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">assignment</mat-icon>
        <span>{{ 'pxeTemplates' | translate }}</span>
      </span>
    </mat-list-item>
-    <mat-list-item routerLink="/pxe-boot-file" matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe-boot-file" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">save</mat-icon>
        <span>{{ 'pxeBootFiles' | translate }}</span>
@ -79,14 +89,16 @@
    </mat-list-item>
  </mat-nav-list>

-  <mat-list-item routerLink="/calendars" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/calendars" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}"
+    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">calendar_month</mat-icon>
      <span>{{ 'calendars' | translate }}</span>
    </span>
  </mat-list-item>

-  <mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}"
+    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">terminal</mat-icon>
      <span>{{ 'software' | translate }}</span>
@ -95,19 +107,22 @@

  <!-- Submenu items for Software -->
  <mat-nav-list *ngIf="showSoftwareSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/software" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/software" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}"
+      matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">list</mat-icon>
        <span>{{ 'softwareList' | translate }}</span>
      </span>
    </mat-list-item>
-    <mat-list-item routerLink="/software-profiles" matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/software-profiles" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">folder_shared</mat-icon>
        <span>{{ 'softwareProfiles' | translate }}</span>
      </span>
    </mat-list-item>
-    <mat-list-item routerLink="/operative-systems" matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/operative-systems" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
      <span class="entry">
        <mat-icon class="icon">terminal</mat-icon>
        <span>{{ 'operativeSystems' | translate }}</span>
@ -115,17 +130,19 @@
    </mat-list-item>
  </mat-nav-list>

-  <mat-list-item routerLink="/repositories" matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/repositories" (click)="onItemClick()"
+    matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">warehouse</mat-icon>
      <span>{{ 'repositories' | translate }}</span>
    </span>
  </mat-list-item>

-  <mat-list-item routerLink="/menus" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/menus" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}"
+    matTooltipShowDelay="1000">
    <span class="entry">
      <mat-icon class="icon">list</mat-icon>
      <span>{{ 'menus' | translate }}</span>
    </span>
  </mat-list-item>
-</mat-nav-list>
+</mat-nav-list>
--- a/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
+++ b/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { jwtDecode } from 'jwt-decode';
 import { MatDialog } from '@angular/material/dialog';
+
@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
@ -8,6 +9,9 @@ import { MatDialog } from '@angular/material/dialog';
 })
 export class SidebarComponent {
  @Input() isVisible: boolean = false;
+  @Input() sidebarMode: 'side' | 'over' = 'side';
+  @Output() closeSidebar: EventEmitter<void> = new EventEmitter<void>();
+
  isSuperAdmin: boolean = false;
  username: string = "";
  decodedToken: any = "";
@ -29,6 +33,12 @@ export class SidebarComponent {
    this.showSoftwareSub = !this.showSoftwareSub;
  }

+  onItemClick() {
+    if (this.isVisible && this.sidebarMode === 'over') {
+      this.closeSidebar.emit();
+    }
+  }
+
  constructor(public dialog: MatDialog) {}

  ngOnInit(): void {
@ -44,4 +54,4 @@ export class SidebarComponent {
      }
    }
  }
-}
+}