<?php
/**
 * Shared logged-in-user sidebar. Include after $user is loaded.
 * Set $activeNav to one of: dashboard, payment_links, api_keys, integrations, profile, docs
 */
$activeNav = $activeNav ?? '';
?>
<div class="mobile-topbar">
    <div class="sidebar-logo"><span>⚡</span> Fam<span class="accent">API</span></div>
    <button class="hamburger-btn" onclick="toggleSidebar()">☰</button>
</div>
<div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>

<div class="sidebar" id="mainSidebar">
    <div class="sidebar-logo">
        <span>⚡</span> Fam<span class="accent">API</span>
        <button class="sidebar-close" onclick="toggleSidebar()">✕</button>
    </div>

    <div class="sidebar-section-label">Main</div>
    <a href="dashboard.php" class="sidebar-link <?= $activeNav === 'dashboard' ? 'active' : '' ?>"><span class="ico">📊</span> Dashboard</a>
    <a href="payment_links.php" class="sidebar-link <?= $activeNav === 'payment_links' ? 'active' : '' ?>"><span class="ico">🔗</span> Payment Links</a>
    <a href="dashboard.php#apiKeysSection" class="sidebar-link <?= $activeNav === 'api_keys' ? 'active' : '' ?>"><span class="ico">🔑</span> API Keys</a>

    <div class="sidebar-section-label">Settings</div>
    <a href="dashboard.php#integrations" class="sidebar-link <?= $activeNav === 'integrations' ? 'active' : '' ?>"><span class="ico">⚡</span> Integrations</a>
    <a href="profile.php" class="sidebar-link <?= $activeNav === 'profile' ? 'active' : '' ?>"><span class="ico">👤</span> Profile</a>
    <a href="docs.php" class="sidebar-link <?= $activeNav === 'docs' ? 'active' : '' ?>"><span class="ico">📖</span> Documentation</a>

    <div class="sidebar-footer">
        <?php if (!empty($user['avatar'])): ?>
            <img src="<?= htmlspecialchars($user['avatar']) ?>" class="sidebar-avatar" alt="">
        <?php else: ?>
            <div class="sidebar-avatar"><?= strtoupper(substr($user['name'] ?? 'U', 0, 1)) ?></div>
        <?php endif; ?>
        <div style="min-width:0;">
            <div class="sidebar-user-name"><?= htmlspecialchars($user['name']) ?></div>
            <div class="sidebar-user-email"><?= htmlspecialchars($user['email']) ?></div>
        </div>
    </div>
    <a href="logout.php" class="sidebar-signout" style="padding: 0 22px 18px;">↪ Sign Out</a>
</div>

<script>
    function toggleSidebar() {
        document.getElementById('mainSidebar').classList.toggle('open');
        document.getElementById('sidebarOverlay').classList.toggle('active');
    }
</script>
