Fix: Prevent navbar jump on button hover by stabilizing border and transition

Author: RAJVEER42

package.json

@@ -15,12 +15,15 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
-    "@docusaurus/plugin-content-docs": "3.7.0",
+    "@docusaurus/plugin-content-blog": "^3.8.1",
+    "@docusaurus/plugin-content-docs": "^3.8.1",
+    "@docusaurus/plugin-content-pages": "^3.8.1",
     "@docusaurus/plugin-google-analytics": "^3.8.1",
-    "@docusaurus/plugin-ideal-image": "3.7.0",
-    "@docusaurus/preset-classic": "3.7.0",
-    "@docusaurus/theme-mermaid": "3.7.0",
+    "@docusaurus/plugin-ideal-image": "^3.8.1",
+    "@docusaurus/plugin-sitemap": "^3.8.1",
+    "@docusaurus/preset-classic": "^3.8.1",
+    "@docusaurus/theme-classic": "^3.8.1",
+    "@docusaurus/theme-mermaid": "^3.8.1",
     "@docusaurus/theme-search-algolia": "3.7.0",
     "@floating-ui/react": "^0.27.8",
     "@giscus/react": "^3.1.0",
@@ -53,6 +56,7 @@
     "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
+    "@docusaurus/core": "^3.8.1",
     "@docusaurus/module-type-aliases": "3.7.0",
     "@docusaurus/tsconfig": "3.7.0",
     "@docusaurus/types": "3.7.0",

src/components/header/header.css

@@ -7,6 +7,17 @@
     padding: 3rem auto;
   }
 
+  .navbar {
+    background: rgba(255, 255, 255, 0.15); /* semi-transparent background */
+    backdrop-filter: blur(10px);           /* blur effect */
+    -webkit-backdrop-filter: blur(10px);   /* Safari support */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* optional subtle border */
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);         /* optional shadow */
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+  }
   .chh__header {
     display: flex;
     flex-direction: row;

src/components/ui/FirebaseAuthGithub.tsx

@@ -50,7 +50,7 @@ const FirebaseAuthGithub: React.FC = () => {
 
   return (
     <div style={{ textAlign: 'center' }} className='flex justify-center items-center gap-5 p-0'>
-      <button onClick={handleGithubSignIn} className="bg-black text-white px-4 py-2 rounded flex items-center gap-2">
+      <button onClick={handleGithubSignIn}  className="bg-black text-white px-4 py-2 rounded-md flex items-center gap-2 border border-transparent transition-colors duration-200 ease-in-out hover:bg-white hover:text-black hover:border-black">
         <svg height="24" width="24" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
         Sign in with GitHub
       </button>