qanalytics/quantum-impact-nexus

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                :host {7                    display: block;8                    position: sticky;9                    top: 0;10                    z-index: 50;11                    background-color: rgba(0, 0, 0, 0.9);12backdrop-filter: blur(10px);13                    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);14                }15                16                nav {17                    max-width: 1200px;18                    margin: 0 auto;19                    padding: 1rem 2rem;20                    display: flex;21                    justify-content: space-between;22                    align-items: center;23                }24                .logo {25                    font-size: 1.5rem;26                    font-weight: 700;27                    color: white;28                    text-decoration: none;29                    display: flex;30                    align-items: center;31                }32.nav-links {33                    display: flex;34                    gap: 2rem;35                }36                .nav-links a {37                    text-decoration: none;38                    color: white;39                    font-weight: 500;40                    transition: color 0.2s;41                    opacity: 0.8;42                }43                44                .nav-links a:hover {45                    opacity: 1;46                }47.mobile-menu-button {48                    display: none;49                    background: none;50                    border: none;51                    cursor: pointer;52                }53                54                @media (max-width: 768px) {55                    .nav-links {56                        display: none;57                    }58                    59                    .mobile-menu-button {60                        display: block;61                    }62                }63            </style>64            <nav>65                <a href="/" class="logo">Q<span>ANALYTICS</span></a>66                <div class="nav-links">67                    <a href="#about">Who are we?</a>68                    <a href="#expertise">Our Expertise</a>69                    <a href="#solutions">Investment Solutions</a>70                    <a href="#contact">Contact</a>71                </div>72                <button class="mobile-menu-button">73                    <i data-feather="menu"></i>74                </button>75            </nav>76        `;77    }78}79 80customElements.define('custom-navbar', CustomNavbar);