Files
Agora/views/partials/sidebar.ejs
T
2026-09-15 21:56:10 +02:00

94 lines
3.8 KiB
Plaintext

<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>