// components/navbar.component.html
document.write(`
<nav class="navbar">
    <div class="nav-container">
        <a href="#home" class="logo">
            <span class="logo-icon">✨</span>
            <span class="logo-text">MK</span>
        </a>
        <div class="nav-links">
            <a href="#about" class="nav-link"> About</a>
            <a href="#skills" class="nav-link"> Skills</a>
            <a href="#projects" class="nav-link"> Projects</a>
            <a href="#experience" class="nav-link"> Experience</a>
            <a href="#contact" class="nav-link"> Contact</a>
        </div>
        <div class="nav-right">
            <button class="theme-toggle" aria-label="Toggle theme">
                <span class="theme-icon">
                    <i class="fas fa-moon"></i>
                    <i class="fas fa-sun"></i>
                </span>
            </button>
            <button class="menu-toggle" aria-label="Toggle menu">
                <div class="hamburger">
                    <span class="hamburger-line"></span>
                    <span class="hamburger-line"></span>
                    <span class="hamburger-line"></span>
                </div>
            </button>
        </div>
    </div>
</nav>
`);