<div class="sidebar-demo">
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="logo">
<span class="logo-icon">🚀</span>
<span class="logo-text">Panel</span>
</div>
<button class="toggle-btn" id="toggleBtn">
<span class="toggle-icon">‹</span>
</button>
</div>
<nav class="sidebar-nav">
<ul class="nav-list">
<li class="nav-item active">
<a href="#" class="nav-link" onclick="return false;">
<span class="nav-icon">🏠</span>
<span class="nav-text">Inicio</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">
<span class="nav-icon">👥</span>
<span class="nav-text">Usuarios</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">
<span class="nav-icon">📊</span>
<span class="nav-text">Analíticas</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">
<span class="nav-icon">⚙️</span>
<span class="nav-text">Configuración</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">
<span class="nav-icon">📝</span>
<span class="nav-text">Reportes</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="return false;">
<span class="nav-icon">💬</span>
<span class="nav-text">Mensajes</span>
</a>
</li>
</ul>
</nav>
<div class="sidebar-footer">
<div class="user-profile">
<div class="user-avatar">👤</div>
<div class="user-info">
<span class="user-name">Juan Pérez</span>
<span class="user-role">Admin</span>
</div>
</div>
</div>
</div>
<div class="main-content">
<h2>Demo de Navegación de Barra Lateral</h2>
<p>Haz clic en el botón de alternar (‹) para colapsar/expandir la barra lateral.</p>
<p>Prueba hacer clic en diferentes elementos del menú para ver los cambios de estado activo.</p>
</div>
</div>
.sidebar-demo {
display: flex;
height: 380px;
background: #f8fafc;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.sidebar {
width: 280px;
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
color: white;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}
.sidebar.collapsed {
width: 80px;
}
.sidebar-header {
padding: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
min-height: 70px;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
font-size: 24px;
min-width: 24px;
}
.logo-text {
font-size: 20px;
font-weight: 700;
transition: opacity 0.3s ease;
}
.sidebar.collapsed .logo-text {
opacity: 0;
width: 0;
overflow: hidden;
}
.toggle-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
color: white;
width: 32px;
height: 32px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.toggle-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.toggle-icon {
font-size: 18px;
font-weight: bold;
transition: transform 0.3s ease;
}
.sidebar.collapsed .toggle-icon {
transform: rotate(180deg);
}
.sidebar-nav {
flex: 1;
padding: 20px 0;
overflow-y: auto;
}
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
margin: 4px 0;
}
.nav-link {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 20px;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
border-radius: 0 25px 25px 0;
margin-right: 20px;
position: relative;
overflow: hidden;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
transform: translateX(5px);
}
.nav-item.active .nav-link {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.nav-icon {
font-size: 20px;
min-width: 20px;
text-align: center;
}
.nav-text {
font-weight: 500;
transition: opacity 0.3s ease;
}
.sidebar.collapsed .nav-text {
opacity: 0;
width: 0;
overflow: hidden;
}
.sidebar.collapsed .nav-link {
justify-content: center;
margin-right: 0;
border-radius: 12px;
margin: 4px 12px;
}
.sidebar-footer {
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.user-profile {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
min-width: 40px;
}
.user-info {
display: flex;
flex-direction: column;
transition: opacity 0.3s ease;
}
.user-name {
font-weight: 600;
font-size: 14px;
}
.user-role {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.sidebar.collapsed .user-info {
opacity: 0;
width: 0;
overflow: hidden;
}
.main-content {
flex: 1;
padding: 40px;
background: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.main-content h2 {
color: #1e293b;
font-size: 24px;
font-weight: 700;
margin: 0 0 16px 0;
}
.main-content p {
color: #64748b;
margin: 8px 0;
line-height: 1.6;
}
/* Responsive */
@media (max-width: 768px) {
.sidebar {
position: absolute;
left: -280px;
z-index: 1000;
height: 100%;
}
.sidebar.mobile-open {
left: 0;
}
.main-content {
padding: 20px;
}
}
document.addEventListener('DOMContentLoaded', function() {
const sidebar = document.getElementById('sidebar');
const toggleBtn = document.getElementById('toggleBtn');
const navLinks = document.querySelectorAll('.nav-link');
// Toggle sidebar
if (toggleBtn && sidebar) {
toggleBtn.addEventListener('click', function() {
sidebar.classList.toggle('collapsed');
// Show feedback
const isCollapsed = sidebar.classList.contains('collapsed');
showFeedback(isCollapsed ? 'Barra lateral colapsada' : 'Barra lateral expandida');
});
}
// Handle nav link clicks
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
// Remove active class from all items
document.querySelectorAll('.nav-item').forEach(item => {
item.classList.remove('active');
});
// Add active class to clicked item
this.closest('.nav-item').classList.add('active');
const linkText = this.querySelector('.nav-text').textContent;
showFeedback(`Navegado a: ${linkText}`);
});
});
// Mobile responsive
function handleResize() {
if (window.innerWidth <= 768) {
sidebar.classList.remove('collapsed');
}
}
window.addEventListener('resize', handleResize);
handleResize();
// Feedback function
function showFeedback(message) {
const existing = document.querySelector('.demo-feedback');
if (existing) existing.remove();
const feedback = document.createElement('div');
feedback.className = 'demo-feedback';
feedback.textContent = message;
feedback.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
z-index: 10001;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
transform: translateX(100%);
transition: transform 0.3s ease;
`;
document.body.appendChild(feedback);
requestAnimationFrame(() => {
feedback.style.transform = 'translateX(0)';
});
setTimeout(() => {
feedback.style.transform = 'translateX(100%)';
setTimeout(() => feedback.remove(), 300);
}, 2500);
}
// Initial feedback
setTimeout(() => {
showFeedback('¡Prueba el botón de alternar!');
}, 1000);
});