build: added ng-bootstrap for dropdown nav menu, removed material

.eslintrc.json

@@ -13,11 +13,7 @@
         "project": ["tsconfig.*?.json"],
         "createDefaultProgram": true
       },
-      "extends": [
+      "extends": ["plugin:@angular-eslint/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
-        "plugin:@angular-eslint/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "prettier"
-      ],
       "rules": {
         "@angular-eslint/component-class-suffix": [
           "error",
@@ -25,14 +21,8 @@
             "suffixes": ["Component", "Page"]
           }
         ],
-        "@angular-eslint/directive-selector": [
+        "@angular-eslint/directive-selector": ["error", { "type": "attribute", "prefix": "app", "style": "camelCase" }],
-          "error",
+        "@angular-eslint/component-selector": ["error", { "type": "element", "prefix": "app", "style": "kebab-case" }]
-          { "type": "attribute", "prefix": "app", "style": "camelCase" }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          { "type": "element", "prefix": "app", "style": "kebab-case" }
-        ]
       }
     },
     {

README.md

@@ -31,11 +31,11 @@ podman compose up
 ```
 
 ```bash
-# Build Docker image
+# Build Docker
-$ docker build . -t angular-starter
+$ docker build . -t skrill-frontend
 
 # Run Docker Container
-$ docker run -p 3000:80 angular-starter
+$ docker run -p 3000:80 skrill-frontend
 ```
 
 ## Docker Hub

docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 services:
   app:
     image: skrill:latest

package.json

@@ -52,10 +52,10 @@
     "@angular/compiler": "^17.3.6",
     "@angular/core": "^17.3.6",
     "@angular/forms": "^17.3.6",
-    "@angular/material": "^17.3.6",
     "@angular/platform-browser": "^17.3.6",
     "@angular/platform-browser-dynamic": "^17.3.6",
     "@angular/router": "^17.3.6",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@ngneat/transloco": "^6.0.4",
     "bootstrap": "^5.3.3",
     "ng": "^0.0.0",

src/app/app.component.html

@@ -1,36 +1,19 @@
 <!-- Toolbar -->
 
 <header>
-  <!--<div class="toolbar" role="banner">-->
+  <div class="container-fluid">
-  <img
+    <div class="row">
-    width="40"
+      <div class="col">
-    alt="Angular Logo"
+        <h1>$kriLL</h1>
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+      </div>
-  />
+    </div>
-  <span>$kriLL</span>
-  <!--  <div class="spacer"></div>-->
 
-  <nav>
+    <div class="row">
-    <ul>
+      <div class="col">
-      <li>
+        <app-main-navigation></app-main-navigation>
-        <a routerLink="/scout">
+      </div>
-          <button class="btn btn-warning" type="button">Scouting</button>
+    </div>
-        </a>
+  </div>
-      </li>
-      <li>
-        <button class="btn btn-warning" type="button">
-          <a routerLink="/portfolio">Portfolio</a>
-        </button>
-      </li>
-      <li>
-        <button class="btn btn-warning" type="button">
-          <a routerLink="/trade">Trade</a>
-        </button>
-      </li>
-    </ul>
-  </nav>
-
-  <!--</div>-->
 </header>
 
 <main>
@@ -42,7 +25,7 @@
 
 <footer>
   <div class="container-fluid">
-    Copyright &copy 2024 Zavage Software Inc., all rights reserved.<br />
+    Copyright &copy; 2024 Zavage Software Inc., all rights reserved.<br />
     Denver, CO
   </div>
 </footer>

src/app/app.component.spec.ts

@@ -4,9 +4,7 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      declarations: [AppComponent],
-        AppComponent
-      ],
     }).compileComponents();
   }));
 

src/app/app.module.ts

@@ -9,6 +9,8 @@ import { TranslocoRootModule } from './transloco-root.module';
 import { ScoutingCryptoComponent } from './scouting-crypto/scouting-crypto.component';
 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';
 
 @NgModule({
   imports: [
@@ -16,10 +18,11 @@ import { RouterModule } from '@angular/router';
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
+    NgbModule,
     TranslocoRootModule,
     RouterModule.forRoot([{ path: '', component: ScoutingCryptoComponent }]),
   ],
-  declarations: [ScoutingCryptoComponent, HomeComponent, AppComponent],
+  declarations: [ScoutingCryptoComponent, HomeComponent, AppComponent, MainNavigationComponent],
   providers: [],
   bootstrap: [AppComponent],
 })

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

@@ -0,0 +1,10 @@
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+nav ul li {
+  display: inline;
+  margin-right: 1em;
+}

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

@@ -0,0 +1,30 @@
+<nav>
+  <div
+    ngbDropdown
+    class="d-inline-block"
+    #myDrop="ngbDropdown"
+    (mouseenter)="onMouseEnter()"
+    (mouseleave)="onMouseLeave()"
+  >
+    <button type="button" class="btn btn-outline-warning" id="scouting" ngbDropdownToggle>Scouting</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"-->
+  <!--       #myDrop="ngbDropdown"-->
+  <!--       (mouseenter)="onMouseEnter()"-->
+  <!--       (mouseleave)="onMouseLeave()"-->
+  <!--  >-->
+  <!--    <button type="button" class="btn btn-outline-warning" id="portfolio" ngbDropdownToggle>-->
+  <!--      Scouting-->
+  <!--    </button>-->
+  <!--    <div ngbDropdownMenu aria-labelledby="portfolio">-->
+  <!--      <button ngbDropdownItem><a routerLink="/portfolio/holdings">Crypto</a></button>-->
+  <!--      <button ngbDropdownItem><a routerLink="/portfolio/orders">Stocks</a></button>-->
+  <!--    </div>-->
+  <!--  </div>-->
+</nav>

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

@@ -0,0 +1,23 @@
+import { Component, ViewChild } from '@angular/core';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-main-navigation',
+  templateUrl: './main-navigation.component.html',
+  styleUrl: './main-navigation.component.css',
+})
+export class MainNavigationComponent {
+  @ViewChild('myDrop', { static: false }) myDrop: NgbDropdown;
+  private timeout: number;
+
+  onMouseEnter() {
+    clearTimeout(this.timeout);
+    this.myDrop.open();
+  }
+
+  onMouseLeave() {
+    this.timeout = setTimeout(() => {
+      this.myDrop.close();
+    }, 300); // Delay before closing helps if mouse moves to 1px gap for submenu
+  }
+}

src/app/transloco-root.module.ts

@@ -5,7 +5,7 @@ import {
   TranslocoLoader,
   TRANSLOCO_CONFIG,
   translocoConfig,
-  TranslocoModule
+  TranslocoModule,
 } from '@ngneat/transloco';
 import { Injectable, NgModule } from '@angular/core';
 import { environment } from '../environments/environment';
@@ -13,7 +13,7 @@ import { Observable } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class TranslocoHttpLoader implements TranslocoLoader {
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {}
 
   getTranslation(lang: string): Observable<Translation> {
     return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
@@ -31,9 +31,9 @@ export class TranslocoHttpLoader implements TranslocoLoader {
         // Remove this option if your application doesn't support changing language in runtime.
         reRenderOnLangChange: true,
         prodMode: environment.production,
-      })
+      }),
     },
-    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
+    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
-  ]
+  ],
 })
-export class TranslocoRootModule { }
+export class TranslocoRootModule {}

src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };

src/environments/environment.ts

@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };
 
 /*

src/jestGlobalMocks.ts

@@ -1,14 +1,14 @@
-Object.defineProperty(window, 'CSS', {value: null});
+Object.defineProperty(window, 'CSS', { value: null });
 Object.defineProperty(document, 'doctype', {
-  value: '<!DOCTYPE html>'
+  value: '<!DOCTYPE html>',
 });
 Object.defineProperty(window, 'getComputedStyle', {
   value: () => {
     return {
       display: 'none',
-      appearance: ['-webkit-appearance']
+      appearance: ['-webkit-appearance'],
     };
-  }
+  },
 });
 /**
  * ISSUE: https://github.com/angular/material2/issues/7101

src/main.ts

@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
-  .catch(err => console.error(err));
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

transloco.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  rootTranslationsPath: 'src/assets/i18n/',
+  rootTranslationsPath: "src/assets/i18n/",
-  langs: ['de', 'en'],
+  langs: ["de", "en"],
-  keysManager: {}
+  keysManager: {},
 };

tsconfig.spec.json

@@ -2,16 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
+    "types": ["jest", "node"]
-      "jest",
-      "node"
-    ]
   },
-  "files": [
+  "files": ["src/polyfills.ts"],
-    "src/polyfills.ts"
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
 }