components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background: rgba(255, 255, 255, 0.8);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(14, 165, 233, 0.2);
                }
                .nav-link {
                    color: #0c4a6e;
                    transition: all 0.3s ease;
                    position: relative;
                }
                .nav-link:hover {
                    color: #0ea5e9;
                    transform: translateY(-2px);
                }
                .nav-link::after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -4px;
                    left: 50%;
                    background: #0ea5e9;
                    transition: all 0.3s ease;
                    transform: translateX(-50%);
                }
                .nav-link:hover::after {
                    width: 100%;
                }
                .logo {
                    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }
            </style>
            <nav class="sticky top-0 z-50">
                <div class="container mx-auto px-4 py-4">
                    <div class="flex items-center justify-between">
                        <a href="/" class="text-2xl font-bold logo undefined-pulse">Undefined🌀</a>
                        <div class="hidden md:flex space-x-8">
                            <a href="/" class="nav-link font-medium">홈</a>
                            <a href="/admin.html" class="nav-link font-medium">관리자</a>
                            <a href="/deployment.html" class="nav-link font-medium">작업 배포</a>
                            <a href="/admin-detail.html" class="nav-link font-medium">관리 상세</a>
                            <a href="/worker.html" class="nav-link font-medium">작업자</a>
                            <a href="/sample.html" class="nav-link font-medium">샘플 데이터</a>
                        </div>
<div class="flex items-center space-x-4">
                            <button class="bg-undefined-500 hover:bg-undefined-600 text-white px-4 py-2 rounded-full text-sm font-medium transition-all duration-300">
                                Get Started
                            </button>
                            <button class="md:hidden">
                                <i data-feather="menu" class="text-undefined-700"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </nav>
        `;
    }
}

customElements.define('custom-header', CustomHeader);