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>
This commit is contained in:
SITO
parent
0edf37594f
commit
f7f541a451
4 changed files with 209 additions and 179 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -754,171 +754,174 @@ 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'
|
||||
),
|
||||
nav(
|
||||
ul(
|
||||
navGroup(
|
||||
{
|
||||
id: "personal",
|
||||
emoji: "⚉",
|
||||
title: i18n.menuPersonal
|
||||
},
|
||||
navLink({
|
||||
href: "/profile",
|
||||
emoji: "⚉",
|
||||
text: i18n.profile
|
||||
}),
|
||||
navLink({
|
||||
href: "/cv",
|
||||
emoji: "ꕛ",
|
||||
text: i18n.cvTitle
|
||||
}),
|
||||
renderAgendaLink(),
|
||||
renderFavoritesLink(),
|
||||
renderWalletLink(),
|
||||
navLink({
|
||||
href: "/modules",
|
||||
emoji: "ꗣ",
|
||||
text: i18n.modules
|
||||
}),
|
||||
navLink({
|
||||
href: "/settings",
|
||||
emoji: "⚙",
|
||||
text: i18n.settings
|
||||
})
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "content",
|
||||
emoji: "✦",
|
||||
title: i18n.menuContent
|
||||
},
|
||||
navLink({
|
||||
href: "/mentions",
|
||||
emoji: "✺",
|
||||
text: i18n.mentions
|
||||
}),
|
||||
renderLatestLink(),
|
||||
renderThreadsLink(),
|
||||
renderTopicsLink(),
|
||||
renderSummariesLink(),
|
||||
renderPopularLink(),
|
||||
renderMultiverseLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "governance",
|
||||
emoji: "⚖",
|
||||
title: i18n.menuGovernance
|
||||
},
|
||||
navLink({
|
||||
href: "/inhabitants",
|
||||
emoji: "ꖘ",
|
||||
text: i18n.inhabitantsLabel
|
||||
}),
|
||||
renderTribesLink(),
|
||||
renderParliamentLink(),
|
||||
renderCourtsLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "office",
|
||||
emoji: "⌂",
|
||||
title: i18n.menuOffice
|
||||
},
|
||||
renderVotationsLink(),
|
||||
renderEventsLink(),
|
||||
renderTasksLink(),
|
||||
renderReportsLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "tools",
|
||||
emoji: "⚒",
|
||||
title: i18n.menuTools
|
||||
},
|
||||
renderAILink(),
|
||||
navLink({
|
||||
href: "/stats",
|
||||
emoji: "ꕷ",
|
||||
text: i18n.statistics
|
||||
}),
|
||||
navLink({
|
||||
href: "/blockexplorer",
|
||||
emoji: "ꖸ",
|
||||
text: i18n.blockchain
|
||||
}),
|
||||
renderCipherLink(),
|
||||
renderLegacyLink()
|
||||
div(
|
||||
{ class: "sidebar-left" },
|
||||
nav(
|
||||
ul(
|
||||
navGroup(
|
||||
{
|
||||
id: "personal",
|
||||
emoji: "⚉",
|
||||
title: i18n.menuPersonal
|
||||
},
|
||||
navLink({
|
||||
href: "/profile",
|
||||
emoji: "⚉",
|
||||
text: i18n.profile
|
||||
}),
|
||||
navLink({
|
||||
href: "/cv",
|
||||
emoji: "ꕛ",
|
||||
text: i18n.cvTitle
|
||||
}),
|
||||
renderAgendaLink(),
|
||||
renderFavoritesLink(),
|
||||
renderWalletLink(),
|
||||
navLink({
|
||||
href: "/modules",
|
||||
emoji: "ꗣ",
|
||||
text: i18n.modules
|
||||
}),
|
||||
navLink({
|
||||
href: "/settings",
|
||||
emoji: "⚙",
|
||||
text: i18n.settings
|
||||
})
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "content",
|
||||
emoji: "✦",
|
||||
title: i18n.menuContent
|
||||
},
|
||||
navLink({
|
||||
href: "/mentions",
|
||||
emoji: "✺",
|
||||
text: i18n.mentions
|
||||
}),
|
||||
renderLatestLink(),
|
||||
renderThreadsLink(),
|
||||
renderTopicsLink(),
|
||||
renderSummariesLink(),
|
||||
renderPopularLink(),
|
||||
renderMultiverseLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "governance",
|
||||
emoji: "⚖",
|
||||
title: i18n.menuGovernance
|
||||
},
|
||||
navLink({
|
||||
href: "/inhabitants",
|
||||
emoji: "ꖘ",
|
||||
text: i18n.inhabitantsLabel
|
||||
}),
|
||||
renderTribesLink(),
|
||||
renderParliamentLink(),
|
||||
renderCourtsLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "office",
|
||||
emoji: "⌂",
|
||||
title: i18n.menuOffice
|
||||
},
|
||||
renderVotationsLink(),
|
||||
renderEventsLink(),
|
||||
renderTasksLink(),
|
||||
renderReportsLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "tools",
|
||||
emoji: "⚒",
|
||||
title: i18n.menuTools
|
||||
},
|
||||
renderAILink(),
|
||||
navLink({
|
||||
href: "/stats",
|
||||
emoji: "ꕷ",
|
||||
text: i18n.statistics
|
||||
}),
|
||||
navLink({
|
||||
href: "/blockexplorer",
|
||||
emoji: "ꖸ",
|
||||
text: i18n.blockchain
|
||||
}),
|
||||
renderCipherLink(),
|
||||
renderLegacyLink()
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
div(
|
||||
{ class: "sidebar-right" },
|
||||
nav(
|
||||
ul(
|
||||
navGroup(
|
||||
{
|
||||
id: "network",
|
||||
emoji: "☍",
|
||||
title: i18n.menuNetwork
|
||||
},
|
||||
navLink({
|
||||
href: "/activity",
|
||||
emoji: "ꔙ",
|
||||
text: i18n.activityTitle
|
||||
}),
|
||||
renderTrendingLink(),
|
||||
renderOpinionsLink(),
|
||||
renderForumLink(),
|
||||
renderInvitesLink(),
|
||||
navLink({
|
||||
href: "/peers",
|
||||
emoji: "⧖",
|
||||
text: i18n.peers
|
||||
})
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "creative",
|
||||
emoji: "✎",
|
||||
title: i18n.menuCreative
|
||||
},
|
||||
renderFeedLink(),
|
||||
renderPixeliaLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "economy",
|
||||
emoji: "¤",
|
||||
title: i18n.menuEconomy
|
||||
},
|
||||
renderBankingLink(),
|
||||
renderMarketLink(),
|
||||
renderProjectsLink(),
|
||||
renderJobsLink(),
|
||||
renderTransfersLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "media",
|
||||
emoji: "▤",
|
||||
title: i18n.menuMedia
|
||||
},
|
||||
renderAudiosLink(),
|
||||
renderBookmarksLink(),
|
||||
renderDocsLink(),
|
||||
renderImagesLink(),
|
||||
renderVideosLink()
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
main({ id: "content", class: "main-column" }, elements),
|
||||
div(
|
||||
{ class: "sidebar-right" },
|
||||
nav(
|
||||
ul(
|
||||
navGroup(
|
||||
{
|
||||
id: "network",
|
||||
emoji: "☍",
|
||||
title: i18n.menuNetwork
|
||||
},
|
||||
navLink({
|
||||
href: "/activity",
|
||||
emoji: "ꔙ",
|
||||
text: i18n.activityTitle
|
||||
}),
|
||||
renderTrendingLink(),
|
||||
renderOpinionsLink(),
|
||||
renderForumLink(),
|
||||
renderInvitesLink(),
|
||||
navLink({
|
||||
href: "/peers",
|
||||
emoji: "⧖",
|
||||
text: i18n.peers
|
||||
})
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "creative",
|
||||
emoji: "✎",
|
||||
title: i18n.menuCreative
|
||||
},
|
||||
renderFeedLink(),
|
||||
renderPixeliaLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "economy",
|
||||
emoji: "¤",
|
||||
title: i18n.menuEconomy
|
||||
},
|
||||
renderBankingLink(),
|
||||
renderMarketLink(),
|
||||
renderProjectsLink(),
|
||||
renderJobsLink(),
|
||||
renderTransfersLink()
|
||||
),
|
||||
navGroup(
|
||||
{
|
||||
id: "media",
|
||||
emoji: "▤",
|
||||
title: i18n.menuMedia
|
||||
},
|
||||
renderAudiosLink(),
|
||||
renderBookmarksLink(),
|
||||
renderDocsLink(),
|
||||
renderImagesLink(),
|
||||
renderVideosLink()
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
label({ for: 'mobile-menu-toggle', class: 'mobile-menu-backdrop' }),
|
||||
renderFooter()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue