<nav class="sidebar" id="sidebar">
    <script>
        (function() {
            if (localStorage.getItem('sidebar-collapsed') === 'true') {
                document.getElementById('sidebar').classList.add('collapsed');
            }
        })();
    </script>
    <div class="brand">
        <div class="brand-logo">
            <img src="/images/logo_svg.svg" alt="Logo" class="brand-icon">
            <span>Agora</span>
        </div>
        <button id="btn-sidebar-toggle" class="btn-sidebar-toggle" title="Réduire la barre latérale">
            <i data-lucide="chevron-left" id="sidebar-toggle-icon"></i>
        </button>
    </div>
    <ul class="nav-links">
        <a href="/trending" style="text-decoration: none; color: inherit;">
            <li class="<%= page === 'trending' ? 'active' : '' %>" data-target="section-trending">
                <i data-lucide="flame"></i>
                <span>Tendances</span>
            </li>
        </a>
        <a href="/recent" style="text-decoration: none; color: inherit;">
            <li class="<%= page === 'recent' ? 'active' : '' %>" data-target="section-recent">
                <i data-lucide="clock"></i>
                <span>Ajouts récents</span>
            </li>
        </a>
        <a href="/search" style="text-decoration: none; color: inherit;">
            <li class="<%= page === 'search' ? 'active' : '' %>" data-target="section-search">
                <i data-lucide="search"></i>
                <span>Recherche</span>
            </li>
        </a>
        <a href="/downloads" style="text-decoration: none; color: inherit;">
            <li class="<%= page === 'downloads' ? 'active' : '' %>" data-target="section-downloads">
                <i data-lucide="download"></i>
                <span>Téléchargements</span>
            </li>
        </a>
        <a href="/manual" style="text-decoration: none; color: inherit;">
            <li class="<%= page === 'manual' ? 'active' : '' %>" data-target="section-manual">
                <i data-lucide="plus-circle"></i>
                <span>Ajout manuel</span>
            </li>
        </a>
        <% if (typeof currentUser !== 'undefined' && currentUser && currentUser.role === 'admin') { %>
        <a href="/settings" style="text-decoration: none; color: inherit;">
            <li class="<%= page === 'settings' ? 'active' : '' %>" data-target="section-settings">
                <i data-lucide="settings"></i>
                <span>Paramètres</span>
            </li>
        </a>
        <% } %>
    </ul>
    <div class="nav-footer">
        <button id="btn-logout" class="btn-text">
            <i data-lucide="log-out"></i>
            <span>Déconnexion</span>
        </button>
    </div>
</nav>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const sidebar = document.getElementById('sidebar');
        const toggleBtn = document.getElementById('btn-sidebar-toggle');
        const toggleIcon = document.getElementById('sidebar-toggle-icon');
        
        if (!sidebar || !toggleBtn || !toggleIcon) return;
        
        const updateIcon = (isCollapsed) => {
            toggleIcon.setAttribute('data-lucide', isCollapsed ? 'chevron-right' : 'chevron-left');
            if (window.lucide) {
                window.lucide.createIcons({ root: toggleBtn });
            }
        };

        // Sync initial icon state
        const isCollapsed = sidebar.classList.contains('collapsed');
        updateIcon(isCollapsed);

        toggleBtn.addEventListener('click', () => {
            const willCollapse = !sidebar.classList.contains('collapsed');
            sidebar.classList.toggle('collapsed', willCollapse);
            localStorage.setItem('sidebar-collapsed', willCollapse ? 'true' : 'false');
            updateIcon(willCollapse);
        });
    });
</script>

