andertsdb/subscriptionsense-pro

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                nav {7                    background-color: #6366f1;8                    color: white;9                    padding: 1rem 2rem;10                    display: flex;11                    justify-content: space-between;12                    align-items: center;13                }14                .logo {15                    font-weight: bold;16                    font-size: 1.25rem;17                }18                .theme-toggle {19                    background: none;20                    border: none;21                    color: white;22                    cursor: pointer;23                    font-size: 1rem;24                    display: flex;25                    align-items: center;26                }27                .theme-toggle i {28                    margin-right: 0.5rem;29                }30            </style>31            <nav>32                <div class="logo">SubscriptionSense Pro</div>33                <button class="theme-toggle" id="themeToggle">34                    <i class="fas fa-moon"></i>35                    <span>Dark Mode</span>36                </button>37            </nav>38        `;39 40        const themeToggle = this.shadowRoot.getElementById('themeToggle');41        themeToggle.addEventListener('click', () => {42            document.documentElement.classList.toggle('dark');43            const isDark = document.documentElement.classList.contains('dark');44            localStorage.setItem('darkMode', isDark);45            46            if (isDark) {47                themeToggle.innerHTML = '<i class="fas fa-sun"></i><span>Light Mode</span>';48            } else {49                themeToggle.innerHTML = '<i class="fas fa-moon"></i><span>Dark Mode</span>';50            }51        });52 53        // Load saved theme preference54        if (localStorage.getItem('darkMode') === 'true') {55            document.documentElement.classList.add('dark');56            themeToggle.innerHTML = '<i class="fas fa-sun"></i><span>Light Mode</span>';57        }58    }59}60 61customElements.define('custom-navbar', CustomNavbar);