From c468e25ef0d4daf46f034bb0a1906f8f7c3972ab Mon Sep 17 00:00:00 2001
From: JuanSanhueza <juan.sanhueza@valposystems.com>
Date: Tue, 29 Apr 2025 12:22:22 -0400
Subject: [PATCH] navbar con titulo responsivo

---
 .../components/navbar/navbar.component.html   |  5 +---
 .../components/navbar/navbar.component.scss   | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index bcefa32..5865d66 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,16 +1,13 @@
 <div class="navbar-container">
-  <!-- Left navbar section with menu toggle -->
   <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>
 
-  <!-- Right navbar section with user info -->
   <div class="navbar-right">
     <span class="user-name">Luis Muñoz</span>
-    <button pButton icon="pi pi-sign-out" class="p-button-text p-button-rounded logout-button">
-    </button>
+    <button pButton icon="pi pi-sign-out" class="p-button-text p-button-rounded logout-button"></button>
   </div>
 </div>
 
diff --git a/src/app/components/navbar/navbar.component.scss b/src/app/components/navbar/navbar.component.scss
index 63d1a0e..2e255d3 100644
--- a/src/app/components/navbar/navbar.component.scss
+++ b/src/app/components/navbar/navbar.component.scss
@@ -89,4 +89,31 @@
     .p-button-icon {
       font-size: 1rem;
     }
+  }
+
+  /* Responsive para contraer navbar en md y sm */
+@media (max-width: 991.98px) {
+  /* .navbar-left, */
+  .navbar-right {
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
+
+  .navbar-right {
+    justify-content: flex-end;
+  }
+
+  .app-title {
+    width: 208px;
+    max-width: 100%;
+    white-space: normal;
+  }
+}
+
+/* Responsive para ocultar título para resoluciones sm */
+  @media (max-width: 767.98px) {
+    .app-title {
+      display: none;
+    }
   }
\ No newline at end of file