From f4d9c80f841d35f5b253c44a9431a47a687a4a2d Mon Sep 17 00:00:00 2001
From: Kartikey <kartikeypathak08@gmail.com>
Date: Fri, 15 May 2026 17:08:56 +0530
Subject: [PATCH] feat: add glassmorphism navbar with theme support

---
 src/App.tsx               |  2 +-
 src/components/Navbar.tsx | 27 ++++++++++++---------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b00eba8..d1a4e8c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ import ThemeWrapper from "./context/ThemeContext";
 function App() {
   return (
     <ThemeWrapper>
-      <div className="relative flex flex-col min-h-screen">
+      <div className="relative dark:bg-gray-800 flex flex-col min-h-screen">
         <ScrollProgressBar />
 
         <Navbar />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c6cc86d..3eb389f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -15,7 +15,7 @@ const Navbar: React.FC = () => {
   const { toggleTheme, mode } = themeContext;
 
   return (
-    <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
+    <nav className="sticky top-0 z-50 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
         {/* Logo Section */}
         <Link
@@ -30,31 +30,31 @@ const Navbar: React.FC = () => {
         <div className="hidden md:flex space-x-6">
           <Link
             to="/"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+            className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
           >
             Home
           </Link>
           <Link
             to="/track"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+            className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
           >
             Tracker
           </Link>
           <Link
             to="/contributors"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+            className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
           >
             Contributors
           </Link>
           <Link
             to="/login"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+            className="text-lg rounded-3xl font-medium hover:text-gray-300 transition-all px-3 py-1 border border-transparent hover:border-gray-400 rounded"
           >
             Login
           </Link>
           <button
             onClick={toggleTheme}
-            className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
+            className="text-sm font-semibold px-3 py-1 rounded-full text-center border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
           >
             {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
           </button>
@@ -67,19 +67,16 @@ const Navbar: React.FC = () => {
             className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
           >
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
-                isOpen ? "rotate-45 translate-y-2" : ""
-              }`}
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${isOpen ? "rotate-45 translate-y-2" : ""
+                }`}
             ></span>
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${
-                isOpen ? "opacity-0" : ""
-              }`}
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${isOpen ? "opacity-0" : ""
+                }`}
             ></span>
             <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
-                isOpen ? "-rotate-45 -translate-y-2" : ""
-              }`}
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${isOpen ? "-rotate-45 -translate-y-2" : ""
+                }`}
             ></span>
           </button>
         </div>