Como controlar a ordem das seções do menu na barra lateral?

[Aurora]

Olá a todos,

Estou tendo um problema com o menu da barra lateral no meu fórum Discourse. A ordem das seções parece fixa — por exemplo, quando crio seções personalizadas adicionais, elas sempre aparecem acima da seção “Categorias”.

Para minha comunidade, seria importante ter essas seções personalizadas abaixo das categorias, mas não consigo encontrar nenhuma maneira de alterar ou controlar essa ordem.

Existe alguma maneira de gerenciar a posição das seções da barra lateral, ou atualmente não é possível personalizar a hierarquia/ordem desses blocos?

Agradeço antecipadamente por qualquer orientação!

[Lilly (Lillian Louis)]

Olá, você pode controlar a ordem das seções da barra lateral com CSS. Basta adicionar um novo componente com algo como o seguinte código CSS. Vá para admin -> temas e componentes -> componentes e crie um novo componente local

e adicione este código à aba CSS, onde custom-section-name é o nome slug de uma seção de menu personalizada:

.sidebar-wrapper {
  .sidebar-custom-sections {
    display: contents;
  }
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}

captura de tela da aba CSS

Você terá que alterar os números e adicionar seções personalizadas ao código acima para atender às suas necessidades específicas. Ficará algo assim:

[Aurora]

Obrigado! Eu tinha acabado de encontrar e implementar isso - mas não funcionou no celular

Rearrange Sidebar Order?

since the navigation menu sidebar-sections class is using the display = "flex" property you can do something like this - just change the numbers based on what order you want the sections to appear: in common css .sidebar-section-wrapper.sidebar-section[data-section-name="categories"] { order: 1; } .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] { order: 2; } .sidebar-section-wrapper.sidebar-section[data-section-name="chat-dms"] { order: 3; } .sidebar-section-wrappe…

[Aurora]

aqui também já foi um tópico - mas isso também não funciona

How to sort nav menu sections?

Hi @Lilly I used your CSS code to rearranged the order of the nav sections. It works well when the webpage in the full size. [image] However, I try to resize the webpage to a smaller width, the order settings in the CSS code are invaild. The last section turned to the second just like the following pic: [image] I found that the display: block; property of the sidebar-sections prevents the order from having an effect. Then, I try to add some code to the CSS code. .sidebar-sections…

[chapoi]

A classe sidebar-wrapper no celular é substituída por sidebar-hamburger-dropdown, acredito. Portanto, adicioná-la também deve fazê-la funcionar no celular:

.sidebar-wrapper, 
.sidebar-hamburger-dropdown { 
  .sidebar-custom-sections {
    display: contents;
  } 
  [data-section-name="community"] {
    order: -4;
  }
  [data-section-name="categories"] {
    order: -3;
  }
  [data-section-name="tags"] {
    order: -2;
  }
  [data-section-name="custom-section-name"] {
    order: -1;
  }
}

[Aurora]

Obrigado! Acabei de tentar - mas infelizmente não funcionou.

[chapoi]

Ah, mais um detalhe: a barra lateral não está usando flex no mobile, aparentemente. Então, você precisaria adicionar isso também.

.sidebar-sections {
display: flex;
flex-direction: column;
}

[Aurora]

Muito obrigado!! Isso funciona!! Ótimo!

[rakekniven]

O nome do cabeçalho da minha seção personalizada contém um espaço, por exemplo, “Ajuda aos usuários”.

Tentei usar data-section-name="ajuda aos usuários", mas isso não funciona.

Como posso especificar o espaço? É necessário algum mascaramento aqui? Por favor, ajude.

EDITAR:
Após inspecionar o site usando as ferramentas de desenvolvedor do FF, descobri que a solução é “ajuda-usuários”.