149 lines
4.0 KiB
PHP
149 lines
4.0 KiB
PHP
<?php
|
|
// Asegúrate de que la sesión esté iniciada en los archivos que incluyen esta barra lateral
|
|
if (session_status() == PHP_SESSION_NONE) {
|
|
session_start();
|
|
}
|
|
?>
|
|
|
|
|
|
<div class="sidebar">
|
|
<div class="sidebar-header text-center">
|
|
<h4 style="font-size: 2em; color: white; margin-bottom: 20px;">LANIA</h4>
|
|
</div>
|
|
<ul class="sidebar-menu">
|
|
<li id="menu-estadisticas">
|
|
<a href="dashboard.php">
|
|
<span class="menu-icon-wrapper"><i class="fas fa-tachometer-alt"></i></span>
|
|
<span class="menu-text">Estadísticas</span>
|
|
</a>
|
|
</li>
|
|
<li id="menu-entrada">
|
|
<a href="FormularioInicial.php">
|
|
<span class="menu-icon-wrapper"><i class="fas fa-sign-in-alt"></i></span>
|
|
<span class="menu-text">Formulario de Entrada</span>
|
|
</a>
|
|
</li>
|
|
<li id="menu-salida">
|
|
<a href="FormularioSalida.php">
|
|
<span class="menu-icon-wrapper"><i class="fas fa-sign-out-alt"></i></span>
|
|
<span class="menu-text">Formulario de Salida</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<div class="sidebar-footer">
|
|
<hr class="separator-line">
|
|
<ul class="sidebar-menu">
|
|
<li>
|
|
<a href="logout.php" class="logout-btn">
|
|
<span class="menu-icon-wrapper"><i class="fas fa-sign-out-alt"></i></span>
|
|
<span class="menu-text">Cerrar Sesión</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
/* Añade esto a tu dashboard.css o directamente en sidebar.php para pruebas rápidas */
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column; /* Permite que el contenido se apile y el pie de página se empuje hacia abajo */
|
|
justify-content: space-between; /* Empuja el pie de página hacia abajo */
|
|
min-width: 250px;
|
|
height: 100vh; /* Haz que la barra lateral ocupe toda la altura de la ventana gráfica */
|
|
color: white; /* Texto blanco por defecto */
|
|
padding-bottom: 20px; /* Espacio para el botón de cerrar sesión */
|
|
}
|
|
|
|
|
|
.sidebar-header {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
|
|
.sidebar-menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
flex-grow: 1; /* Permite que el menú ocupe el espacio disponible */
|
|
}
|
|
|
|
|
|
.sidebar-menu li {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
|
|
.sidebar-menu a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
color: white; /* Texto blanco por defecto */
|
|
text-decoration: none;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
|
|
.sidebar-menu a:hover,
|
|
.sidebar-menu li.active a {
|
|
background-color:rgb(220, 220, 220); /* Fondo más claro al pasar el ratón o activo */
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.sidebar-menu a .menu-text {
|
|
margin-left: 10px;
|
|
color: white;
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu-icon-wrapper {
|
|
width: 30px; /* Ancho fijo para los iconos */
|
|
text-align: center;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
|
|
.sidebar-footer {
|
|
padding: 0 20px;
|
|
margin-top: auto; /* Empuja el pie de página hacia abajo */
|
|
}
|
|
|
|
|
|
.separator-line {
|
|
border-top: 1px solid rgba(255, 255, 255, 0.3);
|
|
margin: 15px 0;
|
|
}
|
|
|
|
|
|
.logout-btn {
|
|
background-color: #dc3545; /* Rojo para el botón de cerrar sesión */
|
|
border-radius: 5px;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
margin-top: 10px; /* Espacio encima del botón */
|
|
}
|
|
|
|
|
|
.logout-btn:hover {
|
|
background-color: #c82333; /* Rojo más oscuro al pasar el ratón */
|
|
}
|
|
|
|
|
|
body {
|
|
display: flex; /* Asegura que la barra lateral y el contenido principal estén uno al lado del otro */
|
|
}
|
|
|
|
|
|
.main-content {
|
|
flex-grow: 1; /* Permite que el contenido principal ocupe el ancho restante */
|
|
padding: 20px;
|
|
background-color: #f8f9fa; /* Fondo claro para el área de contenido */
|
|
}
|
|
</style>
|