<div class="navbar-container">
  <div class="navbar-left">
    <button pButton icon="pi pi-bars" class="p-button-text p-button-rounded sidebar-toggle"
      (click)="toggleSidebar()"></button>
    <span class="app-title">Administrador de Cronogramas</span>
  </div>
  <ul class="navbar-nav ml-auto">

    <div style="flex-grow: 1; text-align: center;">
      <img src="/img/teclado1.png" alt="Logo" style="width: 90% !important;height: 50px !important; opacity: 0.8; ">
    </div>

  </ul>
  <div class="navbar-right">
    <span class="user-name">{{ userName }}</span>
    <button pButton icon="pi pi-sign-out" class="p-button-text p-button-rounded logout-button"
      (click)="confirmarAccion()"></button>
  </div>
</div>

<!-- Page title and breadcrumb -->
<div class="page-header">
  <div class="page-title tituloNavbar">{{ pageTitle }}</div>
  <div class="breadcrumb-container">
    <a routerLink="/inicio" class="breadcrumb-link">Inicio</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">{{ pageTitle }}</span>
  </div>
</div>

<!-- Componentes para mensajes y diálogos -->
<p-toast></p-toast>
<p-confirmDialog [style]="{width: '450px'}"></p-confirmDialog>
