make the background dark buttins movable with a drop down menu

components/profile-dropdown.js

@@ -0,0 +1,70 @@
+class ProfileDropdown extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: relative;
+          display: inline-block;
+        }
+        button {
+          background: transparent;
+          border: none;
+          color: white;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          transition: background 0.2s;
+        }
+        button:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+        .dropdown-content {
+          display: none;
+          position: absolute;
+          right: 0;
+          background-color: rgba(17, 24, 39, 0.95);
+          min-width: 160px;
+          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+          border-radius: 0.5rem;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          z-index: 1;
+          overflow: hidden;
+        }
+        .dropdown-content a {
+          color: white;
+          padding: 12px 16px;
+          text-decoration: none;
+          display: block;
+        }
+        .dropdown-content a:hover {
+          background-color: rgba(255, 255, 255, 0.1);
+        }
+        :host(:hover) .dropdown-content {
+          display: block;
+        }
+      </style>
+      <div>
+        <button>
+          <i data-feather="user"></i>
+          <i data-feather="chevron-down" class="w-4 h-4"></i>
+        </button>
+        <div class="dropdown-content">
+          <a href="/profile.html">Profile</a>
+          <a href="/settings.html">Settings</a>
+          <a href="/logout.html">Logout</a>
+        </div>
+      </div>
+    `;
+    
+    setTimeout(() => {
+      if (window.feather) {
+        feather.replace({ class: 'feather', width: 20, height: 20 });
+      }
+    }, 100);
+  }
+}
+customElements.define('profile-dropdown', ProfileDropdown);

index.html

@@ -80,13 +80,12 @@
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/ad-sidebar.js"></script>
-    
-    <script src="script.js"></script>
+    <script src="components/profile-dropdown.js"></script>
+<script src="script.js"></script>
     <script>
         feather.replace();
-        // Initialize Vanta.js globe
         VANTA.GLOBE({
-el: "#vanta-globe",
+            el: "#vanta-globe",
             mouseControls: true,
             touchControls: true,
             gyroControls: false,