Menu lateral

2026-08-05 07:34:47 -05:00
parent 2080f396dc
commit 0baf9ab9f0
4 changed files with 167 additions and 15 deletions
@@ -8,26 +8,105 @@ body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
-  display: flex;
-  justify-content: center;
-  align-items: center;
  height: 100vh;
 }

-.container {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+.app-layout {
+  display: flex;
+  height: 100vh;
+}
+
+.sidebar {
+  width: 260px;
+  background-color: #2c3e50;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1rem;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+}
+
+.logo h2 {
+  font-size: 1.25rem;
+  margin-bottom: 2rem;
  text-align: center;
-  max-width: 400px;
+  color: #ecf0f1;
 }

-h1 {
-  margin-bottom: 1rem;
+.menu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid #34495e;
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.85rem 1rem;
+  font-size: 1rem;
+  color: #bdc3c7;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.menu-btn:hover {
+  background-color: #34495e;
+  color: #ffffff;
+}
+
+.menu-btn.active {
+  background-color: #1abc9c;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.menu-btn .icon {
+  font-size: 1.25rem;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.top-bar {
+  background-color: #ffffff;
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid #e0e0e0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+}
+
+.top-bar h1 {
  color: #2c3e50;
+  font-size: 1.5rem;
 }

-p {
+.section {
+  display: none;
+  flex: 1;
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.section.active {
+  display: block;
+}
+
+.section p {
  color: #666;
+  font-size: 1.1rem;
 }
@@ -7,9 +7,56 @@
  <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
-  <div class="container">
-    <h1>Sistema de Nóminas</h1>
-    <p>Bienvenido al sistema de gestión de nóminas.</p>
+  <div class="app-layout">
+    <aside class="sidebar">
+      <div class="logo">
+        <h2>Sistema de Nóminas</h2>
+      </div>
+      <nav class="menu">
+        <button class="menu-btn active" data-section="trabajadores">
+          <span class="icon">👷</span>
+          Trabajadores
+        </button>
+        <button class="menu-btn" data-section="nominas">
+          <span class="icon">💰</span>
+          Nóminas
+        </button>
+        <button class="menu-btn" data-section="liquidaciones">
+          <span class="icon">📄</span>
+          Liquidaciones
+        </button>
+      </nav>
+      <div class="sidebar-footer">
+        <button class="menu-btn" data-section="licencia">
+          <span class="icon">🔑</span>
+          Licencia
+        </button>
+      </div>
+    </aside>
+
+    <main class="main-content">
+      <header class="top-bar">
+        <h1 id="section-title">Trabajadores</h1>
+      </header>
+
+      <section id="trabajadores" class="section active">
+        <p>Gestión de trabajadores.</p>
+      </section>
+
+      <section id="nominas" class="section">
+        <p>Gestión de nóminas.</p>
+      </section>
+
+      <section id="liquidaciones" class="section">
+        <p>Gestión de liquidaciones.</p>
+      </section>
+
+      <section id="licencia" class="section">
+        <p>Información de licencia.</p>
+      </section>
+    </main>
  </div>
+
+  <script src="js/app.js"></script>
 </body>
 </html>
@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const menuButtons = document.querySelectorAll('.menu-btn');
+  const sections = document.querySelectorAll('.section');
+  const sectionTitle = document.getElementById('section-title');
+
+  const titles = {
+    trabajadores: 'Trabajadores',
+    nominas: 'Nóminas',
+    liquidaciones: 'Liquidaciones',
+    licencia: 'Licencia'
+  };
+
+  menuButtons.forEach(button => {
+    button.addEventListener('click', function () {
+      const target = this.dataset.section;
+
+      menuButtons.forEach(btn => btn.classList.remove('active'));
+      this.classList.add('active');
+
+      sections.forEach(section => section.classList.remove('active'));
+      document.getElementById(target).classList.add('active');
+
+      sectionTitle.textContent = titles[target] || '';
+    });
+  });
+});