feat(console): include item name in header + clean up tree implementation css

Author: jourdiw

gravitee-apim-console-webui/src/portal/navigation-items/portal-navigation-items.component.html

@@ -45,12 +45,19 @@ <h3>Navigation items</h3>
     </header>
 
     @if (menuLinks$ | async; as menuLinks) {
-      <portal-tree-component [links]="menuLinks" [selectedId]="navId()" (select)="onSelect($event)" />
+      <mat-card appearance="outlined" class="sections-panel__tree__container">
+        <portal-tree-component [links]="menuLinks" [selectedId]="navId()" (select)="onSelect($event)" />
+      </mat-card>
     }
   </section>
 
   <section class="panel editor-panel">
     <header class="panel-header editor-panel__header">
+      @if (selectedNavigationItem()) {
+        <div class="panel-header__title">
+          {{ selectedNavigationItem().label }}
+        </div>
+      }
       <div class="panel-header__actions" *gioPermission="{ anyOf: ['environment-documentation-u'] }">
         <button mat-stroked-button [disabled]="contentControl.pristine">Save</button>
       </div>

gravitee-apim-console-webui/src/portal/navigation-items/portal-navigation-items.component.scss

@@ -19,6 +19,8 @@
 
 @use '../../scss/gio-layout' as gio-layout;
 
+$typography: map.get(gio.$mat-theme, typography);
+
 :host {
   @include gio-layout.gio-responsive-content-container;
   display: flex;
@@ -48,6 +50,10 @@
   align-items: center;
   flex-shrink: 0;
 
+  &__title {
+    @include mat.m2-typography-level($typography, 'subtitle-1');
+  }
+
   &__actions {
     margin-left: auto;
 
@@ -80,8 +86,14 @@
     }
   }
 
-  portal-tree-component {
+  &__tree__container {
     height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    width: 350px;
+    portal-tree-component {
+      height: 100%;
+    }
   }
 }