Switch the new sidebar from left to right side (english forum)

Hi guys,

I searched the forums and asked about it in the new chat a few days ago. I was advised to post in the forums. Hopefully someone can help.

Is there a plugin to move the new sidebar to the right side?

or is there a built-in way to switch sides from left to right?

5 Likes

There is no built in way to do this or any existing plugin that I’m aware of. So while a customization that does may be possible, it would likely be breaking some new ground and may bump into some unforseen issues.

5 Likes

For desktop view:

    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 Likes

Thanks. Where do I paste that, here?

To be on the safe side, please put it in Desktop->CSS

6 Likes

Thanks! It works partially. The sandwich menu is still on the top left and pushes the logo.

I would like the sandwich menu in navbar to remain in the original position with the right-side icons.

Also, toggling the sidebar on actually makes the page width narrower. (I have a custom page width which is ignored when sidebar is enabled)

Great job @Lhc_fl :clap:

There is a site setting for this. Look for navigation menu and set it to “Header Dropdown” :slight_smile:

4 Likes

No, you are missing the entire question. When you enable the header dropdown, the sidebar is removed. :slightly_smiling_face:

The thread is asking about “Switching” the sidebar from left to right and keeping the sandwich on the right where it has always been. (one could argue belongs)

I already have “Header Dropdown” enabled until there is a way to have both the sidebar and icon on the right.

The logo on the left takes you to “forum home” (lovely). But now the logo position is replaced with a sidebar toggle icon, and you can toggle the sidebar by accident. I think all the menu icons should remain on the right.

The sidebar toggle does not need to be constantly toggled, so to move it left of the logo is too much of a hotspot.

Same with the sidebar, I prefer the page content to be left and the sidebar right.

It’s personal preference only, I’m sure. So only inquiring, as other forum owners must be ok with everything left.

4 Likes

Ah, yes, I understand. I forgot that the right hamburger doesn’t trigger a real sidebar. Same content but more of a dropdown, not a sidebar, which you want.

I had a look at the Discourse’s code which unfortunately still looks like some wizard’s cryptic formulas
to me
:mage: :scroll:
It seems that the two components are rendered very differently.

The header content that contains the sidebar toggle widget: discourse/header-contents.js at fde9e6bc25227b69195181d45ee4360c25c279da · discourse/discourse · GitHub

The sidebar widget: discourse/sidebar-toggle.js at 5b6604f5a7e1c8ff29fe556236dbf86872908b03 · discourse/discourse · GitHub

The current right hamburger code: discourse/header.js at c43cb0c5716a3671a682c87295f5a7dad61eb65d · discourse/discourse · GitHub

Maybe that would help some to create a theme component for this purpose.

3 Likes

Thanks! It’s a grilled cheese sandwich btw not a hamburger. :nerd_face:

2 Likes

I’m curious to understand why you want to move the menu to the right side? Is this feedback you think would be better for all sites, or is there a particularity of your own site that makes the left side location not suitable? Do you have another menu there, for instance? Otherwise I think the left side location for a navigation menu that can be hidden/shown is becoming industry standard…

Whichever term makes you hungrier! :rofl: Though I think hamburger is more recognizable. Personally, I like calling it the hamburglar! :man_detective:

1 Like

Well, add this line.

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

2 Likes

FWIW I had some users request it being on the right side after I rolled it out. Maybe they were used to the hamburger location?

4 Likes

Thanks for the hard work and updates. :coffee:

Is this possible now, by any chance?

1 Like

Hi @haydenjames :slight_smile:
You already asked that as a feature request here.
There is no need to post multiple times on different topics, so I moved your post from Discourse 3.0 is Here! :slight_smile:

Also, @Lhc_fl provided nice workarounds. :+1:

Workaround was indeed almost there. I just needed the hamburger to remain the second icon from the right and not the first to the right. But @Lhc_fl confirmed that that could not be achieved via CSS alone.

I prefer to have content left and the sidebar (less used) right - without moving the original hamburger icon location.

Edit: I think allowing the freedom to choose sides and not split the right side icons into left and right will encourage more forum owners to enable the sidebar.

Currently, enabling the sidebar splits up the menu icons to far left and right and moves the forum logo so that the hamburger icon is now right next to forum-home clicks.

I would like to retain this:
image

While having this:

If possible in the future… Thanks. :handshake:

3 Likes

You might be able to modify this theme component possibly to achieve the hamburger menu position.

1 Like

Not sure I follow. Apologies. The screenshots on that plugin looks exactly the same as the new Discourse approach of splitting the icons far-left and far-right.

However, I don’t want the menu toggle hamburger icon to be so close to the return-to-forum-home logo. I want to toggle on the sidebar and then use the forums normally without having the sidebar toggle icon in the hot-spot left logo location.

Currently toggling the menu OFF - as devs have implemented it - adds no value or advantage because the page width returns to an already too narrow width. This all means most users won’t be constantly toggling sidebar on and off - rightfully so.

Even if they did, having the hamburger icon to the left of the return-home logo hot-spot isn’t (IMO) a good place and goes against the previous design of Discourse, where all icons are on the right side of the top menu bar. I would like to retain that:
image
…while also keeping content left and having the sidebar to right. (as per the above screenshot)

Thanks for responding! I will continue reading more about that plugin to better understand if we are referring to the same changes.

1 Like

What I meant was that combined with moving the panel to the right with @Lhc_fl component. Studying the code in the component I linked, you might be able to put the hamburger menu back between the search and profile. If I understand your request and issue with the current workaround made by Lhc_fl.

As it already uses code to move the menu it might have details in the code as an example to modify to be able achieve the desired effect your looking for.

On mobile your screenshot is in the desired position your looking for on Desktop mode.

Someone with the experience might be able to extract the code used in mobile as well and apply that to desktop. Via either or both studying inspect element on desktop while loading site in mobile view.

For width there is a new component to change site width that maybe of interest to explore.

1 Like

Yes, I’m hoping for this. You are correct about the mobile vs desktop menu icons.

1 Like