Refactor pages registry and router to enhance sidebar navigation and page rendering

src/pages/pagesRegistry.js

@@ -1,34 +1,59 @@
+import { renderDashboard } from './DashboardPage.js';
+import { renderTestPage } from './test.js';
+
 // Registry of all pages available in the application
 export const pagesRegistry = [
   {
     route: 'dashboard',
     name: 'Dashboard',
     icon: '🏠',
-    requiresAuth: true
+    requiresAuth: true,
+    showInSidebar: true,
+    render: renderDashboard
   },
   {
     route: 'test',
     name: 'Test Page',
     icon: '🧪',
-    requiresAuth: true
+    requiresAuth: true,
+    showInSidebar: true,
+    render: renderTestPage
   },
   {
     route: 'invoices',
     name: 'Facturas',
     icon: '📄',
-    requiresAuth: true
+    requiresAuth: true,
+    showInSidebar: true,
+    render: () => {
+      const div = document.createElement('div');
+      div.innerHTML = '<h1>Facturas</h1><p>Página en construcción...</p>';
+      return div;
+    }
   },
   {
     route: 'clients',
     name: 'Clientes',
     icon: '👥',
-    requiresAuth: true
+    requiresAuth: true,
+    showInSidebar: true,
+    render: () => {
+      const div = document.createElement('div');
+      div.innerHTML = '<h1>Clientes</h1><p>Página en construcción...</p>';
+      return div;
+    }
   },
   {
     route: 'settings',
     name: 'Configuración',
     icon: '⚙️',
-    requiresAuth: true
+    requiresAuth: true,
+    showInSidebar: true,
+    render: () => {
+      const div = document.createElement('div');
+      div.innerHTML = '<h1>Configuración</h1><p>Página en construcción...</p>';
+      return div;
+    }
   }
 ];
 
@@ -37,8 +62,11 @@ export function getAvailablePages(isAuthenticated) {
   if (!isAuthenticated) {
     return [];
   }
-  // Filter pages based on authentication requirement
-  return pagesRegistry.filter(page => !page.requiresAuth || isAuthenticated);
+  // Filter pages based on authentication requirement and sidebar visibility
+  return pagesRegistry.filter(page => {
+    if (page.requiresAuth && !isAuthenticated) return false;
+    return page.showInSidebar;
+  });
 }
 
 // Get page by route

src/router.js

@@ -1,9 +1,7 @@
 import { auth } from './services/auth.js';
 import { renderLoginPage } from './pages/LoginPage.js';
-import { renderDashboard } from './pages/DashboardPage.js';
-import { renderTestPage } from './pages/test.js';
 import { createSidebar } from './components/Sidebar.js';
-import { getAvailablePages } from './pages/pagesRegistry.js';
+import { getAvailablePages, getPageByRoute } from './pages/pagesRegistry.js';
 
 export function initRouter() {
   const app = document.querySelector('#app');
@@ -27,25 +25,28 @@ export function initRouter() {
       // Create sidebar
       const pages = getAvailablePages(true);
       const sidebar = createSidebar(pages, route);
-      
+
       // Create main content area
       const mainContent = document.createElement('main');
       mainContent.className = 'main-content';
 
-      let pageContent;
-      switch (hash) {
-        case '#dashboard':
-          pageContent = renderDashboard();
-          break;
-        case '#test':
-          pageContent = renderTestPage();
-          break;
-        default:
-          // For unregistered routes, redirect to dashboard
-          window.location.hash = '#dashboard';
-          return;
+      // Get page from registry
+      const page = getPageByRoute(route);
+
+      if (!page) {
+        // For unregistered routes, redirect to dashboard
+        window.location.hash = '#dashboard';
+        return;
       }
 
+      if (page.requiresAuth && !auth.checkAuth()) {
+        window.location.hash = '#login';
+        return;
+      }
+
+      // Render page content using registry
+      const pageContent = page.render();
+
       mainContent.appendChild(pageContent);
       layout.appendChild(sidebar);
       layout.appendChild(mainContent);