Temos o sidebar configurado em nosso site, que é em sua maioria privado com um pouco de conteúdo público.
Estamos muito interessados em ter a barra lateral ativa apenas quando o usuário estiver logado (ou seja, não mostrada para anon).
Eu tentei este CSS:
// oculta a barra lateral de usuários não logados (atrapalha o layout, infelizmente)
.anon {
.sidebar-wrapper, .header-sidebar-toggle {
display: none;
}
}
Isso de fato oculta a barra lateral, mas o layout da barra lateral permanece (e não fica bom). Existe uma maneira melhor?
Eu sei que poderíamos mudar para a nova visualização de Menu Suspenso no Cabeçalho (em navigation_menu) e resolver dessa forma, mas gostaríamos muito de ter a barra lateral visível para nossos usuários logados (sem um clique), se possível.
Com isso você pode ocultar a barra lateral para anônimos.
Comum / CSS
html.anon {
// Ocultar a barra lateral estreita do desktop
// versão mobile da barra lateral que também é ativada no desktop com largura inferior a 1000px
.d-header .hamburger-panel {
display: none;
}
// Ocultar o manto do cabeçalho quando o menu abre
.header-cloak {
display: none !important;
}
}
Desktop / CSS
html.anon {
// Se a barra lateral estiver aberta, use o estilo fechado
body.has-sidebar-page {
#main-outlet-wrapper {
grid-template-columns: 0 minmax(0, 1fr);
gap: 0;
padding-left: 10px;
}
.wrap {
max-width: var(--d-max-width);
}
}
// Ocultar o botão do hambúrguer
.header-sidebar-toggle {
display: none;
}
}
Mobile / CSS
html.anon {
// Ocultar o botão do hambúrguer
.d-header-icons {
.header-dropdown-toggle {
&.hamburger-dropdown {
display: none;
}
}
}
}