Create a left and right topbar section (maybe a middle one as well?)

[choldgraf]

It is common to have topbar content that is both justified to the left and justified to the right. Other themes also include a "center topbar" section that aligns with the page content.

How could we accommodate these different workflows?

For example:

pydata sphinx theme uses left, center, and right topbar areas:

gitbook theme uses left, center, and right topbar areas:

quantecon theme uses left, and right topbar areas:

[pradyunsg]

Yup yup. My thought process is that this would be what the default wrapper would provide. I just didn't have enough time to write it all down. 🙃

[pradyunsg]

Bringing this over from the above issue:

I think the header should be split into left_header and right_header template sections.

Actually, I had a bit of a different idea for this:

• If there's 2 tags (i.e. elements) in the header component, they would be left-right aligned.
• If there's 3 elements in the header component, they would be left-center-right aligned.

This is much easier to maintain upstream thanks to fewer points to interact with downstream themes and it is easier to adapt for RTL languages as well.

[choldgraf]

interesting - that seems reasonable from an end-user standpoint, though I must admit that it seems complicated to implement from my perspective. If you think it's more straightforward though, then go for it :-)

[pradyunsg]

Flexbox FTW!

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content

Just need to have justify-content: space-between. :)

[choldgraf]

wow that's cool - so then from a theme developer's standpoint, you'd need to document that "any components put in the topbar should use the justify-content CSS rule"? That's not something that could automatically be done for people right?

Also just a note that what I've seen more-commonly than having the center <div> right in the middle, is instead having it justified to the "content section" of the page. E.g., that's what gitbook does as well as the pydata theme. Maybe that is something theme-specific though

[pradyunsg]

The sections/topbar.html file would be:

<div>This is aligning left</div>
<div>This is aligning right</div>

Or

<div>This is aligning left</div>
<div>This is aligning center</div>
<div>This is aligning right</div>

And they'll get aligned as the names suggest. :)

[choldgraf]

makes sense - so basically a sub-theme would:

1. Override sections/topbar.html in their template.

2. If they added two divs like:

   <div>{{ include some templates }}</div>
   <div>{{ include some templates }}</div>
   

   Then they'd be in two divs that take up the left and right half of the screen.

and if they added in a third div, then the middle div would be middle-centered.

or maybe more generally the divs would have the same width and spread evenly?

[pradyunsg]

and if they added in a third div, then the middle div would be middle-centered.

Yes, if the left and right are the same width. Otherwise the middle item will be slightly off.

or maybe more generally the divs would have the same width and spread evenly?

Not the width but yea, spread evenly.

[pradyunsg]

Closing this out, since downstream themes should be able to do this on their own, through regular margin shenenigans/floats/flexbox; and I'd prefer to give them more direct control.