From 1d8b86a321cca2ad72975a867eed2a8f8826287f Mon Sep 17 00:00:00 2001
From: shubh sahu <shubhsahu2006@gmail.com>
Date: Tue, 12 May 2026 23:36:46 +0530
Subject: [PATCH 1/3] Added responsive navbar with hamburger menu

---
 package-lock.json                | 34 ++++++++++-
 src/app/components/TopNavBar.tsx | 98 +++++++++++++++++++++-----------
 src/app/globals.css              |  5 ++
 tsconfig.json                    |  1 +
 4 files changed, 103 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4cb0ec1..6a831d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -96,6 +96,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
       "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -1639,6 +1640,7 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
       "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
+      "peer": true,
       "dependencies": {
         "immer": "^9.0.21",
         "redux": "^4.2.1",
@@ -1984,6 +1986,7 @@
       "version": "18.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
       "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
+      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2156,6 +2159,7 @@
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
       "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2670,6 +2674,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001489",
         "electron-to-chromium": "^1.4.411",
@@ -3630,6 +3635,7 @@
       "version": "8.41.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
       "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -3806,6 +3812,7 @@
       "version": "2.27.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
       "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -7403,6 +7410,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -7594,6 +7602,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7667,6 +7676,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -7690,6 +7700,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -7717,6 +7728,7 @@
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.7.tgz",
       "integrity": "sha512-1vRQuCQI5Y2uNmrMXg81RXKiBHY3jBzvCvNmZF437O/Z9/pZ+ba2uYHbemYXb3g8rjsacBGo+/wmfrQKzMhJsg==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
@@ -7809,6 +7821,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.9.2"
       }
@@ -8595,6 +8608,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
       "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -8841,6 +8855,7 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
       "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9329,6 +9344,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
       "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.21.4",
@@ -10501,6 +10517,7 @@
       "version": "1.9.5",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
       "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
+      "peer": true,
       "requires": {
         "immer": "^9.0.21",
         "redux": "^4.2.1",
@@ -10808,6 +10825,7 @@
       "version": "18.2.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
       "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
+      "peer": true,
       "requires": {
         "@types/react": "*"
       }
@@ -10931,7 +10949,8 @@
     "acorn": {
       "version": "8.8.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
-      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw=="
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "peer": true
     },
     "acorn-globals": {
       "version": "7.0.1",
@@ -11290,6 +11309,7 @@
       "version": "4.21.7",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz",
       "integrity": "sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==",
+      "peer": true,
       "requires": {
         "caniuse-lite": "^1.0.30001489",
         "electron-to-chromium": "^1.4.411",
@@ -12008,6 +12028,7 @@
       "version": "8.41.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
       "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
+      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
@@ -12142,6 +12163,7 @@
       "version": "2.27.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
       "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
+      "peer": true,
       "requires": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -14725,6 +14747,7 @@
       "version": "8.4.24",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
       "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "peer": true,
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -14838,6 +14861,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "peer": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -14884,6 +14908,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
@@ -14901,6 +14926,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -14921,6 +14947,7 @@
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.7.tgz",
       "integrity": "sha512-1vRQuCQI5Y2uNmrMXg81RXKiBHY3jBzvCvNmZF437O/Z9/pZ+ba2uYHbemYXb3g8rjsacBGo+/wmfrQKzMhJsg==",
+      "peer": true,
       "requires": {
         "@babel/runtime": "^7.12.1",
         "@types/hoist-non-react-statics": "^3.3.1",
@@ -14977,6 +15004,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "peer": true,
       "requires": {
         "@babel/runtime": "^7.9.2"
       }
@@ -15522,6 +15550,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
       "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "peer": true,
       "requires": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -15714,7 +15743,8 @@
     "typescript": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
-      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw=="
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "peer": true
     },
     "unbox-primitive": {
       "version": "1.0.2",
diff --git a/src/app/components/TopNavBar.tsx b/src/app/components/TopNavBar.tsx
index a3aa5c7..3e1bcc0 100644
--- a/src/app/components/TopNavBar.tsx
+++ b/src/app/components/TopNavBar.tsx
@@ -1,56 +1,88 @@
 "use client";
+import { useState } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import Image from "next/image";
+import { Menu, X } from "lucide-react";
 import logoSrc from "public/logo.svg";
 import { cx } from "lib/cx";
 
 export const TopNavBar = () => {
   const pathName = usePathname();
   const isHomePage = pathName === "/";
+  const [isOpen, setIsOpen] = useState(false);
+
+  const navLinks = [
+    ["/resume-builder", "Builder"],
+    ["/resume-parser", "Parser"],
+  ] as const;
 
   return (
     <header
       aria-label="Site Header"
       className={cx(
-        "flex h-[var(--top-nav-bar-height)] items-center border-b-2 border-gray-100 px-3 lg:px-12",
+        "border-b-2 border-gray-100 px-3 lg:px-12",
         isHomePage && "bg-dot"
       )}
     >
-      <div className="flex h-10 w-full items-center justify-between">
-        <Link href="/">
-          <span className="sr-only">OpenResume</span>
-          <Image
-            src={logoSrc}
-            alt="OpenResume Logo"
-            className="h-8 w-full"
-            priority
-          />
-        </Link>
+      <div className="flex min-h-[var(--top-nav-bar-height)] w-full flex-col justify-center">
+        <div className="flex h-10 w-full items-center justify-between gap-2">
+          <Link href="/" onClick={() => setIsOpen(false)}>
+            <span className="sr-only">OpenResume</span>
+            <Image
+              src={logoSrc}
+              alt="OpenResume Logo"
+              className="h-8 w-full"
+              priority
+            />
+          </Link>
+
+          <button
+            onClick={() => setIsOpen((prev) => !prev)}
+            className="inline-flex h-10 w-10 items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--theme-purple)] lg:hidden"
+            aria-label="Toggle Menu"
+            aria-expanded={isOpen}
+            aria-controls="mobile-navigation-menu"
+            type="button"
+          >
+            {isOpen ? <X size={20} aria-hidden="true" /> : <Menu size={20} aria-hidden="true" />}
+          </button>
+
+          <nav
+            aria-label="Site Nav Bar"
+            className="hidden items-center gap-2 text-sm font-medium lg:flex"
+          >
+            {navLinks.map(([href, text]) => (
+              <Link
+                key={text}
+                className="rounded-md px-1.5 py-2 text-gray-500 hover:bg-gray-100 focus-visible:bg-gray-100 lg:px-4"
+                href={href}
+              >
+                {text}
+              </Link>
+            ))}
+          </nav>
+        </div>
+
         <nav
-          aria-label="Site Nav Bar"
-          className="flex items-center gap-2 text-sm font-medium"
+          id="mobile-navigation-menu"
+          aria-label="Mobile Site Nav Bar"
+          className={cx(
+            "overflow-hidden transition-all duration-300 ease-out lg:hidden",
+            isOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0"
+          )}
         >
-          {[
-            ["/resume-builder", "Builder"],
-            ["/resume-parser", "Parser"],
-          ].map(([href, text]) => (
-            <Link
-              key={text}
-              className="rounded-md px-1.5 py-2 text-gray-500 hover:bg-gray-100 focus-visible:bg-gray-100 lg:px-4"
-              href={href}
-            >
-              {text}
-            </Link>
-          ))}
-          <div className="ml-1 mt-1">
-            <iframe
-              src="https://ghbtns.com/github-btn.html?user=xitanggg&repo=open-resume&type=star&count=true"
-              width="100"
-              height="20"
-              className="overflow-hidden border-none"
-              title="GitHub"
-            />
+          <div className="flex flex-col gap-1 pb-2 pt-3 text-sm font-medium">
+            {navLinks.map(([href, text]) => (
+              <Link
+                key={`mobile-${text}`}
+                className="rounded-md px-3 py-2 text-gray-600 transition-colors hover:bg-gray-100 focus-visible:bg-gray-100"
+                href={href}
+                onClick={() => setIsOpen(false)}
+              >
+                {text}
+              </Link>
+            ))}
           </div>
         </nav>
       </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index e7e5014..9ced5a2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -32,3 +32,8 @@
   --resume-control-bar-height: 3rem;
   --resume-padding: 1.5rem;
 }
+
+html,
+body {
+  overflow-x: hidden;
+}
diff --git a/tsconfig.json b/tsconfig.json
index e33ecf1..ad9d548 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,7 @@
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

From 4c21f4e66d1028702263e76364864ac80a8d51ce Mon Sep 17 00:00:00 2001
From: shubh sahu <shubhsahu2006@gmail.com>
Date: Tue, 12 May 2026 23:47:59 +0530
Subject: [PATCH 2/3] Added responsive navbar with hamburger menu

---
 src/app/components/TopNavBar.tsx | 38 ++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/app/components/TopNavBar.tsx b/src/app/components/TopNavBar.tsx
index 3e1bcc0..90d2d0d 100644
--- a/src/app/components/TopNavBar.tsx
+++ b/src/app/components/TopNavBar.tsx
@@ -17,17 +17,37 @@ export const TopNavBar = () => {
     ["/resume-parser", "Parser"],
   ] as const;
 
+  const getDesktopLinkClassName = (href: string) =>
+    cx(
+      "rounded-full px-4 py-2 text-sm font-medium transition-all duration-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--theme-purple)]",
+      pathName === href
+        ? "bg-primary shadow-sm"
+        : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+    );
+
+  const getMobileLinkClassName = (href: string) =>
+    cx(
+      "rounded-lg px-3 py-2.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--theme-purple)]",
+      pathName === href
+        ? "bg-primary"
+        : "text-gray-700 hover:bg-gray-100"
+    );
+
   return (
     <header
       aria-label="Site Header"
       className={cx(
-        "border-b-2 border-gray-100 px-3 lg:px-12",
+        "sticky top-0 z-40 border-b border-gray-200/80 bg-white/95 px-3 backdrop-blur supports-[backdrop-filter]:bg-white/80 lg:px-12",
         isHomePage && "bg-dot"
       )}
     >
       <div className="flex min-h-[var(--top-nav-bar-height)] w-full flex-col justify-center">
-        <div className="flex h-10 w-full items-center justify-between gap-2">
-          <Link href="/" onClick={() => setIsOpen(false)}>
+        <div className="flex h-11 w-full items-center justify-between gap-2">
+          <Link
+            href="/"
+            onClick={() => setIsOpen(false)}
+            className="rounded-md px-1 py-1 transition-opacity hover:opacity-90"
+          >
             <span className="sr-only">OpenResume</span>
             <Image
               src={logoSrc}
@@ -39,7 +59,7 @@ export const TopNavBar = () => {
 
           <button
             onClick={() => setIsOpen((prev) => !prev)}
-            className="inline-flex h-10 w-10 items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--theme-purple)] lg:hidden"
+            className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-700 shadow-sm transition-all hover:bg-gray-50 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--theme-purple)] lg:hidden"
             aria-label="Toggle Menu"
             aria-expanded={isOpen}
             aria-controls="mobile-navigation-menu"
@@ -50,12 +70,12 @@ export const TopNavBar = () => {
 
           <nav
             aria-label="Site Nav Bar"
-            className="hidden items-center gap-2 text-sm font-medium lg:flex"
+            className="hidden items-center gap-1 rounded-full border border-gray-200 bg-white/90 p-1 shadow-sm lg:flex"
           >
             {navLinks.map(([href, text]) => (
               <Link
                 key={text}
-                className="rounded-md px-1.5 py-2 text-gray-500 hover:bg-gray-100 focus-visible:bg-gray-100 lg:px-4"
+                className={getDesktopLinkClassName(href)}
                 href={href}
               >
                 {text}
@@ -69,14 +89,14 @@ export const TopNavBar = () => {
           aria-label="Mobile Site Nav Bar"
           className={cx(
             "overflow-hidden transition-all duration-300 ease-out lg:hidden",
-            isOpen ? "max-h-64 opacity-100" : "max-h-0 opacity-0"
+            isOpen ? "max-h-72 opacity-100" : "max-h-0 opacity-0"
           )}
         >
-          <div className="flex flex-col gap-1 pb-2 pt-3 text-sm font-medium">
+          <div className="mb-2 mt-2 flex flex-col gap-1 rounded-xl border border-gray-200 bg-white p-2 shadow-md">
             {navLinks.map(([href, text]) => (
               <Link
                 key={`mobile-${text}`}
-                className="rounded-md px-3 py-2 text-gray-600 transition-colors hover:bg-gray-100 focus-visible:bg-gray-100"
+                className={getMobileLinkClassName(href)}
                 href={href}
                 onClick={() => setIsOpen(false)}
               >

From 0a97053d465f415b6222a2b38cb65dddd06a2807 Mon Sep 17 00:00:00 2001
From: shubh sahu <shubhsahu2006@gmail.com>
Date: Fri, 15 May 2026 20:15:22 +0530
Subject: [PATCH 3/3] fix(nav): accessibility - hide closed mobile nav from
 keyboard and screen readers; style: scope overflow-x to navbar

---
 src/app/components/TopNavBar.tsx | 4 +++-
 src/app/globals.css              | 6 ++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/TopNavBar.tsx b/src/app/components/TopNavBar.tsx
index c4c5414..8ced7f4 100644
--- a/src/app/components/TopNavBar.tsx
+++ b/src/app/components/TopNavBar.tsx
@@ -61,7 +61,7 @@ export const TopNavBar = () => {
     <header
       aria-label="Site Header"
       className={cx(
-        "flex h-[var(--top-nav-bar-height)] items-center border-b-2 border-gray-100 bg-white px-3 dark:border-gray-700 dark:bg-black lg:px-12",
+        "sticky top-0 z-40 h-[var(--top-nav-bar-height)] flex items-center border-b border-gray-200/80 dark:border-gray-700 bg-white/95 dark:bg-black px-3 backdrop-blur supports-[backdrop-filter]:bg-white/80 lg:px-12 overflow-x-hidden",
         isHomePage && "bg-dot"
       )}
     >
@@ -80,6 +80,8 @@ export const TopNavBar = () => {
         <nav
           id="mobile-navigation-menu"
           aria-label="Mobile Site Nav Bar"
+          aria-hidden={!isOpen}
+          tabIndex={isOpen ? 0 : -1}
           className={cx(
             "overflow-hidden transition-all duration-300 ease-out lg:hidden",
             isOpen ? "max-h-72 opacity-100" : "max-h-0 opacity-0"
diff --git a/src/app/globals.css b/src/app/globals.css
index 9ced5a2..9edd3e0 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -33,7 +33,5 @@
   --resume-padding: 1.5rem;
 }
 
-html,
-body {
-  overflow-x: hidden;
-}
+/* Removed global overflow-x to avoid hiding horizontal scroll globally.
+   Scoped overflow-x-hidden will be applied to the navbar container instead. */