Feat: Add visual highlighting to the currently active navigation link (#131)

* chore: upgrade deps

* refactor: remove unnecessary copy

* Add visual highlighting to the currently active navigation link

* fix: failed CI

* fix: ci

Author: haricnugraha

.github/workflows/e2e.yml

@@ -29,13 +29,6 @@ jobs:
       - name: Build app
         run: bun run build
 
-      - name: Start server
-        run: npx serve@latest out -l 3001 &
-        shell: bash
-
-      - name: Wait for server to be ready
-        run: npx wait-on http://localhost:3001 --timeout 60000
-
       - name: Run E2E tests (headless)
         env:
           CI: true

.github/workflows/pr.yml

@@ -35,7 +35,7 @@ jobs:
       - uses: oven-sh/setup-bun@v2
 
       - name: Install dependencies
-        run: bun install
+        run: bun install --frozen-lockfile
 
       - name: Install Puppeteer and serve
         run: bun install puppeteer serve
@@ -47,7 +47,7 @@ jobs:
         id: screenshots
         run: |
           # Start the server in the background
-          npx serve out -p 3000 &
+          bun run start &
           # Wait longer for server to start
           sleep 10
           # Take screenshots

app/[lang]/(hyperjump)/components/nav.tsx

@@ -83,21 +83,34 @@ export default function Nav({ lang }: NavProps) {
           <CenterNavItems>
             <NavigationMenu className="mx-8 xl:mx-0">
               <NavigationMenuList className="flex items-center space-x-8">
-                {menu(lang).map(({ href, label }) => (
-                  <NavigationMenuItem key={label} className="flex items-center">
-                    <Link
-                      href={href}
-                      onClick={() => setIsOpen(false)}
-                      className={cn(
-                        "text-xl font-medium transition duration-300",
-                        isTransparent
-                          ? "group-data-[scroll=true]:text-hyperjump-black hover:group-data-[scroll=true]:text-hyperjump-blue group-data-[scroll=false]:text-white hover:group-data-[scroll=false]:border-b-2"
-                          : "text-hyperjump-black hover:text-hyperjump-blue"
-                      )}>
-                      {label}
-                    </Link>
-                  </NavigationMenuItem>
-                ))}
+                {menu(lang).map(({ href, label }) => {
+                  const isActive = pathname.startsWith(href);
+
+                  return (
+                    <NavigationMenuItem
+                      key={label}
+                      className="flex items-center">
+                      <Link
+                        href={href}
+                        onClick={() => setIsOpen(false)}
+                        className={cn(
+                          "text-xl font-medium transition duration-300",
+                          isTransparent &&
+                            isActive &&
+                            "group-data-[scroll=true]:text-hyperjump-blue group-data-[scroll=false]:border-b-2",
+                          isTransparent &&
+                            !isActive &&
+                            "group-data-[scroll=true]:text-hyperjump-black hover:group-data-[scroll=true]:text-hyperjump-blue group-data-[scroll=false]:text-white hover:group-data-[scroll=false]:border-b-2",
+                          !isTransparent && isActive && "text-hyperjump-blue",
+                          !isTransparent &&
+                            !isActive &&
+                            "text-hyperjump-black hover:text-hyperjump-blue"
+                        )}>
+                        {label}
+                      </Link>
+                    </NavigationMenuItem>
+                  );
+                })}
               </NavigationMenuList>
             </NavigationMenu>
           </CenterNavItems>
@@ -143,15 +156,21 @@ export default function Nav({ lang }: NavProps) {
       {isOpen && (
         <div className="bg-white shadow-md lg:hidden">
           <div className="mx-auto flex w-full flex-col space-y-4 px-4 py-5 md:px-20 xl:px-0">
-            {menu(lang).map(({ href, label }) => (
-              <Link
-                key={label}
-                href={href}
-                className="text-hyperjump-black text-2xl transition hover:text-gray-400"
-                onClick={() => setIsOpen(false)}>
-                {label}
-              </Link>
-            ))}
+            {menu(lang).map(({ href, label }) => {
+              const isActive = pathname.startsWith(href);
+              return (
+                <Link
+                  key={label}
+                  href={href}
+                  className={cn(
+                    "text-2xl transition hover:text-gray-400",
+                    isActive ? "text-hyperjump-blue" : "text-hyperjump-black"
+                  )}
+                  onClick={() => setIsOpen(false)}>
+                  {label}
+                </Link>
+              );
+            })}
           </div>
         </div>
       )}

bun.lock

@@ -17,7 +17,7 @@
       },
       "3": {
         "title": "Voxa",
-        "text": "Short description: Voxa helps you reach prospects over the phone with natural AI voices, smart lead targeting, and automated call flows."
+        "text": "Voxa helps you reach prospects over the phone with natural AI voices, smart lead targeting, and automated call flows."
       }
     }
   },

locales/en/products.json

@@ -17,7 +17,7 @@
       },
       "3": {
         "title": "Voxa",
-        "text": "Deskripsi singkat: Voxa membantu Anda menjangkau prospek melalui panggilan telepon dengan suara AI yang natural, penargetan prospek cerdas, dan alur panggilan otomatis."
+        "text": "Voxa membantu Anda menjangkau prospek melalui panggilan telepon dengan suara AI yang natural, penargetan prospek cerdas, dan alur panggilan otomatis."
       }
     }
   },