ashiqforex78/codegenius-ai-studio

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                :host {7                    display: block;8                    width: 100%;9                    position: sticky;10                    top: 0;11                    z-index: 50;12                    background-color: rgba(17, 24, 39, 0.8);13                    backdrop-filter: blur(10px);14                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);15                }16                17                .navbar-container {18                    max-width: 1280px;19                    margin: 0 auto;20                    padding: 1rem 2rem;21                    display: flex;22                    justify-content: space-between;23                    align-items: center;24                }25                26                .logo {27                    display: flex;28                    align-items: center;29                    font-weight: 700;30                    font-size: 1.25rem;31                    color: white;32                    text-decoration: none;33                }34                35                .logo-icon {36                    color: #6366f1;37                    margin-right: 0.5rem;38                }39                40                .nav-links {41                    display: flex;42                    gap: 1.5rem;43                }44                45                .nav-link {46                    color: rgba(255, 255, 255, 0.8);47                    text-decoration: none;48                    font-weight: 500;49                    transition: color 0.2s;50                }51                52                .nav-link:hover {53                    color: white;54                }55                56                .nav-link.active {57                    color: #6366f1;58                }59                60                .mobile-menu-button {61                    display: none;62                    background: none;63                    border: none;64                    color: white;65                    cursor: pointer;66                }67                68                .mobile-menu {69                    display: none;70                    position: absolute;71                    top: 100%;72                    left: 0;73                    right: 0;74                    background-color: rgba(17, 24, 39, 0.98);75                    padding: 1rem;76                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);77                }78                79                .mobile-menu.open {80                    display: block;81                }82                83                .mobile-nav-links {84                    display: flex;85                    flex-direction: column;86                    gap: 1rem;87                }88                89                .mobile-nav-link {90                    color: rgba(255, 255, 255, 0.8);91                    text-decoration: none;92                    padding: 0.5rem 0;93                }94                95                .mobile-nav-link:hover {96                    color: white;97                }98                99                @media (max-width: 768px) {100                    .nav-links {101                        display: none;102                    }103                    104                    .mobile-menu-button {105                        display: block;106                    }107                }108            </style>109            110            <nav class="navbar-container">111                <a href="/" class="logo">112                    <i data-feather="code" class="logo-icon"></i>113                    CodeGenius114                </a>115                116                <div class="nav-links">117                    <a href="/features" class="nav-link">Features</a>118                    <a href="/pricing" class="nav-link">Pricing</a>119                    <a href="/docs" class="nav-link">Docs</a>120                    <a href="/examples" class="nav-link">Examples</a>121                    <a href="/login" class="nav-link">Sign In</a>122                    <a href="/signup" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md font-medium transition-colors">123                        Get Started124                    </a>125                </div>126                127                <button class="mobile-menu-button" id="mobile-menu-button">128                    <i data-feather="menu"></i>129                </button>130                131                <div class="mobile-menu hidden" id="mobile-menu">132                    <div class="mobile-nav-links">133                        <a href="/features" class="mobile-nav-link">Features</a>134                        <a href="/pricing" class="mobile-nav-link">Pricing</a>135                        <a href="/docs" class="mobile-nav-link">Docs</a>136                        <a href="/examples" class="mobile-nav-link">Examples</a>137                        <a href="/login" class="mobile-nav-link">Sign In</a>138                        <a href="/signup" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md font-medium transition-colors text-center mt-2">139                            Get Started140                        </a>141                    </div>142                </div>143            </nav>144        `;145        146        // Initialize feather icons147        const featherScript = document.createElement('script');148        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';149        this.shadowRoot.appendChild(featherScript);150        151        featherScript.onload = () => {152            if (window.feather) {153                window.feather.replace();154            }155        };156    }157}158 159customElements.define('custom-navbar', CustomNavbar);