From cc8c3179c2ae83f35ac55d061a580d926b762158 Mon Sep 17 00:00:00 2001
From: Elvys Marcos Ribeiro Bispo <elvys.marcos@gmail.com>
Date: Fri, 18 Oct 2024 10:20:43 -0300
Subject: [PATCH] refactor: Refactor end top menu bar

---
 projects/iatec/nephos-layout/package.json     |  2 +-
 .../topbar/component/topbar.component.html    |  2 +-
 .../topbar/component/topbar.component.scss    | 54 ++++++++++---------
 .../topbar/component/topbar.component.ts      |  7 ++-
 .../src/lib/nephos.layout.module.ts           |  4 +-
 .../src/lib/services/menu.service.ts          |  2 +
 projects/stage/src/app/app.config.ts          |  5 +-
 .../modules/dashboard/dashboard.component.ts  |  6 ++-
 .../component/nephos-template.component.ts    |  1 +
 projects/stage/src/assets/mock/menus.json     | 10 +---
 10 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/projects/iatec/nephos-layout/package.json b/projects/iatec/nephos-layout/package.json
index 34a7684..f0499b5 100644
--- a/projects/iatec/nephos-layout/package.json
+++ b/projects/iatec/nephos-layout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@iatec/nephos-layout",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "peerDependencies": {
     "@angular/common": ">=17.0.0",
     "@angular/core": ">=17.0.0",
diff --git a/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.html b/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.html
index ce999b7..eb560ed 100644
--- a/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.html
+++ b/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.html
@@ -13,7 +13,7 @@
     <div class="topbar-end">
         <ul class="topbar-menu">
             <ng-content class="flex"></ng-content>
-            <li class="topbar-theme">
+            <li>
                 <button pButton
                         type="button"
                         size="small"
diff --git a/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.scss b/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.scss
index 557f388..c920944 100644
--- a/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.scss
+++ b/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.scss
@@ -1,40 +1,44 @@
 div.topbar-end {
   li {
+    margin-left: 8px !important;
+
     button {
-      padding-left: 4px !important;
-      padding-right: 4px !important;
+      padding-left: 0.5rem !important;
+      padding-right: 0.5rem !important;
     }
   }
 
   li.topBar-language {
-    margin-right: 6px !important;
+    margin-right: 10px !important;
   }
 
   li.topbar-profile {
-    margin-left: initial !important;
-    padding: 0 0 3px 0;
+    button {
+      width: initial !important;
+      height: initial !important;
 
-    img {
-      width: 2.5rem;
-      height: 2.5rem;
-      border-radius: 50%;
-      border: 1px solid white;
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    }
+      img {
+        width: 2.5rem !important;
+        height: 2.5rem !important;
+        border-radius: 50%;
+        border: 1px solid white;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+      }
 
-    div {
-      width: 2.5rem;
-      height: 2.5rem;
-      border: 1px solid white;
-      border-radius: 50%;
-      background-color: var(--primary-color);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-      font-weight: 700;
-      letter-spacing: -0.9px;
+      div {
+        width: 2.5rem;
+        height: 2.5rem;
+        border: 1px solid white;
+        border-radius: 50%;
+        background-color: var(--primary-color);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        font-weight: 700;
+        letter-spacing: -0.9px;
+      }
     }
   }
 }
diff --git a/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.ts b/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.ts
index 59f627e..2e8bb68 100644
--- a/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.ts
+++ b/projects/iatec/nephos-layout/src/lib/components/topbar/component/topbar.component.ts
@@ -1,5 +1,6 @@
 import { Component, effect, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { ColorScheme, LayoutService } from '../../../services';
+import { ColorScheme, LayoutService, MenuService } from '../../../services';
+import { MenuItem } from 'primeng/api';
 
 
 @Component({
@@ -17,7 +18,9 @@ export class TopbarComponent {
     urlAvatar: string | undefined;
     letters: string | undefined;
 
-    constructor(public layoutService: LayoutService) {
+    constructor(
+        public layoutService: LayoutService
+    ) {
         effect(() => {
             const profile = this.layoutService.profile();
             this.urlAvatar = profile.urlAvatar;
diff --git a/projects/iatec/nephos-layout/src/lib/nephos.layout.module.ts b/projects/iatec/nephos-layout/src/lib/nephos.layout.module.ts
index 666aea5..2e99bf9 100644
--- a/projects/iatec/nephos-layout/src/lib/nephos.layout.module.ts
+++ b/projects/iatec/nephos-layout/src/lib/nephos.layout.module.ts
@@ -30,6 +30,7 @@ import { SkeletonModule } from 'primeng/skeleton';
 import { TranslocoPipe } from '@jsverse/transloco';
 import { ToastModule } from 'primeng/toast';
 import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { MenubarModule } from 'primeng/menubar';
 
 
 @NgModule({
@@ -76,7 +77,8 @@ import { ConfirmPopupModule } from 'primeng/confirmpopup';
         SkeletonModule,
         TranslocoPipe,
         ToastModule,
-        ConfirmPopupModule
+        ConfirmPopupModule,
+        MenubarModule
     ],
     providers: [
         provideHttpClient(withInterceptorsFromDi())
diff --git a/projects/iatec/nephos-layout/src/lib/services/menu.service.ts b/projects/iatec/nephos-layout/src/lib/services/menu.service.ts
index 85662a0..d6bcd66 100644
--- a/projects/iatec/nephos-layout/src/lib/services/menu.service.ts
+++ b/projects/iatec/nephos-layout/src/lib/services/menu.service.ts
@@ -12,10 +12,12 @@ export class MenuService {
     private _resetSource = new Subject();
     private _menus: Subject<MenuItem[]> = new Subject<MenuItem[]>();
 
+
     menuSource$ = this._menuSource.asObservable();
     resetSource$ = this._resetSource.asObservable();
     menus$ = this._menus.asObservable();
 
+
     onMenuStateChange(event: MenuChangeEventModel) {
         this._menuSource.next(event);
     }
diff --git a/projects/stage/src/app/app.config.ts b/projects/stage/src/app/app.config.ts
index d6700a8..d266fec 100644
--- a/projects/stage/src/app/app.config.ts
+++ b/projects/stage/src/app/app.config.ts
@@ -5,6 +5,7 @@ import { routes } from './app.routes';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 import { provideTransloco } from '@jsverse/transloco';
+import { ConfirmationService, MessageService } from 'primeng/api';
 
 export const appConfig: ApplicationConfig = {
     providers: [
@@ -18,6 +19,8 @@ export const appConfig: ApplicationConfig = {
                 reRenderOnLangChange: true,
                 prodMode: !isDevMode(),
             },
-        })
+        }),
+        MessageService,
+        ConfirmationService
     ]
 };
diff --git a/projects/stage/src/app/modules/dashboard/dashboard.component.ts b/projects/stage/src/app/modules/dashboard/dashboard.component.ts
index d34b782..3f71628 100644
--- a/projects/stage/src/app/modules/dashboard/dashboard.component.ts
+++ b/projects/stage/src/app/modules/dashboard/dashboard.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { MenuService } from '@iatec/nephos-layout';
 
 @Component({
     selector: 'app-dashboard',
@@ -8,5 +9,8 @@ import { Component } from '@angular/core';
     styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent {
-
+    constructor(
+        private _menuService: MenuService
+    ) {
+    }
 }
diff --git a/projects/stage/src/app/templates/nephos/component/nephos-template.component.ts b/projects/stage/src/app/templates/nephos/component/nephos-template.component.ts
index 3291a57..b17816b 100644
--- a/projects/stage/src/app/templates/nephos/component/nephos-template.component.ts
+++ b/projects/stage/src/app/templates/nephos/component/nephos-template.component.ts
@@ -29,6 +29,7 @@ export class NephosTemplateComponent implements OnInit {
             (config) => ({
                 ...config,
                 theme: 'default',
+                menuMode: 'slim'
             }));
 
         this._layoutService.profile.set({name: 'Apostle Paul', urlAvatar: './assets/images/avatar/example.png'});
diff --git a/projects/stage/src/assets/mock/menus.json b/projects/stage/src/assets/mock/menus.json
index 7475595..b361674 100644
--- a/projects/stage/src/assets/mock/menus.json
+++ b/projects/stage/src/assets/mock/menus.json
@@ -2,14 +2,8 @@
   {
     "label": "Dashboards",
     "icon": "pi pi-home",
-    "items": [
-      {
-        "label": "Example Dashboard",
-        "icon": "fa-duotone fa-solid fa-house",
-        "routerLink": [
-          "/"
-        ]
-      }
+    "routerLink": [
+      "/"
     ]
   },
   {