wider layout, is it better?

[lazarusA]

This should gives additional space. Similar to the width from vanilla Documenter.

[asinghvi17]

I can see arguments both for and against. Let's get some test branches on other repos with this, to see how it looks? I can do GeoMakie for example, and probably DimensionalData is a good bet as well...

[asinghvi17]

https://github.com/MakieOrg/GeoMakie.jl/pull/252 - https://geo.makie.org/previews/PR252 https://github.com/JuliaGeo/GeometryOps.jl/pull/166 - https://juliageo.org/GeometryOps.jl/previews/PR166

[avik-pal]

+1 for this. If not by default (personally, I think this is a better default), we should have an option to opt-in to this format.

Currently the navigation bar seems to be aligned incorrectly

[avik-pal]

Also maybe a little more spacing on the left? The anchors ("#") seem almost too close to the left sidebar

[thofma]

+1 from me! I tried to do this a while ago, but got lost in a web of Vitepress issues and css hell.

[lazarusA]

+1 for this. If not by default (personally, I think this is a better default), we should have an option to opt-in to this format.

Currently the navigation bar seems to be aligned incorrectly

Ok. Latest commit should give better paddings. @asinghvi17 it looks like your tests are not using this branch, or is not using the style from the template.

If there is not more feedback, this should be good to go. Thanks everyone for chiming in 😄 .

[asinghvi17]

Yeah the style isn't applied. Will fix that.

[avik-pal]

Ok. Latest commit should give better padding

Yeah padding seems fixed.

See the gap between the navigation bar and the left sidebar. And the line separating the Package Name from the headers in the sidebar seems to overflow into the text area.

[lazarusA]

really good catch! Latest commit should fix that.

[avik-pal]

Looks quite nice https://lux.csail.mit.edu/previews/PR721/tutorials/ :tada:

[lazarusA]

mmm... I'm still not happy with the left side paddings.

I need to match the width default values. Looks cool, but it is too small.

Also, I would do only "Documentation" and not "Lux.jl Documentation", you already have the logo for the first part.

[avik-pal]

Also, I would do only "Documentation" and not "Lux.jl Documentation", you already have the logo for the first part.

Good point! Though the downside is it also appears in the titlebar, so it would appear as "XYZ | Documentation". I will go with "Lux.jl Docs" to prevent the overflow for now.

[lazarusA]

Ok, final version, it turns out we only need this:

.VPDoc.has-aside .content-container {
  max-width: 100% !important;
}
.aside {
  max-width: 200px !important;
  padding-left: 0 !important;
}
.VPDoc {
  padding-top: 15px !important;
  padding-left: 5px !important;

}
/* This one does the right menu */

.VPDocOutlineItem li {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 200px;
}

.VPNavBar .title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .VPDoc {
    padding-left: 25px !important;  
  }
}

the previous approach expands the whole available screen (which is fine, maybe?), but this last one keeps the content centered while also having a wider area for it. Hence, I will settled for this and merge 😄 .