its the exact same website

components/navbar.js

@@ -1,5 +1,93 @@
+
 class CustomNavbar extends HTMLElement {
+  constructor() {
+    super();
+    this.isMobileMenuOpen = false;
+  }
+  
   connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    
+    const menuButton = this.shadowRoot.querySelector('.mobile-menu-button');
+    menuButton.addEventListener('click', () => this.toggleMobileMenu());
+  }
+  
+  toggleMobileMenu() {
+    this.isMobileMenuOpen = !this.isMobileMenuOpen;
+    const menu = this.shadowRoot.querySelector('.mobile-menu');
+    menu.classList.toggle('open', this.isMobileMenuOpen);
+  }
+  
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        /* Previous styles remain the same */
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          background: rgba(255, 255, 255, 0.98);
+          backdrop-filter: blur(10px);
+          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+          transition: all 0.3s ease;
+        }
+        
+        /* Add the new mobile menu styles here */
+        .mobile-menu {
+          display: none;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: white;
+          z-index: 1000;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 2rem;
+          padding: 2rem;
+        }
+        
+        .mobile-menu.open {
+          display: flex;
+        }
+      </style>
+      
+      <div class="navbar-container">
+        <a href="/">
+          <img src="//images.squarespace-cdn.com/content/v1/685a95ba7148ac0764b72458/d6945097-31b0-4bad-8c6a-b583eacf0745/SS_logo.png?format=1500w" alt="SafeSwitch" class="logo">
+        </a>
+        
+        <div class="nav-links">
+          <a href="/#privatpersoner" class="nav-link">För privatpersoner</a>
+          <a href="/#foretag" class="nav-link">För företag</a>
+          <a href="/#about" class="nav-link">Om oss</a>
+          <a href="/#nyheter" class="nav-link">Nyheter</a>
+          <a href="/#bokademo" class="cta-button">Boka demo</a>
+        </div>
+        
+        <button class="mobile-menu-button" aria-label="Toggle menu">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="mobile-menu">
+        <a href="/#privatpersoner" class="nav-link">För privatpersoner</a>
+        <a href="/#foretag" class="nav-link">För företag</a>
+        <a href="/#about" class="nav-link">Om oss</a>
+        <a href="/#nyheter" class="nav-link">Nyheter</a>
+        <a href="/#bokademo" class="cta-button">Boka demo</a>
+      </div>
+    `;
+  }
+connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
@@ -75,15 +163,34 @@ class CustomNavbar extends HTMLElement {
           transform: translateY(-2px);
           box-shadow: 0 4px 12px rgba(58, 90, 255, 0.25);
         }
-        
         .mobile-menu-button {
           display: none;
           background: none;
           border: none;
           cursor: pointer;
+          z-index: 1001;
+        }
+        
+        .mobile-menu {
+          display: none;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: white;
+          z-index: 1000;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 2rem;
+          padding: 2rem;
         }
         
-        @media (max-width: 768px) {
+        .mobile-menu.open {
+          display: flex;
+        }
+@media (max-width: 768px) {
           .nav-links {
             display: none;
           }
@@ -105,10 +212,17 @@ class CustomNavbar extends HTMLElement {
           <a href="/#about" class="nav-link">Om oss</a>
           <a href="/#nyheter" class="nav-link">Nyheter</a>
           <a href="/#bokademo" class="cta-button">Boka demo</a>
-        </div>
-        
-        <button class="mobile-menu-button">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+      </div>
+      
+      <div class="mobile-menu">
+        <a href="/#privatpersoner" class="nav-link">För privatpersoner</a>
+        <a href="/#foretag" class="nav-link">För företag</a>
+        <a href="/#about" class="nav-link">Om oss</a>
+        <a href="/#nyheter" class="nav-link">Nyheter</a>
+        <a href="/#bokademo" class="cta-button">Boka demo</a>
+      </div>
+<button class="mobile-menu-button" aria-label="Toggle menu">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
           </svg>
         </button>

index.html

@@ -4,7 +4,8 @@
   <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- This is Squarespace. --><!-- trout-turkey-5yx3 -->
+    <custom-navbar></custom-navbar>
+    <script src="components/navbar.js"></script>
 <base href="">
 <meta charset="utf-8" />
 <title>SafeSwitch</title>