hammam/Ehsan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update navigation bar styling to match website design

Browse Source 
Adjusted header navigation links to use a specific green color (#1B8354) for active states, apply a rounded-bottom style, and ensure full height alignment for desktop and mobile views.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1fa9329f-0cec-4a2f-80e8-e26dbae3142e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 2a6b92e3-3fb4-4787-924d-1346b1911d6d
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/4d696b13-86f2-4c9d-be0d-95b293430047/1fa9329f-0cec-4a2f-80e8-e26dbae3142e/Z1jAExo
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
Replit Agent
2026-06-06 07:57:17 +00:00
parent a317cb1da0
commit 70aec36238
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/ehsan-poc/src/components/layout/Header.tsx
+15 -15
View File
@@ -120,12 +120,12 @@ export function Header() {
</Link> </Link>
{/* Desktop nav */} {/* Desktop nav */}
<nav className="hidden lg:flex items-center gap-1 flex-1 justify-center"> <nav className="hidden lg:flex items-stretch self-stretch gap-1 flex-1 justify-center">
<Link <Link
href="/" href="/"
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${ className={`px-4 flex items-center text-sm font-medium transition-colors ${
isActive("/") isActive("/")
? "bg-primary text-primary-foreground font-bold" ? "bg-[#1B8354] text-white font-bold rounded-b-lg"
: "text-foreground hover:text-primary" : "text-foreground hover:text-primary"
}`} }`}
data-testid="nav-home" data-testid="nav-home"
@@ -135,9 +135,9 @@ export function Header() {
<Link <Link
href="/waqf" href="/waqf"
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${ className={`px-4 flex items-center text-sm font-medium transition-colors ${
isActive("/waqf") isActive("/waqf")
? "bg-primary text-primary-foreground font-bold" ? "bg-[#1B8354] text-white font-bold rounded-b-lg"
: "text-foreground hover:text-primary" : "text-foreground hover:text-primary"
}`} }`}
data-testid="nav-waqf" data-testid="nav-waqf"
@@ -147,9 +147,9 @@ export function Header() {
<Link <Link
href="/opportunities" href="/opportunities"
className={`px-4 py-2 rounded-lg inline-flex items-center gap-1 text-sm transition-colors ${ className={`px-4 flex items-center gap-1 text-sm transition-colors ${
isActive("/opportunities") isActive("/opportunities")
? "bg-primary text-primary-foreground font-bold" ? "bg-[#1B8354] text-white font-bold rounded-b-lg"
: "text-foreground font-medium hover:text-primary" : "text-foreground font-medium hover:text-primary"
}`} }`}
data-testid="nav-opportunities" data-testid="nav-opportunities"
@@ -162,7 +162,7 @@ export function Header() {
ref={servicesTriggerRef} ref={servicesTriggerRef}
type="button" type="button"
onClick={() => setServicesOpen((v) => !v)} onClick={() => setServicesOpen((v) => !v)}
className={`px-3 py-2 inline-flex items-center gap-1 text-sm font-medium transition-colors ${ className={`px-3 flex items-center gap-1 text-sm font-medium transition-colors ${
servicesOpen ? "text-primary" : "text-foreground hover:text-primary" servicesOpen ? "text-primary" : "text-foreground hover:text-primary"
}`} }`}
data-testid="nav-services" data-testid="nav-services"
@@ -180,7 +180,7 @@ export function Header() {
ref={aboutTriggerRef} ref={aboutTriggerRef}
type="button" type="button"
onClick={() => setAboutOpen((v) => !v)} onClick={() => setAboutOpen((v) => !v)}
className={`px-3 py-2 inline-flex items-center gap-1 text-sm font-medium transition-colors ${ className={`px-3 flex items-center gap-1 text-sm font-medium transition-colors ${
aboutOpen || location.startsWith("/about") aboutOpen || location.startsWith("/about")
? "text-primary" ? "text-primary"
: "text-foreground hover:text-primary" : "text-foreground hover:text-primary"
@@ -198,9 +198,9 @@ export function Header() {
<Link <Link
href="/baraem" href="/baraem"
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${ className={`px-4 flex items-center text-sm font-medium transition-colors ${
isActive("/baraem") isActive("/baraem")
? "bg-primary text-primary-foreground font-bold" ? "bg-[#1B8354] text-white font-bold rounded-b-lg"
: "text-foreground hover:text-primary" : "text-foreground hover:text-primary"
}`} }`}
data-testid="nav-baraem" data-testid="nav-baraem"
@@ -369,7 +369,7 @@ export function Header() {
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${ className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
isActive("/") isActive("/")
? "bg-primary text-primary-foreground font-bold" ? "bg-[#1B8354] text-white font-bold"
: "text-foreground font-medium" : "text-foreground font-medium"
}`} }`}
> >
@@ -380,7 +380,7 @@ export function Header() {
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${ className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
isActive("/waqf") isActive("/waqf")
? "bg-primary text-primary-foreground font-bold" ? "bg-[#1B8354] text-white font-bold"
: "text-foreground font-medium" : "text-foreground font-medium"
}`} }`}
> >
@@ -391,7 +391,7 @@ export function Header() {
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${ className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
isActive("/opportunities") isActive("/opportunities")
? "bg-primary text-primary-foreground font-bold" ? "bg-[#1B8354] text-white font-bold"
: "text-foreground font-medium" : "text-foreground font-medium"
}`} }`}
> >
@@ -447,7 +447,7 @@ export function Header() {
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${ className={`block px-3 py-2 rounded-md text-sm hover:bg-muted ${
isActive("/baraem") isActive("/baraem")
? "bg-primary text-primary-foreground font-bold" ? "bg-[#1B8354] text-white font-bold"
: "text-foreground font-medium" : "text-foreground font-medium"
}`} }`}
> >