usr777/codeguardian-hub

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                }10                nav {11                    background: rgba(255, 255, 255, 0.8);12                    backdrop-filter: blur(10px);13                    border-bottom: 1px solid #d0d7de;14                }15                .dark nav {16                    background: rgba(36, 41, 47, 0.8);17                    border-bottom-color: #424a53;18                }19                .nav-link {20                    color: #57606a;21                    transition: color 0.2s;22                }23                .dark .nav-link {24                    color: #afb8c1;25                }26                .nav-link:hover {27                    color: #24292f;28                }29                .dark .nav-link:hover {30                    color: #f6f8fa;31                }32                @keyframes fadeIn {33                    from { opacity: 0; transform: translateY(-10px); }34                    to { opacity: 1; transform: translateY(0); }35                }36                .animate-fade-in {37                    animation: fadeIn 0.6s ease-out;38                }39            </style>40            <nav class="sticky top-0 z-50">41                <div class="max-w-6xl mx-auto px-4 py-4">42                    <div class="flex items-center justify-between">43                        <a href="#" class="flex items-center gap-2 text-xl font-semibold">44                            <i data-feather="shield"></i>45                            <span>CodeGuardian</span>46                        </a>47                        <div class="flex items-center gap-6">48                            <a href="#services" class="nav-link text-sm">Services</a>49                            <a href="#skills" class="nav-link text-sm">Skills</a>50                            <a href="#projects" class="nav-link text-sm">Projects</a>51                            <a href="#blog" class="nav-link text-sm">Blog</a>52                            <button id="themeToggle" class="p-2 rounded-lg hover:bg-github-100 dark:hover:bg-github-800 transition-colors">53                                <i data-feather="moon" class="w-4 h-4"></i>54                            </button>55                        </div>56                    </div>57                </div>58            </nav>59        `;60    }61}62 63customElements.define('custom-navbar', CustomNavbar);