feat(menu): add grouped source links for client, server, and stack repositories

Author: Diogo-Ferraz

src/app/core/layout/component/app-menu/app-menu.component.ts

@@ -85,7 +85,15 @@ export class AppMenuComponent {
         label: 'About',
         items: [
           { label: 'Documentation', icon: 'pi pi-fw pi-book', routerLink: ['/docs'] },
-          { label: 'View Source', icon: 'pi pi-fw pi-github', url: 'https://github.com/Diogo-Ferraz/TaskManagementClient', target: '_blank' }
+          {
+            label: 'Source Code',
+            icon: 'pi pi-fw pi-github',
+            items: [
+              { label: 'Client Source', icon: 'pi pi-fw pi-desktop', url: 'https://github.com/Diogo-Ferraz/TaskManagementClient', target: '_blank' },
+              { label: 'Server Source', icon: 'pi pi-fw pi-server', url: 'https://github.com/Diogo-Ferraz/TaskManagementServer', target: '_blank' },
+              { label: 'Stack Source', icon: 'pi pi-fw pi-sitemap', url: 'https://github.com/Diogo-Ferraz/TaskManagementStack', target: '_blank' }
+            ]
+          }
         ]
       }
     ];

src/app/core/layout/component/app-menuitem/app-menuitem.component.html

@@ -1,6 +1,6 @@
 <ng-container>
     <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
-    <a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" [ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple>
+    <a *ngIf="(!item.routerLink || item.items) && item.visible !== false" [attr.href]="item.url" [ngClass]="item.styleClass" [attr.target]="item.target" tabindex="0" pRipple (click)="onItemClick($event)">
         <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
         <span class="layout-menuitem-text">{{ item.label }}</span>
         <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
@@ -32,4 +32,4 @@
             <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']" [root]="false"></li>
         </ng-template>
     </ul>
-</ng-container>
+</ng-container>

src/app/core/layout/component/app-menuitem/app-menuitem.component.ts

@@ -1,6 +1,6 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
-import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnInit, inject, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { MenuItem } from 'primeng/api';
 import { RippleModule } from 'primeng/ripple';
@@ -31,6 +31,8 @@ import { RippleModule } from 'primeng/ripple';
   ]
 })
 export class AppMenuitemComponent implements OnInit {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
   @Input() item!: MenuItem;
 
   @Input() index!: number;
@@ -47,6 +49,19 @@ export class AppMenuitemComponent implements OnInit {
 
   }
 
+  onItemClick(event: MouseEvent): void {
+    if (!this.item.items || this.item.items.length === 0) {
+      return;
+    }
+
+    event.preventDefault();
+    this.active = !this.active;
+
+    if (this.active) {
+      this.scrollExpandedChildrenIntoView();
+    }
+  }
+
   @HostBinding('class.active-menuitem')
     get activeClass() {
         return this.active && !this.root;
@@ -55,4 +70,24 @@ export class AppMenuitemComponent implements OnInit {
   get submenuAnimation() {
     return this.root ? 'expanded' : this.active ? 'expanded' : 'collapsed';
   }
+
+  private scrollExpandedChildrenIntoView(): void {
+    window.setTimeout(() => {
+      const lastChild = this.elementRef.nativeElement.querySelector('ul > li:last-child');
+      if (lastChild instanceof HTMLElement) {
+        lastChild.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest'
+        });
+        return;
+      }
+
+      this.elementRef.nativeElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }, 420);
+  }
 }