joydip.manna/ekart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Header and Footer Links

Browse Source 
- add searchbar, account and cart icon in navbar
- add navgiation links in footer
- make the text bigger in footer
This commit is contained in:
kusowl 2026-02-19 11:33:07 +05:30
parent 76754801bd
commit 2ed7cc7b86
4 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/core/layouts/footer/footer.html
View File

@ -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>

41
src/app/core/layouts/header/header.html
View File

@ -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 space-x-4">
<ul class="flex space-x-4 font-medium font-space text-sm text-gray-600">
<li>
<a href="">Home</a>
</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" />
<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>
<button>
</div>
<div class="flex space-x-4">
<div class="flex text-gray-600">
<button class="btn-ghost py-1 px-2 rounded-r-none!">
<lucide-angular [img]="UserIcon" class="w-5" />
</button>
<button class="btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
<lucide-angular [img]="CartIcon" class="w-5" />
</button>
</div>

3
src/app/core/layouts/header/header.ts
View File

@ -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;
}

4
src/styles.css
View File

@ -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;
}