Mude a nova barra lateral do lado esquerdo para o lado direito (fórum em inglês)

Olá pessoal,

Pesquisei nos fóruns e perguntei sobre isso no novo chat há alguns dias. Fui aconselhado a postar nos fóruns. Espero que alguém possa ajudar.

Existe algum plugin para mover a nova barra lateral para o lado direito?

ou existe uma maneira integrada de alternar os lados da esquerda para a direita?

5 curtidas

Não há uma maneira integrada de fazer isso ou qualquer plugin existente que eu conheça. Portanto, embora uma personalização que faça isso possa ser possível, ela provavelmente estaria abrindo um novo caminho e pode encontrar alguns problemas imprevistos.

5 curtidas

Para visualização em desktop:

    body #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) 0;
    }
    
    body.sidebar-animate #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
    }
    body.has-sidebar-page #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) var(--d-sidebar-width);
        padding: 0 0 0 10px;
    }
8 curtidas

Obrigado. Onde eu colo isso, aqui?

Para garantir, coloque-o em Desktop->CSS

6 curtidas

Obrigado! Funciona parcialmente. O menu sanduíche ainda está no canto superior esquerdo e empurra o logotipo.

Gostaria que o menu sanduíche na barra de navegação permanecesse na posição original com os ícones do lado direito.

Além disso, ativar a barra lateral realmente deixa a largura da página mais estreita. (Tenho uma largura de página personalizada que é ignorada quando a barra lateral está habilitada)

Ótimo trabalho @Lhc_fl :clap:

Existe uma configuração do site para isso. Procure por menu de navegação e defina como “Menu suspenso no cabeçalho” :slight_smile:

4 curtidas

Não, você está perdendo a pergunta inteira. Quando você ativa o menu suspenso do cabeçalho, a barra lateral é removida. :slightly_smiling_face:

A discussão está perguntando sobre “trocar” a barra lateral de esquerda para direita e manter o ícone de menu no lado direito, onde sempre esteve. (Poder-se-ia argumentar que pertence lá).

Eu já tenho o “Menu suspenso do cabeçalho” ativado, até que haja uma maneira de ter a barra lateral e o ícone no lado direito.

O logotipo à esquerda leva para a “página inicial do fórum” (ótimo). Mas agora a posição do logotipo é substituída por um ícone de alternância da barra lateral, e você pode alternar a barra lateral acidentalmente. Acho que todos os ícones do menu devem permanecer à direita.

O alternador da barra lateral não precisa ser constantemente alternado, então movê-lo para a esquerda do logotipo é um ponto de acesso excessivo.

O mesmo com a barra lateral, prefiro que o conteúdo da página fique à esquerda e a barra lateral à direita.

É apenas preferência pessoal, tenho certeza. Então, estou apenas perguntando, pois outros proprietários de fóruns devem estar bem com tudo à esquerda.

4 curtidas

Ah, sim, entendi. Esqueci que o hambúrguer da direita não aciona uma barra lateral real. Mesmo conteúdo, mas mais um dropdown, não uma barra lateral, o que você quer.

Dei uma olhada no código do Discourse, que infelizmente ainda parece algumas fórmulas crípticas de um mago para mim :mage: :scroll:
Parece que os dois componentes são renderizados de forma muito diferente.

O conteúdo do cabeçalho que contém o widget de alternância da barra lateral: discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at fde9e6bc25227b69195181d45ee4360c25c279da · discourse/discourse · GitHub

O widget da barra lateral: discourse/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js at 5b6604f5a7e1c8ff29fe556236dbf86872908b03 · discourse/discourse · GitHub

O código atual do hambúrguer da direita: discourse/app/assets/javascripts/discourse/app/widgets/header.js at c43cb0c5716a3671a682c87295f5a7dad61eb65d · discourse/discourse · GitHub

Talvez isso ajude alguém a criar um componente de tema para esse fim.

3 curtidas

Obrigado! É um sanduíche de queijo grelhado, a propósito, não um hambúrguer. :nerd_face:

2 curtidas

Estou curioso para entender por que você quer mover o menu para o lado direito? É um feedback que você acha que seria melhor para todos os sites, ou há alguma particularidade do seu próprio site que torna a localização do lado esquerdo inadequada? Você tem outro menu lá, por exemplo? Caso contrário, acho que a localização do lado esquerdo para um menu de navegação que pode ser ocultado/exibido está se tornando um padrão da indústria.

Qualquer termo que te deixe com mais fome! :rofl: Embora eu ache que hambúrguer é mais reconhecível. Pessoalmente, eu gosto de chamá-lo de hamburglar! :man_detective:

2 curtidas

Bem, adicione esta linha.

span.header-sidebar-toggle {
    order: 1;
}

2 curtidas

Só para constar, tive alguns usuários que solicitaram que fosse no lado direito depois que o implementei. Talvez eles estivessem acostumados com a localização do hambúrguer?

4 curtidas

Obrigado pelo trabalho árduo e pelas atualizações. :coffee:

Isso é possível agora, por acaso?

1 curtida

Oi @haydenjames :slight_smile:
Você já pediu isso como uma solicitação de recurso aqui.
Não há necessidade de postar várias vezes em tópicos diferentes, então movi sua postagem de Discourse 3.0 is Here! :slight_smile:

Além disso, @Lhc_fl forneceu boas soluções alternativas. :+1:

A solução alternativa estava de fato quase lá. Eu só precisava que o hambúrguer permanecesse o segundo ícone da direita e não o primeiro à direita. Mas @Lhc_fl confirmou que isso não poderia ser alcançado apenas com CSS.

Prefiro ter o conteúdo à esquerda e a barra lateral (menos usada) à direita - sem mover a localização original do ícone do hambúrguer.

Editar: Acho que permitir a liberdade de escolher os lados e não dividir os ícones do lado direito em esquerdo e direito incentivará mais proprietários de fóruns a habilitar a barra lateral.

Atualmente, habilitar a barra lateral divide os ícones do menu para a extrema esquerda e direita e move o logotipo do fórum para que o ícone do hambúrguer fique agora ao lado dos cliques do fórum-home.

Eu gostaria de manter isto:
image

Enquanto tenho isto:

Se possível no futuro… Obrigado. :handshake:

4 curtidas

Você pode ser capaz de modificar este componente de tema possivelmente para alcançar a posição do menu hambúrguer.

1 curtida

Não tenho certeza se entendi. Desculpe. As capturas de tela desse plugin parecem exatamente com a nova abordagem do Discourse de separar os ícones bem à esquerda e bem à direita.

No entanto, não quero que o ícone do hambúrguer de alternância do menu fique tão perto do logotipo de retorno à página inicial do fórum. Quero alternar a barra lateral e, em seguida, usar os fóruns normalmente sem ter o ícone de alternância da barra lateral na localização do logotipo principal à esquerda.

Atualmente, alternar o menu DESLIGADO - como os desenvolvedores o implementaram - não agrega valor ou vantagem porque a largura da página retorna a uma largura já muito estreita. Tudo isso significa que a maioria dos usuários não ficará alternando a barra lateral constantemente - e com razão.

Mesmo que o fizessem, ter o ícone do hambúrguer à esquerda da área de clique do logotipo de retorno à página inicial não é (na minha opinião) um bom lugar e vai contra o design anterior do Discourse, onde todos os ícones estão no lado direito da barra de menu superior. Eu gostaria de manter isso:
image
…enquanto também mantenho o conteúdo à esquerda e a barra lateral à direita. (conforme a captura de tela acima)

Obrigado por responder! Continuarei lendo mais sobre esse plugin para entender melhor se estamos nos referindo às mesmas mudanças.

1 curtida

O que eu quis dizer foi que, combinado com a movimentação do painel para a direita com o componente @Lhc_fl. Estudando o código no componente que linkei, você pode conseguir recolocar o menu hambúrguer entre a busca e o perfil. Se eu entendi sua solicitação e o problema com a solução alternativa atual feita por Lhc_fl.

Como já usa código para mover o menu, pode haver detalhes no código como um exemplo para modificar e alcançar o efeito desejado que você procura.

No celular, sua captura de tela está na posição desejada que você procura no modo Desktop.

Alguém com experiência pode conseguir extrair o código usado no celular também e aplicá-lo ao desktop. Através de estudar o “inspect element” no desktop enquanto carrega o site na visualização de celular.

Para a largura, há um novo componente para mudar a largura do site que pode ser de interesse para explorar.

1 curtida

Sim, estou esperando por isso. Você está correto sobre os ícones de menu móvel vs desktop.

1 curtida