Cómo controlar el orden de las secciones del menú en la barra lateral

[Aurora]

Hola a todos,

Tengo un problema con el menú de la barra lateral en mi foro de Discourse. El orden de las secciones parece fijo; por ejemplo, cuando creo secciones personalizadas adicionales, siempre aparecen encima de la sección “Categorías”.

Para mi comunidad, sería importante tener esas secciones personalizadas debajo de las categorías en lugar de encima, pero no encuentro ninguna forma de cambiar o controlar este orden.

¿Hay alguna forma de gestionar la posición de las secciones de la barra lateral, o actualmente no es posible personalizar la jerarquía/orden de estos bloques?

¡Gracias de antemano por cualquier orientación!

[Lilly (Lillian Louis)]

Hola, puedes controlar el orden de las secciones de la barra lateral con CSS. Simplemente agrega un nuevo componente con algo como el siguiente código CSS. Ve a admin -> temas y componentes -> componentes y crea un nuevo componente local

y agrega este código a la pestaña CSS, donde custom-section-name es el nombre slug de una sección de menú 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 pantalla de la pestaña CSS

Tendrás que cambiar los números y agregar secciones personalizadas al código anterior para adaptarlo a tus necesidades específicas. Se verá algo como esto:

[Aurora]

¡Gracias! Acabo de encontrar e implementar esto, pero no funcionó en el móvil.

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]

Aquí también fue un tema, pero tampoco 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]

La clase sidebar-wrapper en dispositivos móviles es reemplazada por sidebar-hamburger-dropdown, creo. Así que añadirla debería hacer que funcione también en móviles:

.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]

¡Gracias! Lo acabo de probar, pero lamentablemente no funcionó.

[chapoi]

Oh, un detalle más: la barra lateral aparentemente no está usando flex en el móvil. Así que necesitarás añadir eso también.

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

[Aurora]

¡¡Muchas gracias!! ¡¡Eso funciona!! ¡Genial!

[rakekniven]

El nombre del encabezado de mi sección personalizada contiene un espacio, por ejemplo, “Ayuda a los usuarios”.

Intenté usar data-section-name=“help users”, pero eso no funciona.

¿Cómo puedo especificar el espacio? ¿Se necesita algún enmascaramiento aquí? Por favor, ayuda.

EDITAR:
Después de inspeccionar el sitio usando las herramientas de desarrollo de FF, encontré que la solución es “help-users”.