add styling

Author: bcsik

package-lock.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "^17.2.0",
     "@angular/platform-browser-dynamic": "^17.2.0",
     "@angular/router": "^17.2.0",
+    "primeng": "^17.7.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -44,4 +45,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.3.2"
   }
-}
+}

package.json

@@ -1 +1,2 @@
+<p-menubar [model]="model"></p-menubar>
 <router-outlet />

src/app/app.component.html

@@ -1,12 +1,28 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import {MenuItem} from "primeng/api";
+import {MenubarModule} from "primeng/menubar";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, MenubarModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
+  protected readonly model: MenuItem[] = [
+    {
+      label: 'Video',
+      routerLink: 'video'
+    },
+    {
+      label: 'Event',
+      routerLink: 'event'
+    },
+    {
+      label: 'Member',
+      routerLink: 'member'
+    }
+  ]
 }

src/app/app.component.ts

@@ -6,6 +6,7 @@ export const routes: Routes = [
       children: [
         {
           path: '',
+          loadComponent: () => import('./features/home/home.component').then(c => c.HomeComponent)
         },
         {
           path: 'video',

src/app/app.routes.ts

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "primeng/resources/themes/viva-dark/theme.css";
+@import "primeng/resources/primeng.min.css";