From 16f9189e61aed02be6634745e2e006c0aba5231e Mon Sep 17 00:00:00 2001
From: SITO <sito@ransomsito.ransomsito>
Date: Fri, 1 May 2026 02:29:02 +0200
Subject: [PATCH] fix: hamburger panel groups collapsed by default, styled as
 rounded buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove force-expand CSS: groups now start collapsed (tap to open)
- .oasis-nav-header in panel: border-radius 12px, larger padding (11px 14px),
  bold font, no uppercase — looks like a proper tappable button
- Arrow rotates on expand (CSS accordion native behavior, no JS)
- Nav items indented with left border accent, 9px padding, 8px radius
- OasisMobile.css: #252500 background + FFD700 text for group buttons
- Separator line between sidebar-left and sidebar-right sections in panel
- Economy group absent: all economy modules (banking/market/jobs) are
  disabled in current config — this is expected behavior by design

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/client/assets/styles/mobile.css       | 71 +++++++++++++++++--
 .../src/client/assets/themes/OasisMobile.css  | 18 +++++
 2 files changed, 83 insertions(+), 6 deletions(-)

diff --git a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
index 4a8867c2..ed4f69c1 100644
--- a/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
+++ b/nodejs-project/nodejs-project/src/client/assets/styles/mobile.css
@@ -254,20 +254,79 @@ a.logo-icon img.logo-icon {
   flex-shrink: 0 !important;
 }
 
-.sidebar-panel nav ul {
+.sidebar-panel nav > ul {
   display: flex !important;
   flex-direction: column !important;
+  gap: 4px !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  list-style: none !important;
 }
 
-/* Forzar grupos de nav abiertos cuando el panel está visible */
-#mobile-menu-toggle:checked ~ .main-content .sidebar-panel .oasis-nav-list {
-  max-height: 2000px !important;
-  overflow: visible !important;
+/* Grupos del panel: botón redondeado tipo píldora */
+.sidebar-panel .oasis-nav-group {
+  margin-bottom: 2px !important;
 }
-#mobile-menu-toggle:checked ~ .main-content .sidebar-panel .oasis-nav-arrow {
+
+.sidebar-panel .oasis-nav-header {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  width: 100% !important;
+  padding: 11px 14px !important;
+  border-radius: 12px !important;
+  font-size: 0.92rem !important;
+  font-weight: 700 !important;
+  letter-spacing: 0.03em !important;
+  text-transform: none !important;   /* sin mayúsculas forzadas en móvil */
+  cursor: pointer !important;
+  user-select: none !important;
+  box-sizing: border-box !important;
+  margin: 0 !important;
+  border-width: 1px !important;
+  gap: 6px !important;
+}
+
+.sidebar-panel .oasis-nav-arrow {
+  margin-left: auto !important;
+  font-size: 0.85rem !important;
+  transition: transform 0.2s ease !important;
+}
+
+/* Cuando el grupo está abierto, rotar la flecha */
+.sidebar-panel .oasis-nav-toggle:checked + .oasis-nav-header .oasis-nav-arrow {
   transform: rotate(180deg) !important;
 }
 
+/* Lista de items dentro del grupo */
+.sidebar-panel .oasis-nav-list {
+  margin: 2px 0 4px 8px !important;
+  border-left: 2px solid rgba(255,180,0,0.3) !important;
+  padding-left: 8px !important;
+}
+
+.sidebar-panel .oasis-nav-list li a {
+  padding: 9px 12px !important;
+  font-size: 0.88rem !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  border-radius: 8px !important;
+  opacity: 0.9 !important;
+}
+
+.sidebar-panel .oasis-nav-list li a:active {
+  opacity: 1 !important;
+  background: rgba(255,180,0,0.1) !important;
+}
+
+/* Separador visual entre sidebar-left y sidebar-right en el panel */
+.sidebar-panel .sidebar-right {
+  border-top: 1px solid #444 !important;
+  margin-top: 8px !important;
+  padding-top: 8px !important;
+}
+
 /* ---- Tipografía ---- */
 h1 { font-size: 1.25em !important; }
 h2 { font-size: 1.1em !important; }
diff --git a/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css b/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css
index be964264..a712ae81 100644
--- a/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css
+++ b/nodejs-project/nodejs-project/src/client/assets/themes/OasisMobile.css
@@ -340,6 +340,24 @@ a.user-link:focus {
   border-color: #FFD700;
 }
 
+/* Botones de grupo en el panel hamburger */
+.sidebar-panel .oasis-nav-header {
+  background-color: #252500;
+  color: #FFD700;
+  border-color: rgba(255,180,0,0.35);
+}
+.sidebar-panel .oasis-nav-header:active {
+  background-color: #333300;
+}
+
+/* Links dentro del grupo */
+.sidebar-panel .oasis-nav-list li a {
+  color: #FFD700;
+}
+.sidebar-panel .oasis-nav-list li a:hover {
+  background-color: rgba(255,215,0,0.08);
+}
+
 .qr-share-btn {
   background-color: #2a2a00;
   color: #FFD700;