lxluxo23/sacg-cronogramas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar con titulo responsivo

Browse Source
This commit is contained in:
JuanSanhueza 2025-04-29 12:22:22 -04:00
parent cb72d48acd
commit c468e25ef0
2 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/navbar/navbar.component.html
View File

@ -1,16 +1,13 @@
<div class="navbar-container"> <div class="navbar-container">
<!-- Left navbar section with menu toggle -->
<div class="navbar-left"> <div class="navbar-left">
<button pButton icon="pi pi-bars" class="p-button-text p-button-rounded sidebar-toggle" <button pButton icon="pi pi-bars" class="p-button-text p-button-rounded sidebar-toggle"
(click)="toggleSidebar()"></button> (click)="toggleSidebar()"></button>
<span class="app-title">Administrador de Cronogramas</span> <span class="app-title">Administrador de Cronogramas</span>
</div> </div>
<!-- Right navbar section with user info -->
<div class="navbar-right"> <div class="navbar-right">
<span class="user-name">Luis Muñoz</span> <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 pButton icon="pi pi-sign-out" class="p-button-text p-button-rounded logout-button"></button>
</button>
</div> </div>
</div> </div>

27
src/app/components/navbar/navbar.component.scss
View File

@ -90,3 +90,30 @@
font-size: 1rem; 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;
}
}