UI: side-menu typography polish, toggled-section divider, and tb-icon-based user menu items

Set the side-menu toolbar text color via --mat-toolbar-container-text-color, switch menu-item link color to the same 76%-black token, and replace the global per-li border with a thinner divider that only shows under an opened section toggle. User-menu account/logout items use tb-icon, and the dropdown gets a tighter spacing system with a logout-separating border.

ui-ngx/src/app/modules/home/home.component.html

@@ -30,7 +30,7 @@
       </mat-toolbar>
     </header>
     <mat-toolbar class="tb-side-menu-toolbar flex flex-1 flex-col" role="navigation">
-      <div class="flex-1 overflow-y-auto">
+      <div class="w-full flex-1 overflow-y-auto">
         <tb-side-menu></tb-side-menu>
       </div>
       <tb-user-menu></tb-user-menu>

ui-ngx/src/app/modules/home/home.component.scss

@@ -54,6 +54,7 @@
       height: inherit;
       padding: 0;
       border-right: 1px solid rgba(0, 0, 0, 0.12);
+      --mat-toolbar-container-text-color: rgba(0, 0, 0, .76);
       tb-user-menu {
         border-top: 1px solid rgba(0, 0, 0, 0.12);
       }

ui-ngx/src/app/modules/home/menu/menu-toggle.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<a mat-button class="tb-button-toggle" (click)="toggleSection($event)"
+<a mat-button class="tb-button-toggle" [class.tb-toggled]="section.opened" (click)="toggleSection($event)"
    [class.is-new]="section.isNew">
   @if (section.icon !== null) {
     <tb-icon matButtonIcon>{{section.icon}}</tb-icon>

ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss

@@ -18,6 +18,9 @@
 
 :host ::ng-deep {
   .tb-button-toggle {
+    &.tb-toggled {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
     .tb-toggle-icon {
       display: inline-block;
       width: 15px;

ui-ngx/src/app/modules/home/menu/side-menu.component.scss

@@ -19,17 +19,18 @@
 
 :host ::ng-deep {
 
-  .tb-side-menu,
+  .tb-side-menu {
+    padding: 12px 0;
+    margin: 0;
+    list-style: none;
+  }
+
   .tb-side-menu ul {
     padding: 0;
     margin-top: 0;
     list-style: none;
   }
 
-  .tb-side-menu > li {
-    border-bottom: 1px solid rgba(0, 0, 0, .12);
-  }
-
   a.mat-mdc-button.mat-mdc-button-base {
     display: inline-flex;
     width: 100%;
@@ -39,6 +40,7 @@
     line-height: 40px;
     border-radius: 0;
     padding: 0 16px;
+    --mat-button-text-label-text-color: rgba(0, 0, 0, .76);
     &:hover {
       border-bottom: none;
       background-color: rgba(255,255,255,0.08);

ui-ngx/src/app/shared/components/user-menu.component.html

@@ -30,11 +30,11 @@
   @if (authority$ | async; as authority) {
     <div class="tb-user-menu-items">
       <button mat-menu-item (click)="openAccount()">
-        <mat-icon class="material-icons">account_circle</mat-icon>
+        <tb-icon matMenuItemIcon>mdi:account-circle-outline</tb-icon>
         <span translate>account.account</span>
       </button>
-      <button mat-menu-item (click)="logout()">
-        <mat-icon class="material-icons">exit_to_app</mat-icon>
+      <button class="tb-logout" mat-menu-item (click)="logout()">
+        <tb-icon matMenuItemIcon>logout</tb-icon>
         <span translate>home.logout</span>
       </button>
     </div>

ui-ngx/src/app/shared/components/user-menu.component.scss

@@ -30,7 +30,6 @@
     }
 
     span.tb-user-display-name {
-      color: rgba(0, 0, 0, 0.76);
       font-size: 14px;
       line-height: 16px;
       font-weight: 500;
@@ -57,4 +56,20 @@
 
 .tb-user-menu-items {
   min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  --mat-menu-item-label-text-size: 14px;
+  --mat-menu-item-label-text-line-height: 20px;
+  --mat-menu-item-spacing: 8px;
+  --mat-menu-item-icon-size: 18px;
+  .mat-icon {
+    font-size: 18px;
+  }
+  .mat-mdc-menu-item {
+    min-height: 40px;
+    &.tb-logout {
+      border-top: 1px solid rgba(0, 0, 0, 0.12);
+    }
+  }
 }