feat: add shadow in the header

apps/website/src/app/app.routes.ts

@@ -1,4 +1,4 @@
-import { Routes } from '@angular/router';
+import type { Routes } from '@angular/router';
 import { LayoutComponent } from '@shared/components/layout/layout.component';
 import { NotFoundComponent } from '@shared/pages/not-found/not-found.component';
 
@@ -19,6 +19,13 @@ export const routes: Routes = [
             './domains/products/pages/product-detail/product-detail.component'
           ),
       },
+      {
+        path: 'locations',
+        loadComponent: () =>
+          import(
+            './domains/locations/locations.component'
+          ),
+      },
     ],
   },
   {

apps/website/src/app/domains/locations/locations.component.html

@@ -0,0 +1 @@
+<p>locations works!</p>

apps/website/src/app/domains/locations/locations.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-locations',
+  standalone: true,
+  imports: [],
+  templateUrl: './locations.component.html',
+  styleUrl: './locations.component.css'
+})
+export default class LocationsComponent {
+
+}

apps/website/src/app/domains/shared/components/header/header.component.html

@@ -1,4 +1,5 @@
-<nav>
+<nav class="shadow-md">
+  <div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
   <div class="w-full flex flex-wrap items-center justify-between mx-auto py-4">
     <div class="flex items-center space-x-8">
       <a href="https://nicobytes.store/" class="flex items-center">
@@ -22,6 +23,16 @@
             >All</a
           >
         </li>
+        <li>
+          <a
+            routerLink="/locations"
+            routerLinkActive="underline"
+            [routerLinkActiveOptions]="{ exact: true }"
+            class="block hover:underline"
+            aria-current="page"
+            >Locations</a
+          >
+        </li>
       </ul>
     </div>
     <div class="flex items-center">
@@ -48,6 +59,7 @@
       </button>
     </div>
   </div>
+</div>
 </nav>
 
 <div

apps/website/src/app/domains/shared/components/layout/layout.component.html

@@ -1,4 +1,4 @@
-<div class="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
-  <app-header />
+<app-header />
+<div class="max-w-8xl mx-auto p-4 sm:px-6 md:px-8">
   <router-outlet />
 </div>