no i want a ggoood topbar not just text

components/navbar.js

@@ -1,33 +1,31 @@
+
 class CustomNavbar extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
         .navbar {
-          background: linear-gradient(90deg, rgba(17,24,39,0.95) 0%, rgba(37,99,235,0.15) 100%);
+          background: rgba(17, 24, 39, 0.95);
           backdrop-filter: blur(12px);
           box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
           border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         }
         .nav-link {
-          position: relative;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 8px 12px;
+          border-radius: 8px;
           transition: all 0.3s ease;
+          color: #9CA3AF;
         }
         .nav-link:hover {
+          background: rgba(88, 101, 242, 0.15);
           color: #5865F2;
         }
-        .nav-link::after {
-          content: '';
-          position: absolute;
-          bottom: -8px;
-          left: 0;
-          width: 0;
-          height: 2px;
-          background: #5865F2;
-          transition: width 0.3s ease;
-        }
-        .nav-link:hover::after {
-          width: 100%;
+        .nav-link.active {
+          background: rgba(88, 101, 242, 0.2);
+          color: #5865F2;
         }
         .mobile-menu {
           transition: all 0.3s ease;
@@ -42,64 +40,124 @@ class CustomNavbar extends HTMLElement {
           font-weight: 700;
         }
         .theme-toggle {
-          transition: transform 0.3s ease;
+          transition: all 0.3s ease;
+          background: rgba(88, 101, 242, 0.1);
         }
         .theme-toggle:hover {
-          transform: rotate(30deg);
+          background: rgba(88, 101, 242, 0.2);
         }
         .sign-in-btn {
           background: linear-gradient(90deg, #5865F2 0%, #8A2BE2 100%);
           transition: all 0.3s ease;
+          box-shadow: 0 4px 6px rgba(88, 101, 242, 0.2);
         }
         .sign-in-btn:hover {
           transform: translateY(-2px);
-          box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
+          box-shadow: 0 6px 12px rgba(88, 101, 242, 0.3);
+        }
+        .search-bar {
+          background: rgba(31, 41, 55, 0.5);
+          border: 1px solid rgba(75, 85, 99, 0.5);
+        }
+        .search-bar:focus {
+          border-color: #5865F2;
+        }
+        .user-avatar {
+          background: linear-gradient(135deg, #5865F2 0%, #8A2BE2 100%);
         }
       </style>
-<nav class="navbar border-b border-gray-800 fixed w-full z-10">
+      <nav class="navbar border-b border-gray-800 fixed w-full z-10">
         <div class="container mx-auto px-4">
-          <div class="flex justify-between items-center py-4">
-            <a href="index.html" class="flex items-center gap-2">
-              <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg">
-                <i data-feather="code" class="text-white w-5 h-5"></i>
-              </div>
-              <span class="text-xl font-bold logo-text">Code Wizardry</span>
-            </a>
-            
-            <div class="hidden md:flex items-center gap-8">
-              <a href="index.html" class="nav-link text-gray-300">Home</a>
-              <a href="#" class="nav-link text-gray-300">Categories</a>
-              <a href="#" class="nav-link text-gray-300">Top Scripts</a>
-              <a href="submit.html" class="nav-link text-gray-300">Submit</a>
+          <div class="flex justify-between items-center py-3">
+            <div class="flex items-center gap-6">
+              <a href="index.html" class="flex items-center gap-2">
+                <div class="w-9 h-9 bg-gradient-to-br from-primary-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg">
+                  <i data-feather="code" class="text-white w-4 h-4"></i>
+                </div>
+                <span class="text-xl font-bold logo-text">Script Haven</span>
+              </a>
               
-              <div class="flex items-center gap-4 ml-4">
-                <button id="theme-toggle" class="text-gray-400 hover:text-primary-500 p-2 rounded-full theme-toggle">
-                  <i data-feather="moon" class="w-5 h-5"></i>
-                </button>
-                <a href="#" class="sign-in-btn text-white px-5 py-2.5 rounded-lg text-sm font-medium">
-                  Sign In
+              <div class="hidden md:flex items-center gap-2">
+                <a href="index.html" class="nav-link active">
+                  <i data-feather="home" class="w-4 h-4"></i>
+                  <span>Home</span>
+                </a>
+                <a href="#" class="nav-link">
+                  <i data-feather="grid" class="w-4 h-4"></i>
+                  <span>Categories</span>
+                </a>
+                <a href="#" class="nav-link">
+                  <i data-feather="trending-up" class="w-4 h-4"></i>
+                  <span>Top Scripts</span>
+                </a>
+                <a href="submit.html" class="nav-link">
+                  <i data-feather="upload" class="w-4 h-4"></i>
+                  <span>Submit</span>
                 </a>
               </div>
             </div>
+
+            <div class="hidden md:flex items-center gap-4">
+              <div class="relative">
+                <input type="text" placeholder="Search scripts..." class="search-bar text-sm px-4 py-2 rounded-lg w-64 focus:outline-none focus:ring-2 focus:ring-primary-500/30">
+                <i data-feather="search" class="absolute right-3 top-2.5 text-gray-400 w-4 h-4"></i>
+              </div>
+
+              <button id="theme-toggle" class="theme-toggle text-gray-400 hover:text-primary-500 p-2 rounded-lg">
+                <i data-feather="moon" class="w-5 h-5"></i>
+              </button>
+
+              <div class="flex items-center gap-3">
+                <a href="#" class="sign-in-btn text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2">
+                  <i data-feather="log-in" class="w-4 h-4"></i>
+                  <span>Sign In</span>
+                </a>
+                <div class="w-8 h-8 rounded-full user-avatar flex items-center justify-center text-white text-sm font-medium cursor-pointer">
+                  <i data-feather="user" class="w-4 h-4"></i>
+                </div>
+              </div>
+            </div>
             <button id="mobile-menu-button" class="md:hidden text-gray-400 hover:text-primary-500 focus:outline-none transition-colors">
               <i data-feather="menu" class="w-6 h-6"></i>
             </button>
-</div>
+          </div>
         </div>
+
         <!-- Mobile menu -->
         <div id="mobile-menu" class="mobile-menu hidden md:hidden border-t border-gray-700">
-<div class="container mx-auto px-4 py-3">
+          <div class="container mx-auto px-4 py-3">
             <div class="flex flex-col space-y-3">
-              <a href="index.html" class="nav-link text-gray-300 py-3 px-4">Home</a>
-              <a href="#" class="nav-link text-gray-300 py-3 px-4">Categories</a>
-              <a href="#" class="nav-link text-gray-300 py-3 px-4">Top Scripts</a>
-              <a href="submit.html" class="nav-link text-gray-300 py-3 px-4">Submit</a>
-              <div class="pt-2 border-t border-gray-700 px-4 pb-4">
-                <a href="#" class="block text-center sign-in-btn text-white px-4 py-3 rounded-lg font-medium">
-                  Sign In
+              <div class="mb-3">
+                <input type="text" placeholder="Search scripts..." class="search-bar w-full text-sm px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500/30">
+              </div>
+              
+              <a href="index.html" class="nav-link active text-gray-300 py-2 px-4 flex items-center gap-2">
+                <i data-feather="home" class="w-4 h-4"></i>
+                <span>Home</span>
+              </a>
+              <a href="#" class="nav-link text-gray-300 py-2 px-4 flex items-center gap-2">
+                <i data-feather="grid" class="w-4 h-4"></i>
+                <span>Categories</span>
+              </a>
+              <a href="#" class="nav-link text-gray-300 py-2 px-4 flex items-center gap-2">
+                <i data-feather="trending-up" class="w-4 h-4"></i>
+                <span>Top Scripts</span>
+              </a>
+              <a href="submit.html" class="nav-link text-gray-300 py-2 px-4 flex items-center gap-2">
+                <i data-feather="upload" class="w-4 h-4"></i>
+                <span>Submit</span>
+              </a>
+
+              <div class="pt-2 border-t border-gray-700 px-4 pb-4 flex gap-3">
+                <button id="mobile-theme-toggle" class="theme-toggle text-gray-400 hover:text-primary-500 p-2 rounded-lg">
+                  <i data-feather="moon" class="w-5 h-5"></i>
+                </button>
+                <a href="#" class="flex-1 text-center sign-in-btn text-white px-4 py-2 rounded-lg font-medium flex items-center justify-center gap-2">
+                  <i data-feather="log-in" class="w-4 h-4"></i>
+                  <span>Sign In</span>
                 </a>
               </div>
-</div>
+            </div>
           </div>
         </div>
       </nav>
@@ -114,13 +172,48 @@ class CustomNavbar extends HTMLElement {
       feather.replace();
     });
 
+    // Theme toggle for both desktop and mobile
+    const themeToggle = this.shadowRoot.getElementById('theme-toggle');
+    const mobileThemeToggle = this.shadowRoot.getElementById('mobile-theme-toggle');
+    
+    const toggleTheme = () => {
+      const html = document.documentElement;
+      if (html.classList.contains('dark')) {
+        html.classList.remove('dark');
+        localStorage.setItem('theme', 'light');
+      } else {
+        html.classList.add('dark');
+        localStorage.setItem('theme', 'dark');
+      }
+    };
+
+    if (themeToggle) {
+      themeToggle.addEventListener('click', toggleTheme);
+    }
+
+    if (mobileThemeToggle) {
+      mobileThemeToggle.addEventListener('click', toggleTheme);
+    }
+
     // Close mobile menu when clicking outside
     document.addEventListener('click', (event) => {
       if (!this.shadowRoot.contains(event.target) && !mobileMenu.classList.contains('hidden')) {
         mobileMenu.classList.add('hidden');
       }
     });
+
+    // Highlight active nav link based on current page
+    const currentPath = window.location.pathname.split('/').pop() || 'index.html';
+    const navLinks = this.shadowRoot.querySelectorAll('.nav-link');
+    
+    navLinks.forEach(link => {
+      if (link.getAttribute('href') === currentPath) {
+        link.classList.add('active');
+      } else {
+        link.classList.remove('active');
+      }
+    });
   }
 }
 
-customElements.define('custom-navbar', CustomNavbar);
+customElements.define('custom-navbar', CustomNavbar);