fix: hamburger menu shows all nav tabs, header logo+hamburger on same row

- Wrap sidebar-left and sidebar-right in div.sidebar-panel so the
  hamburger panel shows ALL navigation (Personal, Content, Economy,
  Banking, Media, Network, etc.) — previously only sidebar-left was shown
- style.css: sidebar-panel uses display:contents on desktop so layout
  is preserved (left|main|right) via CSS order: 1/2/3
- mobile.css: sidebar-panel is the hidden/shown drawer instead of sidebar-left
- Header layout: logo (flex:1) + hamburger share row 1, nav links
  (inbox/PM/publish) wrap to row 2, top-bar-right (tags/search) row 3
- Nav groups auto-expand when panel opens (selector updated to sidebar-panel)
- OasisMobile.css: panel background selector updated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nodejs-project/nodejs-project/src/client/assets/styles/mobile.css

@@ -66,37 +66,45 @@ pre, code {
   gap: 0 !important;
 }
 
+/* top-bar-left ocupa toda la fila y envuelve internamente */
 .top-bar-left {
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
-  flex: 1 !important;
-  flex-wrap: wrap !important;   /* permite que el logo ocupe su fila propia */
+  flex: 0 0 100% !important;      /* fila completa en el header */
+  flex-wrap: wrap !important;
   gap: 2px !important;
-  width: auto !important;
-  max-width: none !important;
   padding: 0 !important;
 }
 
-/* Logo: fila propia, hamburger y nav caen debajo */
+/* Logo + hamburger en la misma fila: logo crece, hamburger se queda a la derecha */
 a.logo-icon {
-  flex: 0 0 100% !important;
+  flex: 1 !important;             /* crece para llenar espacio, NO 100% */
   display: flex !important;
   align-items: center !important;
 }
 
+/* Nav (inbox, PM, publish): fila propia debajo del logo+hamburger */
+.top-bar-left nav {
+  flex: 0 0 100% !important;
+  overflow-x: auto !important;
+  scrollbar-width: none !important;
+}
+.top-bar-left nav::-webkit-scrollbar { display: none !important; }
+
+/* top-bar-right (tags, search): fila completa debajo */
 .top-bar-right {
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
-  flex-shrink: 0 !important;
+  flex: 0 0 100% !important;
   flex-wrap: nowrap !important;
   gap: 2px !important;
-  width: auto !important;
-  max-width: none !important;
   padding: 0 !important;
-  align-self: flex-end !important; /* se alinea con la fila del hamburger */
+  overflow-x: auto !important;
+  scrollbar-width: none !important;
 }
+.top-bar-right::-webkit-scrollbar { display: none !important; }
 
 .top-bar-left nav,
 .top-bar-right nav {
@@ -197,19 +205,30 @@ a.logo-icon img.logo-icon {
   cursor: pointer !important;
 }
 
-/* ---- Layout base: sidebars ocultos, contenido ocupa todo ---- */
+/* ---- Layout base: panel oculto, contenido ocupa todo ---- */
 .main-content {
   display: flex !important;
-  flex-direction: column !important;
+  flex-direction: row !important;
   width: 100% !important;
   max-width: 100% !important;
-  gap: 10px !important;
+  gap: 0 !important;
 }
 
-.sidebar-left,
-.sidebar-right {
+/* sidebar-panel oculto por defecto; sidebar-left/right visibles DENTRO del panel */
+.sidebar-panel {
   display: none !important;
 }
+.sidebar-panel .sidebar-left,
+.sidebar-panel .sidebar-right {
+  display: block !important;
+  position: static !important;
+  min-width: unset !important;
+  max-width: unset !important;
+  width: 100% !important;
+  border: none !important;
+  border-bottom: 1px solid #444 !important;
+  box-sizing: border-box !important;
+}
 
 .main-column {
   width: 100% !important;
@@ -220,7 +239,7 @@ a.logo-icon img.logo-icon {
 }
 
 /* ---- Panel lateral: se muestra cuando el menu esta abierto ---- */
-#mobile-menu-toggle:checked ~ .main-content .sidebar-left {
+#mobile-menu-toggle:checked ~ .main-content .sidebar-panel {
   display: block !important;
   position: fixed !important;
   top: 0 !important;
@@ -231,10 +250,9 @@ a.logo-icon img.logo-icon {
   overflow-y: auto !important;
   z-index: 200 !important;
   padding: 0 12px 24px 12px !important;
-  border-right: none !important;
 }
 
-#mobile-menu-toggle:checked ~ .main-content .sidebar-left .mobile-menu-close {
+#mobile-menu-toggle:checked ~ .main-content .sidebar-panel .mobile-menu-close {
   display: flex !important;
   align-items: center !important;
   gap: 6px !important;
@@ -248,17 +266,17 @@ a.logo-icon img.logo-icon {
   user-select: none !important;
 }
 
-.sidebar-left nav ul, .sidebar-right nav ul {
+.sidebar-panel nav ul {
   display: flex !important;
   flex-direction: column !important;
 }
 
 /* Forzar grupos de nav abiertos cuando el panel está visible */
-#mobile-menu-toggle:checked ~ .main-content .sidebar-left .oasis-nav-list {
+#mobile-menu-toggle:checked ~ .main-content .sidebar-panel .oasis-nav-list {
   max-height: 2000px !important;
   overflow: visible !important;
 }
-#mobile-menu-toggle:checked ~ .main-content .sidebar-left .oasis-nav-arrow {
+#mobile-menu-toggle:checked ~ .main-content .sidebar-panel .oasis-nav-arrow {
   transform: rotate(180deg) !important;
 }
 

nodejs-project/nodejs-project/src/client/assets/styles/style.css

@@ -350,6 +350,15 @@ nav ul li a:hover {
 .sidebar-right { border: 2px solid orange !important; }
 */
 
+/* Panel wrapper: transparent on desktop so sidebars stay as flex items */
+.sidebar-panel {
+  display: contents;
+}
+/* Restore visual order: left sidebar | main | right sidebar */
+.sidebar-left { order: 1; }
+.main-column  { order: 2; }
+.sidebar-right { order: 3; }
+
 .sidebar-left,
 .sidebar-right {
   background-color: #222;

nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css

@@ -359,7 +359,7 @@ a.user-link:focus {
 }
 
 /* Panel lateral abierto */
-#mobile-menu-toggle:checked ~ .main-content .sidebar-left {
+#mobile-menu-toggle:checked ~ .main-content .sidebar-panel {
   background-color: #1A1A1A;
   border-right: 1px solid #333;
 }

nodejs-project/nodejs-project/src/views/main_views.js

@@ -754,10 +754,12 @@ const template = (titlePrefix, ...elements) => {
       div(
         { class: "main-content" },
         div(
-          { class: "sidebar-left" },
+          { class: "sidebar-panel" },
           label({ for: 'mobile-menu-toggle', class: 'mobile-menu-close' },
             span({ class: 'menu-icon-close' }, '✕'), ' Cerrar'
           ),
+          div(
+            { class: "sidebar-left" },
             nav(
               ul(
                 navGroup(
@@ -857,7 +859,6 @@ const template = (titlePrefix, ...elements) => {
               )
             )
           ),
-        main({ id: "content", class: "main-column" }, elements),
           div(
             { class: "sidebar-right" },
             nav(
@@ -920,6 +921,8 @@ const template = (titlePrefix, ...elements) => {
             )
           )
         ),
+        main({ id: "content", class: "main-column" }, elements),
+      ),
       label({ for: 'mobile-menu-toggle', class: 'mobile-menu-backdrop' }),
     renderFooter()
     )