keevo-components 1.8.495 → 1.8.496

package/src/lib/components/kv-layout/layout/kv-layout.component.html

@@ -1,246 +1,244 @@
-<div class="flex flex-row full-container">
-  @if(showMenu) {
-    <p-sidebar
-      #sidebarRef
-      [visible]="true"
-      [showCloseIcon]="false"
-      [modal]="false"
-      [style]="{ width: expandMenu() ? '17rem' : '3.65rem' }"
-      styleClass="transition-all"
-    >
-      <ng-template pTemplate="headless">
-        <div class="h-full flex flex-column overflow-hidden p-2">
-          
-          <!-- LOGO -->
-          <div class="flex-none flex flex-column gap-1 justify-content-between flex-shrink-0 overflow-hidden">
-            <div
-              class="flex {{
-                expandMenu() ? 'flex-row' : 'flex-column'
-              }} align-items-center {{
-                expandMenu()
-                  ? 'justify-content-between'
-                  : 'justify-content-center'
-              }} py-1"
-            >
-              <!-- Logo para o menu expandido -->
-              @if(expandMenu() && logoMenuExpand){
-                <img
-                  alt="Card"
-                  [src]="logoMenuExpand"
-                  [style.height]="'2.8rem'"
-                  width="auto"
-                  class="cursor-pointer p-0"
-                  (click)="navigateToDefaultRoute()"
-                />
-              }
-
-              <!-- Logo para o menu minimizado-->
-              @if(!expandMenu() && logoMenuHide){
-                <img
-                  alt="Card"
-                  [src]="logoMenuHide"
-                  [style.height]="'2.8rem'"
-                  width="auto"
-                  class=""
-                  (click)="navigateToDefaultRoute()"
-                />
-              }
+<div class="flex flex-row overflow-y-hidden w- full-container">
+  <div
+    [ngClass]="{ 'overlay-background': expandMenu() && widthPage() < 800 }"
+  ></div>
+  @if (showMenu) {
+  <div
+    [style]="{
+      minWidth: expandMenu() && widthPage() > 800 ? '17rem' : '3.65rem'
+    }"
+  ></div>
+  } @if(showMenu) {
+  <p-sidebar
+    #sidebarRef
+    [visible]="true"
+    [showCloseIcon]="false"
+    [modal]="false"
+    [style]="{ width: expandMenu() ? '17rem' : '3.65rem' }"
+    class="sidebar-animation"
+    styleClass="transition-all"
+  >
+    <ng-template pTemplate="headless">
+      <div class="flex flex-column overflow-hidden">
+        <div
+          class="flex flex-column gap-2 justify-content-between flex-shrink-0 mx-2 overflow-hidden"
+        >
+          <div
+            class="flex {{
+              expandMenu() ? 'flex-row' : 'flex-column'
+            }} align-items-center {{
+              expandMenu()
+                ? 'justify-content-between'
+                : 'justify-content-center'
+            }} py-3"
+          >
+            <!-- Logo para o menu expandido -->
+            <img
+              *ngIf="expandMenu() && logoMenuExpand"
+              alt="Card"
+              [src]="logoMenuExpand"
+              [style.height]="'3rem'"
+              width="auto"
+              class="cursor-pointer p-1"
+              (click)="navigateToDefaultRoute()"
+            />
 
-              <!-- Toggle menu -->
-              @if(showExpandMenu){
-                <kv-icon
-                  icon="menu-2"
-                  [clickable]="true"
-                  [pTooltip]="expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'"
-                  [tooltipPosition]="'right'"
-                  (onClick)="toggleMenu()"
-                />
-              }
-            </div>
+            <!-- Logo para o menu minimizado-->
+            <img
+              *ngIf="!expandMenu() && logoMenuHide"
+              alt="Card"
+              [src]="logoMenuHide"
+              [style.height]="'3rem'"
+              width="auto"
+              class="mb-2 p-1"
+              (click)="navigateToDefaultRoute()"
+            />
 
-            @if(showTrocaEmpresa){
-              <div
-                class="flex flex-row align-items-center justify-content-{{expandMenu()? 'between px-2': 'center'}}"
-                (click)="changeEmpresa($event)"
-              >
-                @if(expandMenu() && selectedEmpresa){
-                  <div
-                    class="flex flex-column "
-                    (click)="changeEmpresa($event)"
-                  >
-                    @if(this.selectedEmpresa.razaosocial){
-                      <span
-                        class="text-sm font-semibold mr-2"
-                        [pTooltip]="this.selectedEmpresa.razaosocial"
-                        [tooltipPosition]="'right'"
-                      >
-                        {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
-                      </span>
-                    }
-                    @if(this.selectedEmpresa.cpfcnpj){
-                      <span class="text-sm mt-1">{{
-                        this.selectedEmpresa.cpfcnpj | cpfCnpj
-                      }}</span>
-                    }
-                  </div>
-                  
-                }
-                <kv-icon
-                  icon="transfer"
-                  [clickable]="true"
-                  [pTooltip]="'Trocar de empresa'"
-                  [tooltipPosition]="'right'"
-                  (onClick)="changeEmpresa($event)"
-                  class=" side-menu-item py-1"
-                />
-              </div>
-            }
+            <!-- Toggle menu -->
+            <span
+              *ngIf="showExpandMenu"
+              class="material-symbols-outlined top-layout-icons p-1"
+              [pTooltip]="expandMenu() ? 'Ocultar Menu' : 'Expandir Menu'"
+              [tooltipPosition]="'right'"
+              (click)="toggleMenu()"
+            >
+              menu
+            </span>
           </div>
 
-          <p-divider type="solid"></p-divider>
-
-          <!-- MENUS -->
-          <div class="flex-1 list-none m-0 overflow-y-auto max-h-full">
-            <!-- menus -->
-            @for (menu of menus(); track $index) {
-              <li>
-                <!-- menu que não tem filho -->
-                  @if( !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)){
-                    <div
-                        class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
-                        [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
-                        (click)="callRoute(menu.link)"
-                      >
-                        <kv-icon
-                          [icon]="menu.icone|| 'circle-dotted'"
-                        />
-                        @if(expandMenu()){
-                          <label>{{menu.descricaomenu}}</label>
-                        }
-                    </div>
-                  }
-                <!-- menu com filho -->
-                  @if(menu.indmenupai){
-                    <div>
-                      <div
-                        class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
-                        [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
-                      >
-                        <kv-icon
-                          [icon]="menu.icone|| 'circle-dotted'"
-                          (click)="expandMenu()?'':filho.toggle($event)"
-                        />
-                        @if(expandMenu()){
-                          <label>{{menu.descricaomenu}}</label>
-                          <kv-icon
-                            #chevronIcon
-                            icon="chevron-right"
-                            (click)="filho.toggle($event)"
-                            [clickable]="true"
-                          />
-                        }
-                      </div>
-                      <div #appendMenuDiv class="appendMenuDiv"></div>
-                      
-                      <p-menu #filho [popup]="true" [model]="returnMenuChilds()(menu.idmenu)" [appendTo]="appendMenuDiv">
-                        <ng-template  pTemplate="submenuheader" let-item let-i="index">
-                          <label class="font-medium pl-3 text-xs">
-                            {{item.label}}
-                          </label>
-                            <div [style.height.rem]="0.5"></div>
-                        </ng-template>
-                        <ng-template pTemplate="item" let-item>
-                          <div 
-                            class=" side-menu-item py-2 pl-3 pr-1 text-sm"
-                            (click)="callRoute(item.url)"
-                            >
-                            {{item.label}}
-                          </div>
-                        </ng-template>
-                      </p-menu>
+          @if(showTrocaEmpresa){
+          <div
+            class="flex flex-row align-items-center {{
+              expandMenu()
+                ? 'justify-content-between'
+                : 'justify-content-center'
+            }}"
+          >
+            <div
+              class="flex flex-column cursor-pointer"
+              *ngIf="expandMenu() && selectedEmpresa"
+              (click)="changeEmpresa($event)"
+            >
+              <span
+                class="text-sm font-semibold mr-2"
+                [pTooltip]="this.selectedEmpresa.razaosocial"
+                [tooltipPosition]="'right'"
+              >
+                {{ nameEmpresa(this.selectedEmpresa.razaosocial) }}
+              </span>
+              <span class="text-sm mt-1">{{
+                this.selectedEmpresa.cpfcnpj | cpfCnpj
+              }}</span>
+            </div>
 
-                    </div>
-                  }
-              </li>
-            }
+            <button
+              pButton
+              class="p-button-rounded p-button-text padding-style h-2rem w-2rem hover:bg-green-600 hover:text-white icon-menu"
+              (click)="changeEmpresa($event)"
+              [pTooltip]="'Trocar de empresa'"
+              [tooltipPosition]="'right'"
+            >
+              <i class="material-symbols-outlined"> sync_alt </i>
+            </button>
           </div>
-
           <p-divider type="solid"></p-divider>
-          
-          <!-- APPS E SAIR -->
-          <div class="flex-none list-none m-0 overflow-y-auto max-h-full">
-            <li>
-              <div
-                class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
-                [pTooltip]="!expandMenu() ? 'Sistemas' : ''"
-                (click)="!expandMenu() && menusistemas.toggle($event)"
+          }
+        </div>
+
+        <div class="list-none m-0 card-container overflow-y-auto max-h-full">
+          <!-- menus -->
+          <li
+            *ngFor="let menu of menus; let i = index"
+            [class]="expandMenu() ? 'px-2' : 'px-1'"
+          >
+            <!-- menu que não tem filho -->
+            <a
+              (click)="callRoute(menu.link)"
+              *ngIf="
+                !menu.indmenupai && (!menu.idmenupai || menu.idmenupai == 0)
+              "
+              pRipple
+              [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
+              [tooltipPosition]="'right'"
+              class="menu-option"
+              [style.background-color]="menu.bgColor"
+              [class.justify-content-center]="!expandMenu()"
+            >
+              <i
+                class="content-option-menu material-symbols-outlined icon-menu {{
+                  expandMenu() ? 'ml-1 mr-2' : ''
+                }}  icon-hover-color {{ menu.textColor }}"
+                *ngIf="menu.icone"
               >
-                <kv-icon
-                  [icon]="'apps'"
-                />
-                @if(expandMenu()){
-                  <label>Sistemas</label>
-                  <kv-icon
-                    #chevronIcon
-                    icon="chevron-right"
-                    (click)="expandMenu() && menusistemas.toggle($event)"
-                    [clickable]="true"
-                  />
-                }
-              </div>
-              <div #sistemasmenughost class="appendMenuDiv"></div>
-              <p-menu #menusistemas [popup]="true" [model]="apps" [appendTo]="sistemasmenughost">
-                <ng-template  pTemplate="submenuheader">
-                  <label class="font-medium pl-3 text-xs">
-                    Sistemas
-                  </label>
-                  <div [style.height.rem]="0.5"></div>
-                </ng-template>
-                <ng-template pTemplate="item" let-item>
-                  <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 pl-3 pr-1"
-                  (click)="callRoute(item.rotapadrao)"
+                {{ menu.icone }}
+              </i>
+              <span
+                class="content-option-menu text-base text-blue-900 font-semibold {{
+                  menu.textColor
+                }}"
+                *ngIf="expandMenu()"
+                >{{ menu.descricaomenu }}</span
+              >
+            </a>
+            <!-- menu com filho -->
+            <div *ngIf="menu.indmenupai">
+              <a
+                pRipple
+                pStyleClass="@next"
+                enterClass="hidden"
+                enterActiveClass="slidedown"
+                leaveToClass="hidden"
+                leaveActiveClass="slideup"
+                [style.background-color]="
+                  isSelectedMenuPai(menu) ? 'rgb(41, 185, 45)' : 'white'
+                "
+                class="menu-option {{
+                  !expandMenu()
+                    ? 'justify-content-center'
+                    : 'justify-content-between'
+                }} "
+                [tooltipPosition]="'right'"
+                [pTooltip]="!expandMenu() ? menu.descricaomenu : ''"
+                (click)="
+                  expandMenu.set(!expandMenu() ? !expandMenu() : expandMenu())
+                "
+              >
+                <div class="flex flex-row align-items-center">
+                  <i
+                    class="content-option-menu material-symbols-outlined icon-menu {{
+                      expandMenu() ? 'ml-1 mr-2' : ''
+                    }} icon-hover-color"
+                    *ngIf="menu.icone"
+                    [class.text-white]="isSelectedMenuPai(menu)"
                   >
-                    <img
-                      [src]="item.urlicone"
-                      class="h-2 w-2 border-round-lg"
-                    />
-                    <div class="text-sm">
-                      {{item.nomeaplicativo}}
-                    </div>
-                  </div>
-                </ng-template>
-              </p-menu>
-            </li>
-            <li>
+                    {{ menu.icone }}
+                  </i>
+                  <span
+                    class="text-base text-blue-900 font-semibold content-option-menu"
+                    *ngIf="expandMenu()"
+                    >{{ menu.descricaomenu }}</span
+                  >
+                </div>
+                <span
+                  class="pi pi-chevron-down text-blue-900 mr-1 icon-hover-color content-option-menu"
+                  *ngIf="expandMenu()"
+                ></span>
+              </a>
+
+              <!-- filhos -->
               <div
-                class="flex flex-row align-items-center justify-content-{{expandMenu() ?'between':'center'}} gap-2 side-menu-item py-2"
-                [pTooltip]="!expandMenu() ? 'Sair' : ''"
-                [style.color]="'red'"
-                [style.opacity]="0.5"
-                (click)="logout($event)"
+                class="list-none py-0 pl-3 pr-0 m-0 {{
+                  !(
+                    menuSelecionado()?.idmenupai == menu.idmenu &&
+                    this.expandMenu()
+                  ) && 'hidden'
+                }} overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out"
               >
-                <kv-icon
-                  [icon]="'logout'"
-                  
-                />
-                @if(expandMenu()){
-                  <label>Sair</label>
-                }
+                <li
+                  *ngFor="
+                    let filho of returnMenuChild(menu.idmenu);
+                    let iFilho = index
+                  "
+                >
+                  <a
+                    *ngIf="expandMenu()"
+                    (click)="callRoute(filho.link)"
+                    pRipple
+                    class="menu-option"
+                    [style.background-color]="filho.bgColor"
+                  >
+                    <i
+                      class="content-option-menu material-symbols-outlined icon-menu {{
+                        expandMenu() ? 'ml-1 mr-2' : ''
+                      }} icon-hover-color"
+                      *ngIf="filho.icone"
+                    >
+                      {{ filho.icone }}
+                    </i>
+                    <span
+                      class="content-option-menu text-medium text-blue-900 ml-4 {{
+                        filho.textColor
+                      }}"
+                      *ngIf="expandMenu()"
+                      >{{ filho.descricaomenu }}</span
+                    >
+                  </a>
+                </li>
               </div>
-            </li>
-          </div>
+            </div>
+          </li>
         </div>
-      </ng-template>
-    </p-sidebar>
+      </div>
+    </ng-template>
+  </p-sidebar>
   }
 
-  <!-- SEÇÃO CONTEÚDO  -->
+  <!-- Topbar -->
   <div
     class="w-auto h-screen page-content overflow-y-hidden flex flex-column"
     id="page-content"
     style="width: 100vw !important"
   >
-    <!-- TOPO -->
     <div
       class="flex flex-row flex-wrap align-items-center justify-content-between my-2 mx-2 lg:mx-3 mb-0 gap-1"
     >
@@ -250,119 +248,154 @@
         <img [src]="logoMenuExpand" width="150" />
       </div>
       } @else {
-        <!-- Breadcrumbs -->
-        @if(showBreadcrumb) {
-          <div>
-            <p class="text-xl font-semibold system-color breadcrumb-title">
-              {{
-                breadCrumbItems[breadCrumbItems.length - 1] &&
-                breadCrumbItems[breadCrumbItems.length - 1].label
-                  ? breadCrumbItems[breadCrumbItems.length - 1].label
-                  : ""
-              }}
-            </p>
-            <p-breadcrumb
-              *ngIf="widthCard > 400"
-              styleClass="border-none p-0 flex align-items-center h-1rem bg-transparent"
-              [model]="breadCrumbItems"
-              [style]="{ backgroundColor: '#eaeaea' }"
-              (onItemClick)="callRoute($event.item.routerLink, true)"
-            ></p-breadcrumb>
-          </div>
+      <!-- Breadcrumbs -->
+      <div>
+        <p class="text-xl font-semibold text-blue-900 breadcrumb-title">
+          {{
+            breadCrumbItems[breadCrumbItems.length - 1] &&
+            breadCrumbItems[breadCrumbItems.length - 1].label
+              ? breadCrumbItems[breadCrumbItems.length - 1].label
+              : ""
+          }}
+        </p>
+        <p-breadcrumb
+          *ngIf="widthCard > 400"
+          styleClass="border-none p-0 flex align-items-center h-2rem !important;"
+          [model]="breadCrumbItems"
+          [style]="{ backgroundColor: '#eaeaea' }"
+          (onItemClick)="callRoute($event.item.routerLink, true)"
+        ></p-breadcrumb>
+      </div>
+      } @if (exibirNomes) { @if(widthCard >= 517) {
+      <div
+        class="w-auto flex flex-column justify-content-center align-items-center gap-2"
+      >
+        @if (masterName) { <span class="master-name">{{ masterName }}</span> }
+        @if (empresaName) {<span class="empresa-name"
+          >Organização: {{ empresaName }}</span
+        >
         }
-        @else {
-          <!-- GHOST DIV PARA OCPUAR ESPAÇO NO SPACE BETWEEN -->
-          <div></div>
+      </div>
+
+      <div
+        class="w-auto flex flex-row justify-content-center align-items-center gap-2"
+      >
+        <!-- Navegação de sistemas e usuários -->
+        @for (topAction of topMenuActions(); track $index) {
+        <ng-container *ngTemplateOutlet="topAction" />
         }
-      } 
-      @if (exibirNomes) { 
-        @if(widthCard >= 517) {
-          <div
-            class="w-auto flex flex-column justify-content-center align-items-center gap-2"
-          >
-            @if (masterName) { <span class="font-semibold system-color">{{ masterName }}</span> }
-            @if (empresaName) {<span class="empresa-name"
-              >Organização: {{ empresaName }}</span
-            >
-            }
-          </div>
 
-          <div
-            class="w-auto flex flex-row justify-content-center align-items-center gap-2"
-          >
-            <!-- Navegação de sistemas e usuários -->
-            @for (topAction of topMenuActions(); track $index) {
-            <ng-container *ngTemplateOutlet="topAction" />
-            }
-            <kv-top-icons
-              [topActions]="topActions()"
-            />
+        <span
+          *ngIf="showButtonApps"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Sistemas'"
+          [tooltipPosition]="'left'"
+          (click)="sistemasPanel.toggle($event)"
+        >
+          apps
+        </span>
 
-          </div>
-        } 
-        @else {
-          <div
-            class="w-auto flex flex-row justify-content-center align-items-center gap-2"
-          >
-            <!-- Navegação de sistemas e usuários -->
-            @for (topAction of topMenuActions(); track $index) {
-            <ng-container *ngTemplateOutlet="topAction" />
-            }
-            <kv-top-icons
-              [topActions]="topActions()"
-            />
+        <span
+          *ngIf="showButtonUser"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Menu do Usuário'"
+          [tooltipPosition]="'left'"
+          (click)="meusDadosPanel.toggle($event)"
+        >
+          person
+        </span>
+      </div>
+      } @else {
+      <div
+        class="w-auto flex flex-row justify-content-center align-items-center gap-2"
+      >
+        <!-- Navegação de sistemas e usuários -->
+        @for (topAction of topMenuActions(); track $index) {
+        <ng-container *ngTemplateOutlet="topAction" />
+        }
 
-          </div>
+        <span
+          *ngIf="showButtonApps"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Sistemas'"
+          [tooltipPosition]="'left'"
+          (click)="sistemasPanel.toggle($event)"
+        >
+          apps
+        </span>
 
-          <div
-            class="w-auto flex flex-column justify-content-center align-items-center gap-2"
-          >
-            @if (masterName) { <span class="master-name">{{ masterName }}</span> }
-            @if (empresaName) {<span class="empresa-name">{{ empresaName }}</span> }
-          </div>
-        } 
-      } 
-      @else { 
-        @if(widthPage() > 992){
-          <!-- dropdown para seleção de empresa/licenca -->
-          <dropdown-master
-            *ngIf="showLicencas()"
-            class="max-w-25rem"
-            style="min-width: 20rem;"
-            formControlName="idmaster"
-            [formGroup]="formGroup"
-            [masters]="masters"
-            (onSelectionChange)="changeLicense($event)"
-            (onSelectionValue)="changeLicense($event)"
-          >
-          </dropdown-master>
+        <span
+          *ngIf="showButtonUser"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Menu do Usuário'"
+          [tooltipPosition]="'left'"
+          (click)="meusDadosPanel.toggle($event)"
+        >
+          person
+        </span>
+      </div>
+
+      <div
+        class="w-auto flex flex-column justify-content-center align-items-center gap-2"
+      >
+        @if (masterName) { <span class="master-name">{{ masterName }}</span> }
+        @if (empresaName) {<span class="empresa-name">{{ empresaName }}</span> }
+      </div>
+      } } @else { @if(widthPage() > 992){
+      <!-- dropdown para seleção de empresa/licenca -->
+      <dropdown-master
+        *ngIf="showLicencas()"
+        class="max-w-25rem"
+        style="min-width: 20rem;"
+        formControlName="idmaster"
+        [formGroup]="formGroup"
+        [masters]="masters"
+        (onSelectionChange)="changeLicense($event)"
+        (onSelectionValue)="changeLicense($event)"
+      >
+      </dropdown-master>
+      }
+
+      <!-- Navegação de sistemas e usuários -->
+      <div class="w-auto flex flex-row align-items-center gap-2">
+        @for (topAction of topMenuActions(); track $index) {
+        <ng-container *ngTemplateOutlet="topAction" />
         }
 
-        <!-- Navegação de sistemas e usuários -->
-        <div class="w-auto flex flex-row align-items-center gap-2">
-          @for (topAction of topMenuActions(); track $index) {
-          <ng-container *ngTemplateOutlet="topAction" />
-          }
-          <kv-top-icons
-            [topActions]="topActions()"
-          />
+        <span
+          *ngIf="showButtonApps"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Sistemas'"
+          [tooltipPosition]="'left'"
+          (click)="sistemasPanel.toggle($event)"
+        >
+          apps
+        </span>
 
-        </div>
+        <span
+          *ngIf="showButtonUser"
+          class="material-symbols-outlined top-layout-icons p-1"
+          [pTooltip]="'Menu do Usuário'"
+          [tooltipPosition]="'left'"
+          (click)="meusDadosPanel.toggle($event)"
+        >
+          person
+        </span>
+      </div>
 
-        @if(widthPage() <= 992){
-          <!-- dropdown para seleção de empresa/licenca -->
-          <dropdown-master
-            *ngIf="showLicencas()"
-            class="w-full"
-            formControlName="idmaster"
-            [formGroup]="formGroup"
-            [masters]="masters"
-            (onSelectionChange)="changeLicense($event)"
-            (onSelectionValue)="changeLicense($event)"
-          >
-          </dropdown-master>
-        } 
-      }
+      @if(widthPage() < 992){
+      <!-- dropdown para seleção de empresa/licenca -->
+      <dropdown-master
+        *ngIf="showLicencas()"
+        class="w-full"
+        formControlName="idmaster"
+        [formGroup]="formGroup"
+        [masters]="masters"
+        (onSelectionChange)="changeLicense($event)"
+        (onSelectionValue)="changeLicense($event)"
+      >
+      </dropdown-master>
+      } }
     </div>
 
     <!-- Container -->
@@ -432,35 +465,40 @@
     [hideTransitionOptions]="'250ms ease-in'"
   >
   <ng-template pTemplate="container">
-    <p class="system-color font-medium text-lg px-2 py-3 m-0">
+    <p class="title-style mt-3">
       Olá, {{ userName ? userName.split(" ")[0] : "Usuário" }}!
     </p>
-    <!-- <div class="mt-5 mb-3"></div> -->
+    <div class="mt-5 mb-3"></div>
   
     <!-- Contêiner com direção em coluna para empilhar os botões -->
     <div class="flex flex-column">
       <!-- Botões adicionais dinâmicos -->
-      @for (action of actions; track $index) {
-        <ng-container>
-          <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 px-2"
-            (click)="action.action()"
-          >
-            <kv-icon
-              [icon]="action.icon"
-            />
-            <span>{{action.label}}</span>
-          </div>
-        </ng-container>
-      }
-
-      <div class="flex flex-row align-items-center gap-2 side-menu-item py-2 px-2"
-        (click)="accessKeePass($event)"
-      >
-          <kv-icon
-            icon="lock"
-          />
-          <span>Acessar KeePass</span>
-      </div>
+      <ng-container *ngFor="let action of actions">
+        <p-button
+          [icon]="action.icon"
+          [label]="action.label"
+          (onClick)="action.action()"
+          styleClass="border-noround w-full text-blue-900 text-sm"
+          [text]="true"
+        ></p-button>
+      </ng-container>
+      
+      <!-- Botões padrão -->
+      <p-button
+        icon="pi pi-lock"
+        label="Acessar KeePass"
+        (onClick)="accessKeePass($event)"
+        styleClass="border-noround w-full text-blue-900 text-sm"
+        [text]="true"
+      ></p-button>
+  
+      <p-button
+        icon="pi pi-sign-out"
+        label="Sair"
+        (onClick)="logout($event)"
+        styleClass="border-noround w-full text-blue-900 text-sm"
+        [text]="true"
+      ></p-button>
   
     </div>
   </ng-template>