From cf6ba77182af6afcf8a010e1526533fe797dfa4f Mon Sep 17 00:00:00 2001 From: Anthony Dumas Date: Thu, 14 May 2026 00:33:49 +0200 Subject: [PATCH] add menu --- package-lock.json | 101 ++++++++++++++++++++++++++++- package.json | 5 +- src/app/app.config.ts | 9 ++- src/app/app.html | 3 +- src/app/app.scss | 12 ++++ src/app/app.ts | 30 ++++++++- src/app/search-box/search-box.html | 2 + src/app/search-box/search-box.ts | 3 +- src/styles.scss | 1 + 9 files changed, 156 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index f309248..6189795 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bc696d2..2b65eaf 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/app/app.config.ts b/src/app/app.config.ts index cb1270e..1cf5e9b 100644 --- a/src/app/app.config.ts +++ b/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 + } + }) ] }; diff --git a/src/app/app.html b/src/app/app.html index ae148fe..d910f52 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,6 +1,5 @@
-

Search Dispatcher

-

Search with Intent

+
diff --git a/src/app/app.scss b/src/app/app.scss index e69de29..5566079 100644 --- a/src/app/app.scss +++ b/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; +} diff --git a/src/app/app.ts b/src/app/app.ts index ecd03f7..61eed47 100644 --- a/src/app/app.ts +++ b/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.', + }, + ]; + } } diff --git a/src/app/search-box/search-box.html b/src/app/search-box/search-box.html index 324ee36..6a57a4d 100644 --- a/src/app/search-box/search-box.html +++ b/src/app/search-box/search-box.html @@ -6,3 +6,5 @@ + + diff --git a/src/app/search-box/search-box.ts b/src/app/search-box/search-box.ts index 6978f32..f8225e2 100644 --- a/src/app/search-box/search-box.ts +++ b/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, diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..a097b4b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,2 @@ /* You can add global styles to this file, and also import other style files */ +@import 'primeicons/primeicons.css';