Update the nav elements active status using Pathname

.gitignore

@@ -40,3 +40,5 @@ next-env.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+.env

src/app/repo/status/page.js

@@ -12,6 +12,7 @@ import List from "@/components/List";
 import checks from "@/utils/checks/index";
 import Stats from "@/components/Stats";
 
+
 const repo = {
   id: 405139301,
   node_id: "MDEwOlJlcG9zaXRvcnk0MDUxMzkzMDE=",
@@ -195,7 +196,7 @@ const repo = {
   subscribers_count: 54,
 };
 
-const results = checks(repo);
+  const results = checks(repo);
 
 export default function Page() {
   return (

src/components/Header.js

@@ -1,3 +1,4 @@
+'use client'
 import {
   Disclosure,
   DisclosureButton,
@@ -15,6 +16,8 @@ import Image from "next/image";
 import logo from "../../public/logo.svg";
 import classNames from "@/utils/classNames";
 
+import { usePathname } from "next/navigation";
+
 const navigation = [
   { name: "Home", href: "/", current: true },
   { name: "Add", href: "/repo/add", current: false },
@@ -37,6 +40,10 @@ export default function Header({ session, user }) {
       { name: "Sign Out", href: "#" },
     ];
   }
+
+
+  const path = usePathname();
+
   return (
     <Disclosure as="header" className="bg-gray-800">
       <div className="mx-auto max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-700 lg:px-8">
@@ -127,7 +134,7 @@ export default function Header({ session, user }) {
                     <MenuItem key={item.name}>
                       <Link
                         href={item.href}
-                        className="block px-4 py-2 text-sm text-gray-700 data-[focus]:bg-gray-100"
+                        className='block px-4 py-2 text-sm text-gray-700 data-[focus]:bg-gray-100 active:bg-gray-700 active:text-white'
                       >
                         {item.name}
                       </Link>
@@ -146,14 +153,13 @@ export default function Header({ session, user }) {
             <Link
               key={item.name}
               href={item.href}
-              aria-current={item.current ? "page" : undefined}
-              className={classNames(
-                item.current
-                  ? "bg-gray-900 text-white"
-                  : "text-gray-300 hover:bg-gray-700 hover:text-white",
-                "inline-flex items-center rounded-md px-3 py-2 text-sm font-medium"
-              )}
+              className={`inline-flex items-center rounded-md px-3 py-2 text-sm font-medium ${
+                path === item.href ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"
+              }`}
+
+
             >
+
               {item.name}
             </Link>
           ))}
@@ -167,13 +173,10 @@ export default function Header({ session, user }) {
               key={item.name}
               as="a"
               href={item.href}
-              aria-current={item.current ? "page" : undefined}
-              className={classNames(
-                item.current
-                  ? "bg-gray-900 text-white"
-                  : "text-gray-300 hover:bg-gray-700 hover:text-white",
-                "block rounded-md px-3 py-2 text-base font-medium"
-              )}
+              className={`
+                ${path === item.href ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"}
+                block rounded-md px-3 py-2 text-base font-medium
+              `}
             >
               {item.name}
             </DisclosureButton>

src/utils/checks/index.js

@@ -5,6 +5,7 @@ import issues from "./issues";
 import topics from "./topics";
 import url from "./url";
 
+
 export default function checks(repo) {
   const checks = [
     description(repo),
@@ -15,7 +16,9 @@ export default function checks(repo) {
     defaultBranch(repo),
   ];
 
+
   const summary = Object.groupBy(checks, ({ status }) => status);
+
 
   return { checks, summary };
 }

src/utils/checks/issues.js

@@ -27,5 +27,6 @@ export default function issues(repo) {
       "Try creating some more, or asking the community for ideas.";
   }
 
+
   return response;
 }