From 32cd634c0f2533cda3acb9c2734b1a3dee5a9460 Mon Sep 17 00:00:00 2001 From: Replit Agent Date: Fri, 5 Jun 2026 18:52:51 +0000 Subject: [PATCH] Active nav green fill follows page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Task #12: Make the solid green fill the moving active-page indicator in the header nav, matching the real ehsan.sa (where the current page's nav item is filled solid green and that fill moves as you navigate). Changes (artifacts/ehsan-poc/src/components/layout/Header.tsx): - Desktop "الرئيسية" (Home): now solid green fill (bg-primary, white text, bold) only when on "/"; plain text otherwise. - Desktop "فرص التبرع" (Opportunities): removed the always-on green CTA background and the active ring/outline. Now plain text (keeps its chevron) when inactive, and solid green fill only when on "/opportunities". - Replaced the previous thin-outline/border active treatment on Home with the shared solid-green-fill active style so both links use one consistent indicator that moves with the route. - Mobile nav: Home and Opportunities links updated to the same moving solid-green active fill for cross-breakpoint consistency. Out of scope (unchanged): non-route placeholder items (الوقف، عن إحسان، براعم إحسان), the services mega-menu layout/contents and its trigger. Verified: tsc --noEmit clean; screenshots confirm green fill on الرئيسية at "/" and on فرص التبرع at "/opportunities" with the other reverting to plain text; console clean after workflow restart. No emojis. Bilingual unaffected. --- .../src/components/layout/Header.tsx | 24 +++++++++++------- attached_assets/image_1780685560287.png | Bin 0 -> 358694 bytes 2 files changed, 15 insertions(+), 9 deletions(-) create mode 100644 attached_assets/image_1780685560287.png diff --git a/artifacts/ehsan-poc/src/components/layout/Header.tsx b/artifacts/ehsan-poc/src/components/layout/Header.tsx index 463f965..0d8f844 100644 --- a/artifacts/ehsan-poc/src/components/layout/Header.tsx +++ b/artifacts/ehsan-poc/src/components/layout/Header.tsx @@ -88,10 +88,10 @@ export function Header() {