components/nav.js

class QuickpayNav extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background-color: white;
                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
                    padding: 0.5rem 0;
                    z-index: 40;
                }
                .dark nav {
                    background-color: #1f2937;
                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
                }
                .nav-items {
                    display: flex;
                    justify-content: space-around;
                    max-width: 1200px;
                    margin: 0 auto;
                }
                .nav-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    color: #64748b;
                    text-decoration: none;
                    font-size: 0.75rem;
                    padding: 0.5rem 1rem;
                    border-radius: 0.5rem;
                    transition: all 0.2s ease;
                }
                .nav-item.active {
                    color: #0ea5e9;
                }
                .dark .nav-item {
                    color: #9ca3af;
                }
                .dark .nav-item.active {
                    color: #38bdf8;
                }
                .nav-icon {
                    margin-bottom: 0.25rem;
                }
            </style>
            <nav>
                <div class="nav-items">
                    <a href="#" class="nav-item active transform hover:scale-110">
<div class="nav-icon">
                            <i data-feather="home"></i>
                        </div>
                        <span>Home</span>
                    </a>
                    <a href="#" class="nav-item transform hover:scale-110">
<div class="nav-icon">
                            <i data-feather="credit-card"></i>
                        </div>
                        <span>Cards</span>
                    </a>
                    <a href="#" class="nav-item">
                        <div class="nav-icon">
                            <i data-feather="bar-chart-2"></i>
                        </div>
                        <span>Stats</span>
                    </a>
                    <a href="#" class="nav-item">
                        <div class="nav-icon">
                            <i data-feather="settings"></i>
                        </div>
                        <span>Settings</span>
                    </a>
                </div>
            </nav>
        `;
    }
}

customElements.define('quickpay-nav', QuickpayNav);