Menu lateral

2026-08-05 07:34:47 -05:00
parent 2080f396dc
commit 0baf9ab9f0
4 changed files with 167 additions and 15 deletions
@@ -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>