add menu

package-lock.json

@@ -14,6 +14,9 @@
         "@angular/forms": "^21.2.0",
         "@angular/platform-browser": "^21.2.0",
         "@angular/router": "^21.2.0",
+        "@primeuix/themes": "^2.0.3",
+        "primeicons": "^7.0.0",
+        "primeng": "^21.1.7",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
       },
@@ -423,6 +426,23 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "21.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.2.10.tgz",
+      "integrity": "sha512-yfCzUFNfeSMNnCkc0P5Pozqz1EViDe9KLPQyHVY/hApsNgBWvckpA+ZEWgKNfAf72f8bUJvZoHejaSMGYrpvuw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "parse5": "^8.0.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^21.0.0 || ^22.0.0",
+        "@angular/core": "^21.0.0 || ^22.0.0",
+        "@angular/platform-browser": "^21.0.0 || ^22.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "21.2.10",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.2.10.tgz",
@@ -3215,6 +3235,57 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@primeuix/motion": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/@primeuix/motion/-/motion-0.0.10.tgz",
+      "integrity": "sha512-PsZwOPq79Scp7/ionshRcQ5xKVf9+zuLcyY5mf6onK8chHT5C9JGphmcIZ4CzcqxuGEpsm8AIbTGy+zS3RtzLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.3"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-2.0.3.tgz",
+      "integrity": "sha512-2ykAB6BaHzR/6TwF8ShpJTsZrid6cVIEBVlookSdvOdmlWuevGu5vWOScgIwqWwlZcvkFYAGR/SUV3OHCTBMdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-2.0.3.tgz",
+      "integrity": "sha512-3fS1883mtCWhgUgNf/feiaaDSOND4EBIOu9tZnzJlJ8QtYyL6eFLcA6V3ymCWqLVXQ1+lTVEZv1gl47FIdXReg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.4.tgz",
+      "integrity": "sha512-pZ5f+vj7wSzRhC7KoEQRU5fvYAe+RP9+m39CTscZ3UywCD1Y2o6Fe1rRgklMPSkzUcty2jzkA0zMYkiJBD1hgg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.0-rc.4",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.4.tgz",
@@ -6935,7 +7006,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
       "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^8.0.0"
@@ -6989,7 +7059,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
       "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=20.19.0"
@@ -7185,6 +7254,34 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
+    },
+    "node_modules/primeng": {
+      "version": "21.1.7",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-21.1.7.tgz",
+      "integrity": "sha512-iKls1Yv+IQfgtSADpLZBDOkrTgfrZcW42gONeaaj5eqgtOU0SHGg1wuBLKPu+xWidD8sa5f8vBkmc+Q7uUKRJw==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@primeuix/motion": "^0.0.10",
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^2.0.3",
+        "@primeuix/utils": "^0.6.3",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^21.0.0",
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.7",
+        "@angular/forms": "^21.0.0",
+        "@angular/platform-browser": "^21.0.0",
+        "@angular/router": "^21.0.0",
+        "rxjs": "^6.0.0 || ^7.8.1"
+      }
+    },
     "node_modules/proc-log": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",

package.json

@@ -17,6 +17,9 @@
     "@angular/forms": "^21.2.0",
     "@angular/platform-browser": "^21.2.0",
     "@angular/router": "^21.2.0",
+    "@primeuix/themes": "^2.0.3",
+    "primeicons": "^7.0.0",
+    "primeng": "^21.1.7",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },
@@ -29,4 +32,4 @@
     "typescript": "~5.9.2",
     "vitest": "^4.0.8"
   }
-}
+}

src/app/app.config.ts

@@ -1,11 +1,18 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { providePrimeNG } from 'primeng/config';
+import Aura from '@primeuix/themes/aura';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes)
+    provideRouter(routes),
+    providePrimeNG({
+      theme: {
+        preset: Aura
+      }
+    })
   ]
 };

src/app/app.html

@@ -1,6 +1,5 @@
 <main class="main">
-  <h1>Search Dispatcher</h1>
+  <p-menubar [model]="items" />
-  <p>Search with Intent</p>
   <div class="content">
     <router-outlet />
   </div>

src/app/app.scss

@@ -0,0 +1,12 @@
+* {
+  font-family:
+    Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+  font-weight: normal;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: bolde;
+}

src/app/app.ts

@@ -1,13 +1,37 @@
-import { Component, signal } from '@angular/core';
+import { Component, OnInit, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { SearchBox } from './search-box/search-box';
+import { MenubarModule } from 'primeng/menubar';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, SearchBox],
+  imports: [RouterOutlet, SearchBox, MenubarModule],
   templateUrl: './app.html',
   styleUrl: './app.scss',
 })
-export class App {
+export class App implements OnInit {
   protected readonly title = signal('search-dispatcher');
+  items: MenuItem[] | undefined;
+
+  ngOnInit() {
+    this.items = [
+      {
+        label: 'Home',
+        icon: 'pi pi-home',
+        url: '/',
+      },
+      {
+        label: 'Settings',
+        icon: 'pi pi-cog',
+        url: '/settings',
+      },
+      {
+        label: 'Contact',
+        icon: 'pi pi-envelope',
+        url: 'mailto:anthony@dumas.cc',
+        tooltip: 'Contact the maintener.',
+      },
+    ];
+  }
 }

src/app/search-box/search-box.html

@@ -6,3 +6,5 @@
 
   <button type="submit">Search</button>
 </form>
+
+<p-button label="Check" />

src/app/search-box/search-box.ts

@@ -1,6 +1,7 @@
 import { Component, signal, ChangeDetectionStrategy, inject } from '@angular/core';
 import { form, FormField, required } from '@angular/forms/signals';
 import { Router } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
 
 interface SearchObject {
   term: string;
@@ -9,7 +10,7 @@ interface SearchObject {
 
 @Component({
   selector: 'sd-search-box',
-  imports: [FormField],
+  imports: [FormField, ButtonModule],
   templateUrl: './search-box.html',
   styleUrl: './search-box.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/styles.scss

@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import 'primeicons/primeicons.css';