Working navbar 99%

src/app/globals.css

@@ -28,8 +28,6 @@ body {
 
 body {
   margin: 0;
-  margin-top: 8em;
-  margin-top: 0;
   padding: 0;
   background-color: #f0f0f0; /* Optional background color */
   font-family: Arial, sans-serif;

src/components/navbar.module.css

@@ -1,87 +1,18 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* navbar.module.css */
 
-
-.navbar {
-    /* position: fixed;
-    @apply transition-all duration-300 top-6 left-6 right-6; */
-    /* background-color: white;
-    border-radius: 0px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1em 2em;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 1000; */
+.navBar {
+    @apply top-6 left-6 right-6 transition-all duration-300 z-50;
   }
   
-/*   .navbar a {
-    color: black;
-    text-decoration: none;
-    margin: 0 0.5em;
-    font-size: 1em;
+  .navBarInitial {
+    @apply bg-transparent text-white absolute;
   }
   
-  .navbar a:hover {
-    color: #555;
+  .navBarScrolledUp {
+    @apply bg-white text-black rounded-lg shadow-lg fixed;
   }
   
-  .left,
-  .right {
-    display: flex;
-    align-items: center;
-  }
-  
-  .navbar .center a {
-    color: black;
-    text-decoration: none;
-    margin: 0 0;
-    font-size: 1em;
-  }
-  .center .logo {
-    height: 50px; /* Adjust the logo size as needed */
-  }
-  
-  .navbar-center .logo {
-    height: 50px; /* Adjust the logo size as needed */
-  }
-  
-  .fa-search,
-  .fa-user {
-    font-size: 1.2em;
-  }
-  
-  @media screen and (max-width: 768px) {
-    .navbar {
-      top: 1em;
-      left: 1em;
-      right: 1em;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  
-    .navbar-center {
-      margin: 1em 0;
-      align-self: center;
-    }
-  }
-  
-  .navbar a.active {
-    font-weight: bold;
-    border-bottom: 2px solid black;
-  }
-  
-  .navbar {
-    border-radius: 25px; /* Makes the corners more rounded */
-  }
-  
-  .navbar a {
-    font-size: 1.1em;
-  }
-  
-  .fa-search,
-  .fa-user {
-    font-size: 1.4em;
-  }
-   */
+  /* Custom style */
+  .navBarScrolledUp {
+    backdrop-filter: blur(10px); /* Adds a blur effect */
+  }

src/components/navbar.tsx

@@ -29,13 +29,12 @@ export default function Navbar() {
   return () => window.removeEventListener('scroll', handleScroll);
 }, []); // Empty dependency array
 
-const navClasses =
-navBarStyle === 'scrolledUp'
-  ? 'bg-white text-black rounded-b-lg shadow-lg fixed'
-  : 'bg-transparent text-white';
+const navClasses = `${styles.navBar} ${
+  navBarStyle === 'scrolledUp' ? styles.navBarScrolledUp : styles.navBarInitial
+}`;
 
   return (
-    <nav       className={`navbar fixed top-6 left-6 right-6 transition-all duration-300 ${navClasses} z-50`}>
+    <nav className={navClasses}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           {/* Left side */}