responsive-system 1.4.2 → 1.4.3

package/src/components/layout/Sidebar.tsx

@@ -1,14 +1,14 @@
 import { useResponsiveLayout } from '../../hooks'
-import { useNavigation, useSidebar } from '../../context'
+import { useSidebar } from '../../context'
 
 const Sidebar = () => {
-  const { isMobile, isTablet, breakpoint } = useResponsiveLayout()
-  const { currentPage, setCurrentPage } = useNavigation()
+  const { isMobile, isTablet } = useResponsiveLayout()
   const { sidebarOpen, setSidebarOpen } = useSidebar()
   
   const menuItems = [
-    { id: 'test', label: 'Suite de Test' },
-    { id: 'demo', label: 'Demo' },
+    { id: 'home', label: 'Inicio' },
+    { id: 'about', label: 'Acerca' },
+    { id: 'contact', label: 'Contacto' },
   ]
   
   return (
@@ -17,7 +17,7 @@ const Sidebar = () => {
       {isMobile && (
         <button
           onClick={() => setSidebarOpen(true)}
-          className="fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 border border-gray-700"
+          className="fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700"
         >
           <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
@@ -26,72 +26,46 @@ const Sidebar = () => {
       )}
 
       {/* Sidebar desktop */}
-      <aside className={`
-        bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20
-        ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}
-        ${isTablet ? 'w-56' : 'w-64'}
-      `}>
-      <div className="p-6 flex flex-col h-full">
-        {/* Logo y Breakpoint */}
-        <div className="flex items-center space-x-3 mb-8">
-          <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
-            <span className="text-white font-bold text-sm">RS</span>
-          </div>
-          <div>
-            <span className="text-white font-bold text-lg">Sistema Responsivo</span>
-            <div className="px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest mt-1">
-              {breakpoint.toUpperCase()}
+      <aside className={`bg-gray-900 border-r border-gray-800 ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} ${isTablet ? 'w-56' : 'w-64'}`}>
+        <div className="p-6 flex flex-col h-full">
+          <div className="flex items-center space-x-3 mb-8">
+            <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+              <span className="text-white font-bold text-sm">LO</span>
             </div>
+            <span className="text-white font-bold text-lg">Tu Aplicación</span>
           </div>
+          
+          <nav className="space-y-2">
+            {menuItems.map((item) => (
+              <button
+                key={item.id}
+                className="w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800"
+              >
+                <span className="font-medium">{item.label}</span>
+              </button>
+            ))}
+          </nav>
         </div>
-        
-        {/* Navigation */}
-        <nav className="space-y-2">
-          {menuItems.map((item) => (
-            <button
-              key={item.id}
-              onClick={() => setCurrentPage(item.id as 'demo' | 'test')}
-              className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${
-                currentPage === item.id 
-                  ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' 
-                  : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'
-              }`}
-            >
-              <span className="font-medium">{item.label}</span>
-            </button>
-          ))}
-        </nav>
-        
-      </div>
       </aside>
 
       {/* Sidebar móvil desplegable */}
       {isMobile && sidebarOpen && (
         <div className="fixed inset-0 z-40 bg-black/50" onClick={() => setSidebarOpen(false)}>
-          <div className="fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20">
+          <div className="fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800">
             <div className="p-6 flex flex-col h-full pt-20">
-              {/* Logo */}
               <div className="flex items-center space-x-3 mb-8">
-                <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
-                  <span className="text-white font-bold text-sm">RS</span>
+                <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">LO</span>
                 </div>
-                <span className="text-white font-bold text-lg">Sistema Responsivo</span>
+                <span className="text-white font-bold text-lg">Tu Aplicación</span>
               </div>
               
-              {/* Navigation */}
               <nav className="space-y-2">
                 {menuItems.map((item) => (
                   <button
                     key={item.id}
-                    onClick={() => {
-                      setCurrentPage(item.id as 'demo' | 'test')
-                      setSidebarOpen(false)
-                    }}
-                    className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${
-                      currentPage === item.id 
-                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' 
-                        : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'
-                    }`}
+                    onClick={() => setSidebarOpen(false)}
+                    className="w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800"
                   >
                     <span className="font-medium">{item.label}</span>
                   </button>

package/src/layouts/DashboardLayout.tsx

@@ -1,66 +1,29 @@
 import React from 'react'
-import { useResponsiveLayout } from '../hooks'
 import { Sidebar, Footer } from '../components/layout'
-import { SidebarProvider, useSidebar } from '../context'
+import { SidebarProvider } from '../context'
 
 interface DashboardLayoutProps {
   children: React.ReactNode
 }
 
 const DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { layoutUtils } = useResponsiveLayout()
-  const { setSidebarOpen } = useSidebar()
-  
   return (
-    <div className="min-h-screen bg-black flex flex-col">
-      {/* Navbar para móvil (igual que SidebarLayout) */}
-      <div className="sticky top-0 z-50">
-        <nav className="bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative">
-          <div className="w-full">
-            <div className="px-4 py-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-2">
-                  {/* Hamburger button para móvil - A LA IZQUIERDA */}
-                  <button
-                    onClick={() => setSidebarOpen(true)}
-                    className="p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors"
-                  >
-                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                    </svg>
-                  </button>
-                  
-                  <div className="flex items-center space-x-2">
-                    <div className="w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse"></div>
-                    <h3 className="text-base font-black text-white tracking-tight">
-                      Sistema Responsivo
-                    </h3>
-                  </div>
-                  <div className="px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest">
-                    DASHBOARD
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </nav>
-      </div>
-      
+    <div className="min-h-screen bg-gray-50 flex flex-col">
       {/* Content area con sidebar */}
       <div className="flex flex-1">
         {/* Sidebar */}
         <Sidebar />
         
         {/* Main content */}
-        <main className="flex-1 overflow-auto">
-          <div className={layoutUtils.getContainerClass()}>
+        <main className="flex-1 overflow-auto flex flex-col">
+          <div className="flex-1">
             {children}
           </div>
+          
+          {/* Footer */}
+          <Footer />
         </main>
       </div>
-      
-      {/* Footer */}
-      <Footer />
     </div>
   )
 }

package/src/layouts/DefaultLayout.tsx

@@ -1,24 +1,19 @@
 import React from 'react'
 import { Navigation, Footer } from '../components/layout'
-import { useResponsiveLayout } from '../hooks'
 
 interface DefaultLayoutProps {
   children: React.ReactNode
 }
 
 const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
-  const { layoutUtils } = useResponsiveLayout()
-  
   return (
-    <div className="min-h-screen bg-black flex flex-col">
+    <div className="min-h-screen bg-gray-50 flex flex-col">
       {/* Navigation fijo arriba */}
       <Navigation />
       
-      {/* Main content con padding-top para la navigation */}
+      {/* Main content */}
       <main className="flex-1">
-        <div className={layoutUtils.getContainerClass()}>
-          {children}
-        </div>
+        {children}
       </main>
       
       {/* Footer fijo abajo */}

package/src/layouts/MinimalLayout.tsx

@@ -1,16 +1,13 @@
 import React from 'react'
-import { useResponsiveLayout } from '../hooks'
 
 interface MinimalLayoutProps {
   children: React.ReactNode
 }
 
 const MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {
-  const { layoutUtils } = useResponsiveLayout()
-  
   return (
-    <div className="min-h-screen bg-black">
-      <main className={layoutUtils.getContainerClass()}>
+    <div className="min-h-screen bg-gray-50">
+      <main>
         {children}
       </main>
     </div>

package/src/layouts/SidebarLayout.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { useResponsiveLayout } from '../hooks'
 import { Sidebar } from '../components/layout'
 import { SidebarProvider } from '../context'
 
@@ -8,18 +7,14 @@ interface SidebarLayoutProps {
 }
 
 const SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { layoutUtils } = useResponsiveLayout()
-  
   return (
-    <div className="min-h-screen bg-black flex">
+    <div className="min-h-screen bg-gray-50 flex">
       {/* Sidebar */}
       <Sidebar />
       
       {/* Main content */}
       <main className="flex-1 overflow-auto">
-        <div className={layoutUtils.getContainerClass()}>
-          {children}
-        </div>
+        {children}
       </main>
     </div>
   )