components/sidebar.js

// TradeFlow Sidebar Component
class TFSidebar extends HTMLElement {
    constructor() {
        super();
        this.currentPage = this.getCurrentPage();
    }

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

    getCurrentPage() {
        const path = window.location.pathname;
        if (path.includes('exchanges')) return 'exchanges';
        if (path.includes('strategies')) return 'strategies';
        if (path.includes('logs')) return 'logs';
        if (path.includes('settings')) return 'settings';
        return 'dashboard';
    }

    render() {
        const navItems = [
            { id: 'dashboard', label: 'Dashboard', icon: 'layout', href: 'index.html' },
            { id: 'exchanges', label: 'Exchanges', icon: 'server', href: 'exchanges.html' },
            { id: 'strategies', label: 'Strategies', icon: 'code', href: 'strategies.html' },
            { id: 'logs', label: 'Signal Logs', icon: 'activity', href: 'logs.html' },
            { id: 'settings', label: 'Settings', icon: 'settings', href: 'settings.html' }
        ];

        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    height: 100vh;
                    position: relative;
                }

                .sidebar {
                    width: 280px;
                    height: 100%;
                    background: rgba(15, 23, 42, 0.8); /* slate-900 with opacity */
                    backdrop-filter: blur(10px);
                    border-right: 1px solid rgba(148, 163, 184, 0.1);
                    display: flex;
                    flex-direction: column;
                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .logo-section {
                    padding: 2rem 1.5rem;
                    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
                }

                .logo {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    font-size: 1.25rem;
                    font-weight: 800;
                    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }

                .nav-menu {
                    flex: 1;
                    padding: 1rem 0;
                }

                .nav-item {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 0.875rem 1.5rem;
                    margin: 0 0.75rem;
                    border-radius: 0.75rem;
                    text-decoration: none;
                    color: #94a3b8; /* slate-400 */
                    font-weight: 500;
                    transition: all 0.3s ease;
                    position: relative;
                }

                .nav-item:hover {
                    background: rgba(30, 41, 59, 0.6);
                    color: #f1f5f9; /* slate-100 */
                    transform: translateX(4px);
                }

                .nav-item.active {
                    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(139, 92, 246, 0.1));
                    color: #0ea5e9; /* sky-500 */
                    border-left: 4px solid #0ea5e9;
                }

                .nav-item.active::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 4px;
                    background: linear-gradient(to bottom, #0ea5e9, #8b5cf6);
                    border-radius: 0 4px 4px 0;
                }

                .nav-item div {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                }

                .version {
                    margin: 1.5rem;
                    padding: 0.75rem;
                    background: rgba(30, 41, 59, 0.4);
                    border-radius: 0.5rem;
                    text-align: center;
                    font-size: 0.75rem;
                    color: #64748b; /* slate-500 */
                }

                /* Mobile Overlay */
                .overlay {
                    position: fixed;
                    inset: 0;
                    background: rgba(2, 6, 23, 0.8);
                    z-index: 40;
                    display: none;
                }

                .overlay.active {
                    display: block;
                }

                @media (max-width: 768px) {
                    .sidebar {
                        position: fixed;
                        z-index: 50;
                        transform: translateX(-100%);
                    }
                    
                    .sidebar.active {
                        transform: translateX(0);
                    }
                }
            </style>

            <div class="overlay" id="overlay"></div>
            <aside class="sidebar" id="sidebar">
                <div class="logo-section">
                    <div class="logo">
                        <i data-feather="cpu" width="32" height="32"></i>
                        TradeFlow Bot
                    </div>
                </div>
                
                <nav class="nav-menu">
                    ${navItems.map(item => `
                        <a href="${item.href}" class="nav-item ${this.currentPage === item.id ? 'active' : ''}" data-page="${item.id}">
                            <div>
                                <i data-feather="${item.icon}" width="20" height="20"></i>
                                ${item.label}
                            </div>
                        </a>
                    `).join('')}
                </nav>

                <div class="version">
                    <i data-feather="git-commit" width="12" height="12"></i>
                    v2.1.0-alpha
                </div>
            </aside>
        `;
    }
}

customElements.define('tf-sidebar', TFSidebar);