Dhanesh1/codegenius-your-ai-code-wizard

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                nav {7                    background-color: white;8                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);9                }10                11                .nav-container {12                    max-width: 1200px;13                    margin: 0 auto;14                    padding: 1rem 2rem;15                }16                17                .logo {18                    font-weight: 700;19                    font-size: 1.5rem;20                    background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);21                    -webkit-background-clip: text;22                    -webkit-text-fill-color: transparent;23                }24                25                .nav-links a {26                    color: #4B5563;27                    transition: color 0.2s;28                }29                30                .nav-links a:hover {31                    color: #6366F1;32                }33                34                @media (max-width: 768px) {35                    .nav-container {36                        padding: 1rem;37                    }38                    39                    .nav-links {40                        display: none;41                    }42                }43            </style>44            <nav>45                <div class="nav-container flex justify-between items-center">46                    <a href="#" class="logo flex items-center">47                        <i data-feather="zap" class="mr-2"></i>48                        CodeGenius49                    </a>50                    <div class="nav-links flex space-x-8">51                        <a href="#" class="flex items-center">52                            <i data-feather="home" class="mr-1"></i>53                            Home54                        </a>55                        <a href="#" class="flex items-center">56                            <i data-feather="code" class="mr-1"></i>57                            Examples58                        </a>59                        <a href="#" class="flex items-center">60                            <i data-feather="info" class="mr-1"></i>61                            About62                        </a>63                    </div>64                    <i data-feather="menu" class="md:hidden"></i>65                </div>66            </nav>67        `;68    }69}70 71customElements.define('custom-navbar', CustomNavbar);