refactor: Refactor end top menu bar

iatecbr · Oct 18, 2024 · cc8c317 · cc8c317
1 parent c664d8c
commit cc8c317
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -2,14 +2,8 @@
   {
     "label": "Dashboards",
     "icon": "pi pi-home",
-    "items": [
-      {
-        "label": "Example Dashboard",
-        "icon": "fa-duotone fa-solid fa-house",
-        "routerLink": [
-          "/"
-        ]
-      }
+    "routerLink": [
+      "/"
     ]
   },
   {