Improved design of menu to handle servers #72

kdb-web/src/app/components/sidebar/sidebar.component.html

@@ -1,3 +1,3 @@
 <div class="menu">
-    <p-menu [model]="menuItems"></p-menu>
+    <p-panelMenu [model]="menuItems"></p-panelMenu>
 </div>

kdb-web/src/app/components/sidebar/sidebar.component.ts

@@ -40,6 +40,13 @@ export class SidebarComponent implements OnInit {
       this.menuItems = [];
       this.menuItems = [
         { label: this.isSidebarOpen ? this.translateService.instant('sidebar.dashboard') : '', icon: 'pi pi-th-large', routerLink: 'dashboard' },
+
+        {
+          label: this.isSidebarOpen ? this.translateService.instant('sidebar.server') : '', icon: 'pi pi-server', items: [
+            { label: this.isSidebarOpen ? this.translateService.instant('sidebar.settings') : '', icon: 'pi pi-cog', routerLink: 'server/id/settings' },
+            { label: this.isSidebarOpen ? this.translateService.instant('sidebar.members') : '', icon: 'pi pi-user-edit', routerLink: 'server/id/members' },
+          ]
+        },
       ];
 
       if (!hasPermission) {
@@ -47,9 +54,12 @@ export class SidebarComponent implements OnInit {
       }
 
       this.menuItems.push(
-        { separator: true },
-        { label: this.isSidebarOpen ? this.translateService.instant('sidebar.config') : '', icon: 'pi pi-cog', routerLink: '/admin/settings' },
-        { label: this.isSidebarOpen ? this.translateService.instant('sidebar.auth_user_list') : '', icon: 'pi pi-user-edit', routerLink: '/admin/users' },
+        {
+          label: this.isSidebarOpen ? this.translateService.instant('sidebar.administration') : '', icon: 'pi pi-cog', items: [
+            { label: this.isSidebarOpen ? this.translateService.instant('sidebar.config') : '', icon: 'pi pi-cog', routerLink: '/admin/settings' },
+            { label: this.isSidebarOpen ? this.translateService.instant('sidebar.auth_user_list') : '', icon: 'pi pi-user-edit', routerLink: '/admin/users' },
+          ]
+        },
       );
       this.menuItems = this.menuItems.slice();
     });

kdb-web/src/app/modules/shared/shared.module.ts

@@ -18,6 +18,7 @@ import { ToastModule } from 'primeng/toast';
 import { AuthRolePipe } from './pipes/auth-role.pipe';
 import { IpAddressPipe } from './pipes/ip-address.pipe';
 import { BoolPipe } from './pipes/bool.pipe';
+import { PanelMenuModule } from 'primeng/panelmenu';
 
 
 
@@ -44,7 +45,8 @@ import { BoolPipe } from './pipes/bool.pipe';
     CheckboxModule,
     DropdownModule,
     TranslateModule,
-    DynamicDialogModule
+    DynamicDialogModule,
+    PanelMenuModule,
   ],
   exports: [
     ButtonModule,
@@ -63,6 +65,7 @@ import { BoolPipe } from './pipes/bool.pipe';
     DropdownModule,
     TranslateModule,
     DynamicDialogModule,
+    PanelMenuModule,
     AuthRolePipe,
     IpAddressPipe,
     BoolPipe,

kdb-web/src/app/services/theme/theme.service.ts

@@ -27,7 +27,7 @@ export class ThemeService {
     });
     this.isSidebarOpen$.subscribe(isSidebarOpen => {
       this.isSidebarOpen = isSidebarOpen;
-      this.sidebarWidth$.next(isSidebarOpen ? '150px' : '50px');
+      this.sidebarWidth$.next(isSidebarOpen ? '175px' : '75px');
     });
     this.sidebarWidth$.subscribe(sidebarWidth => {
       this.sidebarWidth = sidebarWidth;