Cambia la nueva barra lateral de la izquierda a la derecha (foro en inglés)

Hola chicos,

Busqué en los foros y pregunté sobre esto en el nuevo chat hace unos días. Me aconsejaron que publicara en los foros. Espero que alguien pueda ayudar.

¿Hay algún plugin para mover la nueva barra lateral a la derecha?

¿o hay una forma integrada de cambiar de lado de izquierda a derecha?

5 Me gusta

No hay una forma integrada de hacer esto ni ningún plugin existente del que tenga conocimiento. Por lo tanto, si bien es posible una personalización que lo haga, probablemente estaría abriendo nuevos caminos y podría encontrarse con algunos problemas imprevistos.

5 Me gusta

Para la vista de escritorio:

    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 Me gusta

Gracias. ¿Dónde pego eso, aquí?

Para estar seguro, póngalo en Escritorio->CSS

6 Me gusta

¡Gracias! Funciona parcialmente. El menú sándwich sigue en la parte superior izquierda y empuja el logo.

Me gustaría que el menú sándwich en la barra de navegación permaneciera en la posición original con los iconos del lado derecho.

Además, al activar la barra lateral, el ancho de la página se reduce. (Tengo un ancho de página personalizado que se ignora cuando la barra lateral está habilitada)

Gran trabajo @Lhc_fl :clap:

Hay una configuración del sitio para esto. Busca menú de navegación y configúralo en “Menú desplegable del encabezado” :slight_smile:

4 Me gusta

No, te estás perdiendo toda la pregunta. Cuando habilitas el menú desplegable del encabezado, se elimina la barra lateral. :slightly_smiling_face:

El hilo pregunta sobre “cambiar” la barra lateral de izquierda a derecha y mantener el sándwich a la derecha, donde siempre ha estado. (se podría argumentar que pertenece)

Ya tengo habilitado el “Menú desplegable del encabezado” hasta que haya una forma de tener tanto la barra lateral como el icono a la derecha.

El logo a la izquierda te lleva a “inicio del foro” (encantador). Pero ahora la posición del logo es reemplazada por un icono para alternar la barra lateral, y puedes alternar la barra lateral por accidente. Creo que todos los iconos del menú deberían permanecer a la derecha.

El alternador de la barra lateral no necesita ser alternado constantemente, por lo que moverlo a la izquierda del logo es un punto de acceso demasiado grande.

Lo mismo ocurre con la barra lateral, prefiero que el contenido de la página esté a la izquierda y la barra lateral a la derecha.

Es solo una preferencia personal, estoy seguro. Así que solo pregunto, ya que a otros propietarios de foros no les debe importar tener todo a la izquierda.

4 Me gusta

Ah, sí, entiendo. Olvidé que la hamburguesa de la derecha no activa una barra lateral real. Mismo contenido pero más parecido a un menú desplegable, no a una barra lateral, que es lo que quieres.

Eché un vistazo al código de Discourse, que desafortunadamente todavía me parece una fórmula críptica de algún mago :mage: :scroll: Parece que los dos componentes se renderizan de manera muy diferente.

El contenido de la cabecera que contiene el widget de alternancia de la barra lateral: discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at fde9e6bc25227b69195181d45ee4360c25c279da · discourse/discourse · GitHub

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

El código actual de la hamburguesa de la derecha: discourse/app/assets/javascripts/discourse/app/widgets/header.js at c43cb0c5716a3671a682c87295f5a7dad61eb65d · discourse/discourse · GitHub

Quizás eso ayude a alguien a crear un componente temático para este propósito.

3 Me gusta

¡Gracias! Es un sándwich de queso a la parrilla, por cierto, no una hamburguesa. :nerd_face:

2 Me gusta

Tengo curiosidad por entender por qué quieres mover el menú al lado derecho. ¿Es una opinión que crees que sería mejor para todos los sitios, o hay alguna particularidad de tu propio sitio que hace que la ubicación del lado izquierdo no sea adecuada? ¿Tienes otro menú allí, por ejemplo? De lo contrario, creo que la ubicación del lado izquierdo para un menú de navegación que se puede ocultar/mostrar se está convirtiendo en un estándar de la industria.

¡Cualquiera de los dos términos te da más hambre! :rofl: Aunque creo que hamburguesa es más reconocible. Personalmente, ¡me gusta llamarlo el hamburglar! :man_detective:

2 Me gusta

Bueno, agrega esta línea.

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

2 Me gusta

Para que conste, algunos usuarios solicitaron que estuviera en el lado derecho después de que lo implementé. ¿Quizás estaban acostumbrados a la ubicación de la hamburguesa?

4 Me gusta

Gracias por el arduo trabajo y las actualizaciones. :coffee:

¿Es esto posible ahora, por casualidad?

1 me gusta

Hola @haydenjames :slight_smile:
Ya lo solicitaste como una solicitud de función aquí.
No es necesario publicar varias veces sobre diferentes temas, así que moví tu publicación de Discourse 3.0 is Here! :slight_smile:

Además, @Lhc_fl proporcionó buenas soluciones alternativas. :+1:

La solución alternativa estaba casi ahí. Solo necesitaba que la hamburguesa siguiera siendo el segundo icono desde la derecha y no el primero a la derecha. Pero @Lhc_fl confirmó que eso no se podía lograr solo con CSS.

Prefiero tener el contenido a la izquierda y la barra lateral (menos utilizada) a la derecha, sin mover la ubicación original del icono de hamburguesa.

Editar: Creo que permitir la libertad de elegir lados y no dividir los iconos del lado derecho en izquierdo y derecho animará a más propietarios de foros a habilitar la barra lateral.

Actualmente, habilitar la barra lateral divide los iconos del menú demasiado a la izquierda y a la derecha y mueve el logotipo del foro para que el icono de hamburguesa esté ahora justo al lado de los clics de inicio del foro.

Me gustaría conservar esto:
image

Mientras tengo esto:

Si es posible en el futuro… Gracias. :handshake:

4 Me gusta

Es posible que puedas modificar este componente de tema para lograr la posición del menú hamburguesa.

1 me gusta

No estoy seguro de entender. Disculpas. Las capturas de pantalla de ese plugin se ven exactamente igual que el nuevo enfoque de Discourse de separar los iconos a la extrema izquierda y a la extrema derecha.

Sin embargo, no quiero que el icono de hamburguesa para activar el menú esté tan cerca del logo de regreso a la página principal del foro. Quiero activar la barra lateral y luego usar los foros normalmente sin tener el icono de activación de la barra lateral en la ubicación del logo de acceso rápido a la izquierda.

Actualmente, desactivar el menú, como lo han implementado los desarrolladores, no aporta ningún valor ni ventaja porque el ancho de la página vuelve a un ancho ya demasiado estrecho. Todo esto significa que la mayoría de los usuarios no activarán y desactivarán constantemente la barra lateral, y con razón.

Incluso si lo hicieran, tener el icono de hamburguesa a la izquierda del área de acceso rápido del logo de regreso a casa no es (en mi opinión) un buen lugar y va en contra del diseño anterior de Discourse, donde todos los iconos están en el lado derecho de la barra del menú superior. Me gustaría conservar eso:
image
…mientras también mantengo el contenido a la izquierda y la barra lateral a la derecha. (según la captura de pantalla anterior)

¡Gracias por responder! Continuaré leyendo más sobre ese plugin para comprender mejor si nos referimos a los mismos cambios.

1 me gusta

Lo que quise decir fue que, combinado con mover el panel a la derecha con el componente @Lhc_fl. Estudiando el código del componente que enlacé, podrías volver a colocar el menú de hamburguesa entre la búsqueda y el perfil. Si entiendo tu solicitud y el problema con la solución alternativa actual creada por Lhc_fl.

Dado que ya utiliza código para mover el menú, podría tener detalles en el código como ejemplo para modificar y lograr el efecto deseado que buscas.

En móvil, tu captura de pantalla está en la posición deseada que buscas en modo de escritorio.

Alguien con experiencia podría extraer el código utilizado en móvil también y aplicarlo al escritorio. Ya sea estudiando el elemento de inspección en el escritorio mientras se carga el sitio en vista móvil, o ambos.

Para el ancho, hay un nuevo componente para cambiar el ancho del sitio que podría ser de interés explorar.

1 me gusta

Sí, espero eso. Tienes razón sobre los iconos del menú móvil frente a los de escritorio.

1 me gusta