NEW:

- Creada sidebar para mejora visual.
- Removidos excesos de links.
- Modificado el footer para consistencia de estilos.

resources/views/components/layout.blade.php

@@ -34,6 +34,9 @@
     <!-- Navbar Component -->
     <x-navbar />
 
+    <!-- Sidebar Component -->
+    <x-sidebar />
+
     <!-- Contenido Principal -->
     <main class="grow flex flex-col items-center justify-start pt-10 pb-20 px-4 w-full max-w-7xl mx-auto z-10">
         {{ $slot }}
@@ -47,14 +50,42 @@
 
     <!-- Scripts globales -->
     <script>
-        // Lógica del menú móvil
+        // Lógica del menú móvil tradicional (navbar)
         const btn = document.querySelector('[data-collapse-toggle="navbar-default"]');
         const menu = document.getElementById('navbar-default');
         if(btn && menu) {
             btn.addEventListener('click', () => menu.classList.toggle('hidden'));
         }
 
-        
+        // Lógica del Sidebar
+        const sidebar = document.getElementById('main-sidebar');
+        const backdrop = document.getElementById('sidebar-backdrop');
+        const openSidebarBtns = document.querySelectorAll('.open-sidebar-btn');
+        const closeSidebarBtn = document.getElementById('close-sidebar-btn');
+
+        function toggleSidebar() {
+            sidebar.classList.toggle('-translate-x-full');
+            backdrop.classList.toggle('hidden');
+            // Pequeño delay para la transición de opacidad
+            setTimeout(() => {
+                backdrop.classList.toggle('opacity-0');
+            }, 10);
+            
+            // Prevenir scroll en el body cuando el sidebar está abierto
+            document.body.classList.toggle('overflow-hidden');
+        }
+
+        openSidebarBtns.forEach(btn => {
+            btn.addEventListener('click', toggleSidebar);
+        });
+
+        if (closeSidebarBtn) {
+            closeSidebarBtn.addEventListener('click', toggleSidebar);
+        }
+
+        if (backdrop) {
+            backdrop.addEventListener('click', toggleSidebar);
+        }
     </script>
     @stack('scripts')