geonsrx/equanimity-connects
0
1class CustomHeader extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 * {7 margin: 0;8 padding: 0;9 box-sizing: border-box;10 }11 12 .header {13 background: white;14 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);15 position: sticky;16 top: 0;17 z-index: 1000;18 transition: all 0.3s ease;19 }20 21 .container {22 max-width: 1200px;23 margin: 0 auto;24 padding: 0 1rem;25 }26 27 .nav-wrapper {28 display: flex;29 justify-content: space-between;30 align-items: center;31 padding: 1rem 0;32 }33 34 .logo {35 display: flex;36 align-items: center;37 font-size: 1.5rem;38 font-weight: bold;39 color: #1e3a5f;40 text-decoration: none;41 transition: transform 0.3s ease;42 }43 44 .logo:hover {45 transform: scale(1.05);46 }47 48 .logo-icon {49 width: 40px;50 height: 40px;51 margin-right: 0.5rem;52 background: linear-gradient(135deg, #1e3a5f, #0f766e);53 border-radius: 50%;54 display: flex;55 align-items: center;56 justify-content: center;57 color: white;58 font-size: 1.2rem;59 }60 61 .nav-menu {62 display: flex;63 list-style: none;64 gap: 2rem;65 align-items: center;66 }67 68 .nav-link {69 color: #1e3a5f;70 text-decoration: none;71 font-weight: 500;72 padding: 0.5rem 1rem;73 border-radius: 0.5rem;74 transition: all 0.3s ease;75 position: relative;76 }77 78 .nav-link:hover {79 color: #0f766e;80 background: rgba(15, 118, 110, 0.1);81 }82 83 .nav-link.active {84 color: #0f766e;85 background: rgba(15, 118, 110, 0.1);86 }87 88 .cta-button {89 background: linear-gradient(135deg, #65a30d, #16a34a);90 color: white;91 padding: 0.75rem 1.5rem;92 border-radius: 0.5rem;93 text-decoration: none;94 font-weight: 600;95 transition: all 0.3s ease;96 box-shadow: 0 4px 15px rgba(101, 163, 13, 0.3);97 }98 99 .cta-button:hover {100 transform: translateY(-2px);101 box-shadow: 0 6px 20px rgba(101, 163, 13, 0.4);102 }103 104 .mobile-menu-button {105 display: none;106 background: none;107 border: none;108 cursor: pointer;109 padding: 0.5rem;110 }111 112 .mobile-menu {113 display: none;114 position: absolute;115 top: 100%;116 left: 0;117 right: 0;118 background: white;119 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);120 border-top: 1px solid #e5e7eb;121 }122 123 .mobile-menu .nav-menu {124 flex-direction: column;125 padding: 1rem;126 gap: 0.5rem;127 }128 129 .mobile-menu .nav-link {130 width: 100%;131 padding: 1rem;132 border-radius: 0.5rem;133 }134 135 .mobile-menu .cta-button {136 margin-top: 1rem;137 width: 100%;138 text-align: center;139 }140 141 @media (max-width: 768px) {142 .mobile-menu-button {143 display: block;144 }145 146 .desktop-menu {147 display: none;148 }149 150 .mobile-menu.active {151 display: block;152 }153 }154 155 @media (min-width: 769px) {156 .mobile-menu {157 display: none !important;158 }159 }160 </style>161 162 <header class="header sticky-header">163 <div class="container">164 <nav class="nav-wrapper">165 <a href="index.html" class="logo">166 <div class="logo-icon">🌍</div>167 <span>Equanimity</span>168 </a>169 170 <ul class="nav-menu desktop-menu">171 <li><a href="index.html" class="nav-link">Home</a></li>172 <li><a href="employers.html" class="nav-link">Employers</a></li>173 <li><a href="workers.html" class="nav-link">Workers</a></li>174 <li><a href="about.html" class="nav-link">About</a></li>175 <li><a href="faq.html" class="nav-link">FAQ</a></li>176 <li><a href="contact.html" class="nav-link">Contact</a></li>177 <li><a href="employers.html" class="cta-button">Request Staff</a></li>178 </ul>179 180 <button class="mobile-menu-button">181 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">182 <line x1="3" y1="6" x2="21" y2="6"></line>183 <line x1="3" y1="12" x2="21" y2="12"></line>184 <line x1="3" y1="18" x2="21" y2="18"></line>185 </svg>186 </button>187 </nav>188 189 <div class="mobile-menu">190 <ul class="nav-menu">191 <li><a href="index.html" class="nav-link">Home</a></li>192 <li><a href="employers.html" class="nav-link">Employers</a></li>193 <li><a href="workers.html" class="nav-link">Workers</a></li>194 <li><a href="about.html" class="nav-link">About</a></li>195 <li><a href="faq.html" class="nav-link">FAQ</a></li>196 <li><a href="contact.html" class="nav-link">Contact</a></li>197 <li><a href="employers.html" class="cta-button">Request Staff</a></li>198 </ul>199 </div>200 </div>201 </header>202 `;203 204 // Set active nav link based on current page205 this.setActiveNavLink();206 207 // Add mobile menu toggle functionality208 const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu-button');209 const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');210 211 if (mobileMenuButton && mobileMenu) {212 mobileMenuButton.addEventListener('click', () => {213 mobileMenu.classList.toggle('active');214 });215 }216 217 // Close mobile menu when clicking on a link218 const navLinks = this.shadowRoot.querySelectorAll('.nav-link');219 navLinks.forEach(link => {220 link.addEventListener('click', () => {221 mobileMenu.classList.remove('active');222 });223 });224 }225 226 setActiveNavLink() {227 const currentPath = window.location.pathname.split('/').pop() || 'index.html';228 const navLinks = this.shadowRoot.querySelectorAll('.nav-link');229 230 navLinks.forEach(link => {231 const href = link.getAttribute('href');232 if (href === currentPath || (currentPath === '' && href === 'index.html')) {233 link.classList.add('active');234 } else {235 link.classList.remove('active');236 }237 });238 }239}240 241customElements.define('custom-header', CustomHeader);