Refactor: Header and Footer Links

- add searchbar, account and cart icon in navbar
- add navgiation links in footer
- make the text bigger in footer

src/app/core/layouts/footer/footer.html

@@ -1,6 +1,6 @@
-<footer class="bg-gray-900 text-gray-500 py-4 mt-4 gap-5 text-[0.60rem] wrapper">
+<footer class="bg-gray-900 text-gray-500 py-4 mt-4 gap-5 text-xs font-bold wrapper">
   <a href="/" class="px-3 py-1 bg-white text-gray-800 font-black font-space">eKart</a>
-  <div class="grid md:grid-cols-3 mt-2">
+  <div class="grid md:grid-cols-4 mt-2">
     <div class="footer-links">
       <a href="">
         <lucide-angular [img]="MailIcon" class="w-3" />
@@ -15,6 +15,14 @@
         St. Adam Street, 34, Rouja Chak</a
       >
     </div>
+
+    <div class="footer-links">
+      <a href="">Home</a>
+      <a href="">Products</a>
+      <a href="">About Us</a>
+      <a href="">Contact Us</a>
+    </div>
+
     <div class="footer-links">
       <a href="">Facebook: eKart</a>
       <a href="">Instagram: eKart</a>

src/app/core/layouts/header/header.html

@@ -1,28 +1,29 @@
 <header>
-  <nav class="wrapper py-4 flex justify-between items-center">
+  <nav class="wrapper py-4 flex gap-x-5 sm:gap-x-10 items-center">
     <div class="">
       <a href="/" class="px-3 py-1 bg-gray-800 text-white">eKart</a>
     </div>
+
+    <div class="flex-1 grid grid-cols-[1fr_auto]">
+      <input
+        type="text"
+        class="w-full border border-gray-300 text-sm rounded-full rounded-r-none px-6 py-1"
+        placeholder="Search watches, brands, products..."
+      />
+      <button class="btn-ghost group rounded-l-none! py-1 px-3 border-l-0!">
+        <lucide-angular
+          [img]="SearchIcon"
+          class="w-5 group-active:scale-80 transition-all duration-200 ease-out"
+        />
+      </button>
+    </div>
+
     <div class="flex space-x-4">
-      <ul class="flex space-x-4 font-medium font-space text-sm text-gray-600">
+      <div class="flex text-gray-600">
-        <li>
+        <button class="btn-ghost py-1 px-2 rounded-r-none!">
-          <a href="">Home</a>
+          <lucide-angular [img]="UserIcon" class="w-5" />
-        </li>
-        <li>
-          <a href="">Products</a>
-        </li>
-        <li>
-          <a href="">About Us</a>
-        </li>
-        <li>
-          <a href="">Contact Us</a>
-        </li>
-      </ul>
-      <div class="flex space-x-3 text-gray-600">
-        <button>
-          <lucide-angular [img]="UserIcon" class="w-5 te" />
         </button>
-        <button>
+        <button class="btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
           <lucide-angular [img]="CartIcon" class="w-5" />
         </button>
       </div>

src/app/core/layouts/header/header.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { LucideAngularModule, User, ShoppingCart } from 'lucide-angular';
+import { LucideAngularModule, User, ShoppingCart, Search } from 'lucide-angular';
 @Component({
   selector: 'app-header',
   imports: [LucideAngularModule],
@@ -9,4 +9,5 @@ import { LucideAngularModule, User, ShoppingCart } from 'lucide-angular';
 export class Header {
   readonly UserIcon = User;
   readonly CartIcon = ShoppingCart;
+  readonly SearchIcon = Search;
 }

src/styles.css

@@ -15,3 +15,7 @@
 .wrapper {
   @apply px-5 sm:px-15;
 }
+
+.btn-ghost {
+  @apply text-gray-600 flex justify-center border border-gray-300  rounded-full hover:bg-gray-800 hover:text-gray-200 transition-all duration-200 ease-out;
+}