build: working complete nav with routes, unstyled

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { HomeComponent } from './home-component/home.component';
 import { RouterModule } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { MainNavigationComponent } from './main-navigation/main-navigation.component';
+import { DropdownNavButtonComponent } from './dropdown-nav-button/dropdown-nav-button.component';
 
 @NgModule({
   imports: [
@@ -22,7 +23,13 @@ import { MainNavigationComponent } from './main-navigation/main-navigation.compo
     TranslocoRootModule,
     RouterModule.forRoot([{ path: '', component: ScoutingCryptoComponent }]),
   ],
-  declarations: [ScoutingCryptoComponent, HomeComponent, AppComponent, MainNavigationComponent],
+  declarations: [
+    ScoutingCryptoComponent,
+    HomeComponent,
+    AppComponent,
+    MainNavigationComponent,
+    DropdownNavButtonComponent,
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

src/app/dropdown-nav-button/dropdown-nav-button.component.html

@@ -0,0 +1,14 @@
+<div
+  ngbDropdown
+  #myDrop="ngbDropdown"
+  (mouseenter)="onMouseEnter()"
+  (mouseleave)="onMouseLeave()"
+  class="d-inline-block"
+>
+  <button class="btn btn-outline-primary" ngbDropdownToggle>{{ buttonLabel }}</button>
+  <div ngbDropdownMenu>
+    <a *ngFor="let item of items" ngbDropdownItem [routerLink]="item.route">
+      {{ item.label }}
+    </a>
+  </div>
+</div>

src/app/dropdown-nav-button/dropdown-nav-button.component.ts

@@ -0,0 +1,26 @@
+import { Component, ViewChild, Input } from '@angular/core';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-dropdown-nav-button',
+  templateUrl: './dropdown-nav-button.component.html',
+  styleUrl: './dropdown-nav-button.component.css',
+})
+export class DropdownNavButtonComponent {
+  @ViewChild('myDrop', { static: false }) myDrop: NgbDropdown;
+  @Input() buttonLabel: string = 'Dropdown'; // Customizable button label
+  @Input() items: { label: string; route: string }[] = [];
+
+  private timeout: number;
+
+  onMouseEnter() {
+    clearTimeout(this.timeout);
+    this.myDrop.open();
+  }
+
+  onMouseLeave() {
+    this.timeout = setTimeout(() => {
+      this.myDrop.close();
+    }, 140);
+  }
+}

src/app/main-navigation/main-navigation.component.html

@@ -1,30 +1,29 @@
 <nav>
-  <div
+  <app-dropdown-nav-button
-    ngbDropdown
+    buttonLabel="Scouting"
-    class="d-inline-block"
+    [items]="[
-    #myDrop="ngbDropdown"
+      { label: 'Crypto', route: '/scouting/crypto' },
-    (mouseenter)="onMouseEnter()"
+      { label: 'Stocks', route: '/scouting/stocks' },
-    (mouseleave)="onMouseLeave()"
+      { label: 'Indicators', route: '/scouting/indicators' },
+    ]"
   >
-    <button type="button" class="btn btn-outline-warning" id="scouting" ngbDropdownToggle>Scouting</button>
+  </app-dropdown-nav-button>
-    <div ngbDropdownMenu aria-labelledby="scouting">
-      <button ngbDropdownItem><a routerLink="/scouting/cypto">Crypto</a></button>
-      <button ngbDropdownItem><a routerLink="/scouting/stocks">Stocks</a></button>
-      <button ngbDropdownItem><a routerLink="/scouting/indicators">Indicators</a></button>
-    </div>
-  </div>
 
-  <!--  <div ngbDropdown class="d-inline-block"-->
+  <app-dropdown-nav-button
-  <!--       #myDrop="ngbDropdown"-->
+    buttonLabel="Portfolio"
-  <!--       (mouseenter)="onMouseEnter()"-->
+    [items]="[
-  <!--       (mouseleave)="onMouseLeave()"-->
+      { label: 'Holdings', route: '/portfolio/holdings' },
-  <!--  >-->
+      { label: 'Orders', route: '/portfolio/orders' },
-  <!--    <button type="button" class="btn btn-outline-warning" id="portfolio" ngbDropdownToggle>-->
+    ]"
-  <!--      Scouting-->
+  >
-  <!--    </button>-->
+  </app-dropdown-nav-button>
-  <!--    <div ngbDropdownMenu aria-labelledby="portfolio">-->
+
-  <!--      <button ngbDropdownItem><a routerLink="/portfolio/holdings">Crypto</a></button>-->
+  <app-dropdown-nav-button
-  <!--      <button ngbDropdownItem><a routerLink="/portfolio/orders">Stocks</a></button>-->
+    buttonLabel="Trade"
-  <!--    </div>-->
+    [items]="[
-  <!--  </div>-->
+      { label: 'Holdings', route: '/trade/coinbase' },
+      { label: 'Alerts', route: '/trade/alerts' },
+    ]"
+  >
+  </app-dropdown-nav-button>
 </nav>