SistemaIntegralRecursosHumanos/vacaciones/src/app/components/mco/mco.component.html

<!-- <mat-sidenav-container
  class="example-container"
  hasBackdrop="true"
  (window:resize)="onResize($event)"
  *ngIf="!pantallaGrande"
>
  <mat-sidenav #sidenav mode="push">
    <div id="colorApp1" [class]="empresa" class="side-encabezado primary">
      <div class="user-view">
        <img [src]="imagenLogo()" alt="" width="270" />
        <div>
          <span class="nombre-menu">{{ usuario_session.NOMBRE }}</span>
          <br />
          <span class="rol-menu">{{ perfil }}</span>
        </div>
      </div>
     
    </div>
    <ul id="slide-out" class="sidenav" *ngIf="isLoggedIn">
      <li>
        <a [routerLink]="['/admin/mesmpr']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>home</mat-icon>Inicio</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmsv']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>calendar_month</mat-icon>Solicitud de
          vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmav']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>event_available</mat-icon>Aprobación de
          vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmhs']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>history</mat-icon>Historial de solicitudes</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmcv']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>event_busy</mat-icon>Cancelación de vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmre']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>receipt_long</mat-icon>Reportes</a
        >
      </li>

      <li>
        <a [routerLink]="['/admin/mesmcc']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>lock</mat-icon>Cambio de contraseña</a
        >
      </li>
      <mat-divider></mat-divider>
      <mat-accordion>
        <mat-expansion-panel [disabled]="menuMCO">
          <mat-expansion-panel-header>
            <mat-panel-title> Menú de configuración </mat-panel-title>
          </mat-expansion-panel-header>
          <li>
            <a  href="http://localhost:4200/#/admin/mesmav"
              ><mat-icon matSuffix>group</mat-icon>Administración de usuarios</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomor']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>account_tree</mat-icon>Organigrama</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcompv']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>settings</mat-icon>Política de Vacaciones</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomdf']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>celebration</mat-icon>Días Feriados</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomap']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>account_circle</mat-icon>Administración de
              Perfiles</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomba']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>vpn_key</mat-icon>Bitácora de acceso</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomun']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>business</mat-icon>Unidades de negocio</a
            >
          </li>
        </mat-expansion-panel>
      </mat-accordion>
    </ul>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar style="position: fixed; z-index: 10000">
      <mat-toolbar-row id="colorApp2" [class]="empresa" class="nav primary" >
        <button
          *ngIf="isLoggedIn"
          mat-icon-button
          id="colorAppText1"
          [class]="'text-'+empresa"
          style="background-color: white;"
          (click)="sidenav.toggle()"
        >
          <mat-icon>menu</mat-icon>
        </button>
        <span class="ml-5 mr-5" style="color: white"></span>
        <app-toolbar></app-toolbar>
        <span class="example-spacer"></span>
        <button
          *ngIf="isLoggedIn"
          mat-icon-button
          id="colorAppText2"
          [class]="'example-icon favorite-icon text-'+empresa"
          matTooltip="Cerrar Sesión"
          (click)="logout()"
          style="background-color: white;"
        >
          <mat-icon style="font-size: 15pt">logout</mat-icon>
        </button>
      </mat-toolbar-row>
    </mat-toolbar>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </mat-sidenav-content>
</mat-sidenav-container> -->

<mat-drawer-container
  class="example-container"
  (window:resize)="onResize($event)"
>
  <mat-drawer mode="side"  [opened]="pantallaGrande" *ngIf="isLoggedIn">
    <div id="colorApp4" [class]="empresa" class="side-encabezado primary">
      <div class="user-view">
        <img [src]="imagenLogo()" alt="" width="270" />
        <div>
          <span class="nombre-menu">{{ usuario_session.NOMBRE }}</span>
          <br />
          <span class="rol-menu">{{ perfil }}</span>
        </div>
      </div>
      <div></div>
    </div>
    <ul id="slide-out" class="sidenav">
      <li>
        <a [routerLink]="['/admin/mesmpr']" (click)="smallMenu()"
          ><mat-icon matSuffix>home</mat-icon>Inicio</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmsv']" (click)="smallMenu()"
          ><mat-icon matSuffix>calendar_month</mat-icon>Solicitud de
          vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmav']" (click)="smallMenu()"
          ><mat-icon matSuffix>event_available</mat-icon>Aprobación de
          vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmhs']" (click)="smallMenu()"
          ><mat-icon matSuffix>history</mat-icon>Historial de solicitudes</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmcv']" (click)="smallMenu()"
          ><mat-icon matSuffix>event_busy</mat-icon>Cancelación de vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmre']" (click)="smallMenu()"
          ><mat-icon matSuffix>receipt_long</mat-icon>Reportes</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmcc']" (click)="smallMenu()"
          ><mat-icon matSuffix>lock</mat-icon>Cambio de contraseña</a
        >
      </li>
      <mat-divider></mat-divider>
      <mat-accordion>
        <mat-expansion-panel [disabled]="menuMCO">
          <mat-expansion-panel-header>
            <mat-panel-title> Menú de configuración </mat-panel-title>
          </mat-expansion-panel-header>
          <li>
            <a [routerLink]="['/admin/mcomau']" (click)="smallMenu()"
              ><mat-icon matSuffix>group</mat-icon>Administración de usuarios</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomor']" (click)="smallMenu()"
              ><mat-icon matSuffix>account_tree</mat-icon>Organigrama</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcompv']" (click)="smallMenu()"
              ><mat-icon matSuffix>settings</mat-icon>Política de Vacaciones</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomdf']" (click)="smallMenu()"
              ><mat-icon matSuffix>celebration</mat-icon>Días Feriados</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomap']" (click)="smallMenu()"
              ><mat-icon matSuffix>account_circle</mat-icon>Administración de
              Perfiles</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomba']" (click)="smallMenu()"
              ><mat-icon matSuffix>vpn_key</mat-icon>Bitácora de acceso</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomun']" (click)="smallMenu()"
              ><mat-icon matSuffix>business</mat-icon>Unidades de negocio</a
            >
          </li>
        </mat-expansion-panel>
      </mat-accordion>
    </ul>
  </mat-drawer>
  <mat-drawer-content>
    <mat-toolbar style="position: absolute; z-index: 10000">
      <mat-toolbar-row id="colorApp5" [class]="empresa" class="nav primary">
        <button
          *ngIf="isLoggedIn && auxCont"
          mat-icon-button
          id="colorAppText1"
          [class]="'text-'+empresa"
          style="background-color: white;"
          (click)="smallMenu()"
        >
          <mat-icon>menu</mat-icon>
        </button>
        <span class="ml-5 mr-5" style="color: white" *ngIf="auxCont"></span>
        <app-toolbar></app-toolbar>
        <span class="example-spacer-2"></span>
        <button
          *ngIf="isLoggedIn"
          mat-icon-button
          id="colorAppText3"
          [class]="'example-icon favorite-icon text-'+empresa"
          matTooltip="Cerrar Sesión"
          (click)="logout()"
          style="background-color: white;"
        >
          <mat-icon style="font-size: 15pt">logout</mat-icon>
        </button>
      </mat-toolbar-row>
    </mat-toolbar>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </mat-drawer-content>
</mat-drawer-container>



<!-- <mat-sidenav-container
  class="example-container"
  hasBackdrop="true"
  (window:resize)="onResize($event)"
  *ngIf="!pantallaGrande"
>
  <mat-sidenav #sidenav mode="push">
    <div id="colorApp1" [class]="empresa" class="side-encabezado primary">
      <div class="user-view">
        <img [src]="imagenLogo()" alt="" width="270" />
        <div>
          <span class="nombre-menu">{{ usuario_session.NOMBRE }}</span>
          <br />
          <span class="rol-menu">{{ perfil }}</span>
        </div>
      </div>
     
    </div>
    <ul id="slide-out" class="sidenav" *ngIf="isLoggedIn">
      <li>
        <a [routerLink]="['/admin/mesmpr']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>home</mat-icon>Inicio</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmsv']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>calendar_month</mat-icon>Solicitud de
          vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmav']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>event_available</mat-icon>Aprobación de
          vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmhs']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>history</mat-icon>Historial de solicitudes</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmcv']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>event_busy</mat-icon>Cancelación de vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmre']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>receipt_long</mat-icon>Reportes</a
        >
      </li>

      <li>
        <a [routerLink]="['/admin/mesmcc']" (click)="sidenav.toggle()"
          ><mat-icon matSuffix>lock</mat-icon>Cambio de contraseña</a
        >
      </li>
      <mat-divider></mat-divider>
      <mat-accordion>
        <mat-expansion-panel [disabled]="menuMCO">
          <mat-expansion-panel-header>
            <mat-panel-title> Menú de configuración </mat-panel-title>
          </mat-expansion-panel-header>
          <li>
            <a  href="http://localhost:4200/#/admin/mesmav"
              ><mat-icon matSuffix>group</mat-icon>Administración de usuarios</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomor']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>account_tree</mat-icon>Organigrama</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcompv']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>settings</mat-icon>Política de Vacaciones</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomdf']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>celebration</mat-icon>Días Feriados</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomap']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>account_circle</mat-icon>Administración de
              Perfiles</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomba']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>vpn_key</mat-icon>Bitácora de acceso</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomun']" (click)="sidenav.toggle()"
              ><mat-icon matSuffix>business</mat-icon>Unidades de negocio</a
            >
          </li>
        </mat-expansion-panel>
      </mat-accordion>
    </ul>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar style="position: fixed; z-index: 10000">
      <mat-toolbar-row id="colorApp2" [class]="empresa" class="nav primary" >
        <button
          *ngIf="isLoggedIn"
          mat-icon-button
          id="colorAppText1"
          [class]="'text-'+empresa"
          style="background-color: white;"
          (click)="sidenav.toggle()"
        >
          <mat-icon>menu</mat-icon>
        </button>
        <span class="ml-5 mr-5" style="color: white"></span>
        <app-toolbar></app-toolbar>
        <span class="example-spacer"></span>
        <button
          *ngIf="isLoggedIn"
          mat-icon-button
          id="colorAppText2"
          [class]="'example-icon favorite-icon text-'+empresa"
          matTooltip="Cerrar Sesión"
          (click)="logout()"
          style="background-color: white;"
        >
          <mat-icon style="font-size: 15pt">logout</mat-icon>
        </button>
      </mat-toolbar-row>
    </mat-toolbar>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </mat-sidenav-content>
</mat-sidenav-container>

<mat-drawer-container
  class="example-container"
  (window:resize)="onResize($event)"
  *ngIf="pantallaGrande"
>
  <mat-drawer mode="side" opened *ngIf="isLoggedIn">
    <div id="colorApp4" [class]="empresa" class="side-encabezado primary">
      <div class="user-view">
        <img [src]="imagenLogo()" alt="" width="270" />
        <div>
          <span class="nombre-menu">{{ usuario_session.NOMBRE }}</span>
          <br />
          <span class="rol-menu">{{ perfil }}</span>
        </div>
      </div>
      <div></div>
    </div>
    <ul id="slide-out" class="sidenav">
      <li>
        <a [routerLink]="['/admin/mesmpr']"
          ><mat-icon matSuffix>home</mat-icon>Inicio</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmsv']"
          ><mat-icon matSuffix>calendar_month</mat-icon>Solicitud de
          vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmav']"
          ><mat-icon matSuffix>event_available</mat-icon>Aprobación de
          vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmhs']"
          ><mat-icon matSuffix>history</mat-icon>Historial de solicitudes</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmcv']"
          ><mat-icon matSuffix>event_busy</mat-icon>Cancelación de vacaciones</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmre']"
          ><mat-icon matSuffix>receipt_long</mat-icon>Reportes</a
        >
      </li>
      <li>
        <a [routerLink]="['/admin/mesmcc']"
          ><mat-icon matSuffix>lock</mat-icon>Cambio de contraseña</a
        >
      </li>
      <mat-divider></mat-divider>
      <mat-accordion>
        <mat-expansion-panel [disabled]="menuMCO">
          <mat-expansion-panel-header>
            <mat-panel-title> Menú de configuración </mat-panel-title>
          </mat-expansion-panel-header>
          <li>
            <a [routerLink]="['/admin/mcomau']"
              ><mat-icon matSuffix>group</mat-icon>Administración de usuarios</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomor']"
              ><mat-icon matSuffix>account_tree</mat-icon>Organigrama</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcompv']"
              ><mat-icon matSuffix>settings</mat-icon>Política de Vacaciones</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomdf']"
              ><mat-icon matSuffix>celebration</mat-icon>Días Feriados</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomap']"
              ><mat-icon matSuffix>account_circle</mat-icon>Administración de
              Perfiles</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomba']"
              ><mat-icon matSuffix>vpn_key</mat-icon>Bitácora de acceso</a
            >
          </li>
          <li>
            <a [routerLink]="['/admin/mcomun']"
              ><mat-icon matSuffix>business</mat-icon>Unidades de negocio</a
            >
          </li>
        </mat-expansion-panel>
      </mat-accordion>
    </ul>
  </mat-drawer>
  <mat-drawer-content>
    <mat-toolbar style="position: absolute; z-index: 10000">
      <mat-toolbar-row id="colorApp5" [class]="empresa" class="nav primary">
        <app-toolbar></app-toolbar>
        <span class="example-spacer-2"></span>
        <button
          *ngIf="isLoggedIn"
          mat-icon-button
          id="colorAppText3"
          [class]="'example-icon favorite-icon text-'+empresa"
          matTooltip="Cerrar Sesión"
          (click)="logout()"
          style="background-color: white;"
        >
          <mat-icon style="font-size: 15pt">logout</mat-icon>
        </button>
      </mat-toolbar-row>
    </mat-toolbar>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
  </mat-drawer-content>
</mat-drawer-container>
 -->