Modicaciones de template

sistema-mantenimiento-front/src/app/components/template/template.component.css

@@ -1,11 +1,7 @@
 /*MENU*/
-.example-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #eee;
+
+.example-spacer {
+  flex: 1 1 auto;
 }
 
 .example-container {
@@ -15,7 +11,6 @@
 
 /*Tamaño del contenedor del sidenav*/
 .sidenav-content {
-  height: 100%;
   width: 100%;
   padding-top: 60px;
   padding-bottom: 60px;
@@ -26,15 +21,13 @@
 
 /*Tamaño del menu desplegable*/
 .example-sidenav {
-  padding: 55px;
+  padding: 0 55px 0 55px;
   background-color: #7c8cf4;
   border-color: #7c8cf4;
 }
 
 mat-toolbar-row {
   background-color: #7c8cf4;
-  position: fixed;
-  z-index: 10000;
 }
 
 .botonMenu {
@@ -54,6 +47,13 @@ mat-toolbar-row {
   box-shadow: none !important;
 }
 
+footer {
+  background-color: #7c8cf4;
+  width: 100%;
+  text-align: center;
+  color: black;
+}
+
 /* Works on Chrome, Edge, and Safari */
 ::-webkit-scrollbar {
   width: 12px;

sistema-mantenimiento-front/src/app/components/template/template.component.html

@@ -1,16 +1,17 @@
-<mat-toolbar>
+<mat-toolbar style="height: 5vh;" (window:resize)="onResize($event)">
     <mat-toolbar-row>
         <button type="button" mat-button (click)="drawer.toggle()">
             <mat-icon style="color: white">menu</mat-icon>
         </button>
-        <span style="color: white"> Sistema de Apoyo al Mantenimiento - SAM </span>
-        <button mat-button style="color: white; margin-left: 1300px;" (click)="logout()">
+        <span style="color: white"> <span *ngIf="screen_small">Sistema de Apoyo al Mantenimiento - </span>SAM</span>
+        <span class="example-spacer"></span>
+        <button mat-button style="color: white;" (click)="logout()">
             <mat-icon>logout</mat-icon> Cerra Sesión
         </button>
     </mat-toolbar-row>
 </mat-toolbar>
 
-<mat-drawer-container class="example-container" autosize>
+<mat-drawer-container class="example-container" style="height: 90vh;" autosize >
     <mat-drawer #drawer class="example-sidenav" mode="side">
         <div>
             <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
@@ -327,6 +328,11 @@
                         <mat-icon>sticky_note_2</mat-icon> Gestión de formularios
                     </a>
                 </div>
+                <div class="divBotones">
+                    <button mat-button style="color: white" [routerLink]="['/sam/getbtb']">
+                        <mat-icon>table_chart</mat-icon> Gestión de tablas
+                    </button>
+                </div>
                 <div class="divBotones">
                     <a mat-button style="color: white" [routerLink]="['/sam/getbre']">
                         <mat-icon>account_tree</mat-icon> Gestión de relaciones
@@ -334,9 +340,36 @@
                 </div>
             </mat-expansion-panel>
         </div>
+        <div>
+            <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"
+                class="mat-expansion-panel ng-tns-c191-1 ng-star-inserted mat-expanded">
+                <mat-expansion-panel-header>
+                    <mat-panel-title style="color: white">
+                        Plantillas Test
+                    </mat-panel-title>
+                    <mat-panel-description>
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+                <div class="divBotones">
+                    <button mat-button style="color: white" [routerLink]="['template-menu']"> 
+                        <mat-icon>dashboard</mat-icon> Menú
+                    </button>
+                </div>
+                <div class="divBotones">
+                    <button mat-button style="color: white">
+                        <mat-icon>table_chart</mat-icon> Consulta tablas
+                    </button>
+                </div>
+                <div class="divBotones">
+                    <button mat-button style="color: white">
+                        <mat-icon>sticky_note_2</mat-icon> Formulario
+                    </button>
+                </div>
+            </mat-expansion-panel>
+        </div>
     </mat-drawer>
-    <div class="sidenav-content">
+    <div  style="background-color: white; height: 100%;">
         <router-outlet></router-outlet>
     </div>
 </mat-drawer-container>
-<footer></footer>
+<footer style="height: 5vh;"></footer>

sistema-mantenimiento-front/src/app/components/template/template.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { LoginDataService } from 'src/app/services/login/login-data.service';
@@ -8,9 +8,10 @@ import { LoginDataService } from 'src/app/services/login/login-data.service';
   templateUrl: './template.component.html',
   styleUrls: ['./template.component.css']
 })
-export class TemplateComponent implements AfterViewInit {
+export class TemplateComponent implements OnInit {
   showFiller = false;
   panelOpenState = false;
+  public screen_small = false;
 
   constructor(
     private router: Router,
@@ -18,7 +19,23 @@ export class TemplateComponent implements AfterViewInit {
   ) {
    }
 
-  ngAfterViewInit(): void { }
+  ngOnInit(): void {
+    if (window.innerWidth <= 616) {
+      this.screen_small = false;
+    }else if(window.innerWidth > 616){
+      this.screen_small = true;
+    }
+   }
+
+  public onResize(event: any) {
+    if (event.target.innerWidth <= 616) {
+      this.screen_small = false;
+    }else if(event.target.innerWidth > 616){
+      this.screen_small = true;
+    }
+
+
+  }
 
   openViewProfilesAdmin() {
     this.router.navigate([