Improved design of menu to handle servers #72

kdb-web/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 4,
+  "useTabs": false
+}

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.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;

kdb-web/src/assets/i18n/de.json

@@ -9,6 +9,9 @@
         "dashboard": "Dashboard",
         "server": "Server",
         "server_empty": "Kein Server ausgewählt",
+        "settings": "Einstellungen",
+        "members": "Mitglieder",
+        "administration": "Administration",
         "config": "Konfiguration",
         "auth_user_list": "Benutzer"
     },
@@ -212,24 +215,8 @@
             "Freitag",
             "Samstag"
         ],
-        "dayNamesShort": [
+        "dayNamesShort": ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
-            "Son",
+        "dayNamesMin": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
-            "Mon",
-            "Die",
-            "Mit",
-            "Don",
-            "Fre",
-            "Sam"
-        ],
-        "dayNamesMin": [
-            "So",
-            "Mo",
-            "Di",
-            "Mi",
-            "Do",
-            "Fr",
-            "Sa"
-        ],
         "monthNames": [
             "Januar",
             "Februar",

kdb-web/src/styles/primeng-fixes.scss

@@ -6,14 +6,17 @@
     }
 }
 
-.p-menu {
+.p-menu,
+.p-panelmenu {
     background: none !important;
     border: none !important;
     width: auto !important;
     border-radius: 0px !important;
     padding: 0 !important;
 
-    .p-menuitem-link {
+    .p-menuitem-link,
+    .p-panelmenu-header > a,
+    .p-panelmenu-content .p-menuitem .p-menuitem-link {
         $distance: 10px;
         padding: $distance 0px $distance $distance !important;
         margin: 4px 0px 4px 6px !important;
@@ -24,6 +27,31 @@
     top: $headerHeight !important;
 }
 
+.p-panelmenu {
+    .p-panelmenu-icon {
+        order: 1; // to be the first item on right side.
+    }
+    .p-menuitem-text {
+        flex-grow: 1; // to fill the whole space and push the icon to the end
+    }
+
+    .p-panelmenu-header > a {
+        border: none !important;
+        border-radius: none !important;
+        font-weight: none !important;
+        transition: none !important;
+    }
+
+    .p-panelmenu-content {
+        border: none !important;
+        background: none !important;
+    }
+
+    .p-menuitem-text {
+        line-height: normal !important;
+    }
+}
+
 ui-menu .ui-menu-parent .ui-menu-child {
     width: 400px; /* exagerated !! */
 }

kdb-web/src/styles/themes/sh-edraft-dark-theme.scss

@@ -252,28 +252,43 @@
         stroke: $primaryHeaderColor !important;
     }
 
-    .p-menu {
+    .p-menu,
+    .p-panelmenu {
         color: $primaryTextColor !important;
 
         .p-menuitem-link .p-menuitem-text,
-        .p-menuitem-link .p-menuitem-icon {
+        .p-menuitem-link .p-menuitem-icon,
+        .p-panelmenu-header > a {
             color: $primaryTextColor !important;
+            background: transparent !important;
+            font-size: 1rem !important;
+            font-weight: normal !important;
         }
 
-        .p-menuitem-link:focus {
+        .p-menuitem-link:focus,
+        .p-panelmenu-header > a:focus,
+        .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
             box-shadow: none !important;
         }
 
-        .p-menuitem-link:hover {
+        .p-menuitem-link:hover,
+        .p-panelmenu-header > a:hover,
+        .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
             background-color: $secondaryBackgroundColor !important;
             $border-radius: 20px;
             border-radius: $border-radius 0px 0px $border-radius;
 
             .p-menuitem-text,
-            .p-menuitem-icon {
+            .p-menuitem-icon,
+            .p-menuitem-text,
+            .p-panelmenu-icon {
                 color: $primaryHeaderColor !important;
             }
         }
+
+        .p-panelmenu-content {
+            margin: 5px 0px 5px 10px;
+        }
     }
 
     .p-menu-overlay {