WIP

apps/frontend/src/app/app.component.html

@@ -1,4 +1,7 @@
-<common-ui-header></common-ui-header>
+<common-ui-header
+  title="Lucas Marcolongo"
+  [navLinks]="navLinks"
+></common-ui-header>
 <div class="container mx-auto">
   <router-outlet></router-outlet>
 </div>

apps/frontend/src/app/app.component.ts

@@ -1,11 +1,40 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { HeaderComponent } from '@marcolongo.cloud/common-ui';
+import { HeaderComponent, NavLink } from '@marcolongo.cloud/common-ui';
 
 @Component({
   imports: [RouterModule, HeaderComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {}
+export class AppComponent {
+  public navLinks: NavLink[] = [
+    {
+      label: 'Home',
+      url: '/home',
+      icon: 'home',
+    },
+    {
+      label: 'About',
+      icon: 'article',
+      items: [
+        {
+          label: 'Me',
+          url: '/about/me',
+          icon: 'person',
+        },
+        {
+          label: 'Company',
+          url: '/about/company',
+          icon: 'business',
+        },
+      ],
+    },
+    {
+      label: 'Contact',
+      icon: 'email',
+      url: '/contact',
+    },
+  ];
+}

apps/frontend/src/app/app.routes.ts

@@ -3,6 +3,28 @@ import { Route } from '@angular/router';
 export const appRoutes: Route[] = [
   {
     path: '',
+    redirectTo: 'home',
+    pathMatch: 'full',
+  },
+  {
+    path: 'home',
+    loadComponent: () =>
+      import('./home/home.component').then((m) => m.HomeComponent),
+  },
+  {
+    path: 'about',
+    loadComponent: () =>
+      import('./home/home.component').then((m) => m.HomeComponent),
+    children: [
+      {
+        path: 'company',
+        loadComponent: () =>
+          import('./home/home.component').then((m) => m.HomeComponent),
+      },
+    ],
+  },
+  {
+    path: 'contact',
     loadComponent: () =>
       import('./home/home.component').then((m) => m.HomeComponent),
   },

libs/common-ui/src/index.ts

@@ -1 +1 @@
-export { HeaderComponent } from './lib/header/header.component';
+export { HeaderComponent, NavLink } from './lib/header/header.component';

libs/common-ui/src/lib/header/header.component.html

@@ -21,34 +21,56 @@
         tabindex="0"
         class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
       >
-        <li><a>Item 1</a></li>
+        @for (navLink of navLinks(); track navLink.label){
         <li>
-          <a>Parent</a>
+          <a [routerLink]="navLink.url" routerLinkActive="active">
+            {{ navLink.label }}
+          </a>
+          @if(navLink.items){
           <ul class="p-2">
-            <li><a>Submenu 1</a></li>
-            <li><a>Submenu 2</a></li>
+            @for (item of navLink.items; track item.label){
+            <li>
+              j
+              <a [routerLink]="item.url" routerLinkActive="active">{{
+                item.label
+              }}</a>
+            </li>
+            }
           </ul>
+          }
         </li>
-        <li><a>Item 3</a></li>
+        }
       </ul>
     </div>
-    <a class="btn btn-ghost text-xl hover:underline hidden lg:flex" href="/"
-      >Lucas Marcolongo</a
-    >
+    <a class="btn btn-ghost text-xl hover:underline lg:flex" href="/">{{
+      title()
+    }}</a>
   </div>
   <div class="navbar-center hidden lg:flex">
     <ul class="menu menu-horizontal px-1">
-      <li><a>Item 1</a></li>
+      @for ( navLink of navLinks(); track navLink.label){ @if (!navLink.items )
+      {
+      <li>
+        <a [routerLink]="navLink.url" routerLinkActive="active">
+          {{ navLink.label }}
+        </a>
+      </li>
+      } @else {
       <li>
         <details>
-          <summary>Parent</summary>
+          <summary>{{ navLink.label }}</summary>
           <ul class="p-2">
-            <li><a>Submenu 1</a></li>
-            <li><a>Submenu 2</a></li>
+            @for (item of navLink.items; track item.label){
+            <li>
+              <a [routerLink]="item.url" routerLinkActive="active">{{
+                item.label
+              }}</a>
+            </li>
+            }
           </ul>
         </details>
       </li>
-      <li><a>Item 3</a></li>
+      } }
     </ul>
   </div>
   <div class="navbar-end"></div>

libs/common-ui/src/lib/header/header.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HeaderComponent } from './header.component';
+import { ActivatedRoute } from '@angular/router';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
@@ -8,10 +9,43 @@ describe('HeaderComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [HeaderComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              url: [
+                {
+                  path: 'contact',
+                },
+              ],
+            },
+          },
+        },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(HeaderComponent);
     component = fixture.componentInstance;
+    fixture.componentRef.setInput('title', 'My App');
+    fixture.componentRef.setInput('navLinks', [
+      { label: 'Home', path: '/' },
+      { label: 'About', path: '/about' },
+      {
+        label: 'Contact',
+        path: '/contact',
+        items: [
+          {
+            label: 'Contact Us',
+            path: '/contact',
+          },
+          {
+            label: 'Support',
+            path: '/support',
+          },
+        ],
+      },
+    ]);
     fixture.detectChanges();
   });
 

libs/common-ui/src/lib/header/header.component.stories.ts

@@ -1,13 +1,43 @@
-import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj } from '@storybook/angular';
 import { HeaderComponent } from './header.component';
+import { ActivatedRoute } from '@angular/router';
 
 const meta: Meta<HeaderComponent> = {
   component: HeaderComponent,
   title: 'HeaderComponent',
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              url: [{ path: '/contact' }],
+              data: {},
+            },
+          },
+        },
+      ],
+    }),
+  ],
 };
 export default meta;
 type Story = StoryObj<HeaderComponent>;
 
 export const Primary: Story = {
-  args: {},
+  args: {
+    navLinks: [
+      { label: 'Home', url: '/', icon: 'home' },
+      { label: 'All Posts', url: '/posts', icon: 'article' },
+      {
+        label: 'About',
+        icon: 'info',
+        items: [
+          { label: 'Company', url: '/company', icon: 'business' },
+          { label: 'Team', url: '/team', icon: 'people' },
+        ],
+      },
+      { label: 'Contact', url: '/contact', icon: 'email' },
+    ],
+  },
 };

libs/common-ui/src/lib/header/header.component.ts

@@ -1,10 +1,28 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+export type NavLink = {
+  label: string;
+  icon?: string;
+} & (
+  | {
+      url: string;
+      items?: never;
+    }
+  | {
+      url?: never;
+      items: Array<Omit<NavLink, 'items'> & { url: string }>;
+    }
+);
 
 @Component({
   selector: 'common-ui-header',
-  imports: [CommonModule],
+  imports: [CommonModule, RouterLink, RouterLinkActive],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  public title = input.required<string>();
+  public navLinks = input.required<NavLink[]>();
+}