components/nav-component.js

class NavComponent extends HTMLElement {
    constructor() {
        super();
        this.isMenuOpen = false;
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        this.setupEventListeners();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: sticky;
                    top: 0;
                    z-index: 1000;
                }

                nav {
                    background: rgba(17, 24, 39, 0.95);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(245, 158, 11, 0.1);
                }

                .nav-container {
                    max-width: 1280px;
                    margin: 0 auto;
                    padding: 0 1rem;
                }

                .nav-content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 4rem;
                }

                .logo {
                    display: flex;
                    align-items: center;
                    font-size: 1.5rem;
                    font-weight: bold;
                    color: #f59e0b;
                    text-decoration: none;
                }

                .logo i {
                    margin-right: 0.5rem;
                }

                .nav-links {
                    display: none;
                    gap: 2rem;
                }

                .nav-link {
                    color: #d1d5db;
                    text-decoration: none;
                    font-weight: 500;
                    transition: color 0.2s;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .nav-link:hover {
                    color: #f59e0b;
                }

                .nav-link.active {
                    color: #f59e0b;
                }

                .mobile-menu-button {
                    display: block;
                    background: none;
                    border: none;
                    color: #d1d5db;
                    cursor: pointer;
                    padding: 0.5rem;
                }

                .mobile-menu {
                    display: none;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    right: 0;
                    background: rgba(17, 24, 39, 0.98);
                    border-top: 1px solid rgba(245, 158, 11, 0.1);
                    padding: 1rem;
                }

                .mobile-menu.open {
                    display: block;
                }

                .mobile-nav-links {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }

                .mobile-nav-link {
                    color: #d1d5db;
                    text-decoration: none;
                    font-weight: 500;
                    padding: 0.5rem 0;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .mobile-nav-link:hover {
                    color: #f59e0b;
                }

                .mobile-nav-link.active {
                    color: #f59e0b;
                }

                @media (min-width: 768px) {
                    .nav-links {
                        display: flex;
                    }
                    
                    .mobile-menu-button {
                        display: none;
                    }
                    
                    .mobile-menu {
                        display: none !important;
                    }
                }

                .feather {
                    width: 20px;
                    height: 20px;
                }
            </style>

            <nav>
                <div class="nav-container">
                    <div class="nav-content">
                        <a href="#home" class="logo">
                            <i data-feather="book-open"></i>
                            PaperVault
                        </a>
                        
                        <div class="nav-links">
                            <a href="#home" class="nav-link active