(Diataxis) Grid in Left Sidebar: Non-HTML Options

[michaelweinold]

The developers of the PyMC Example Gallery documentation had the fantastic idea to put a Diataxis grid in the left sidebar:

Their relevant html template looks something like this:

<!-- diataxis type categories -->
  <div class="container sd-fs-6 sd-font-weight-bold">
    <div class="row border-top border-bottom">
      {% set t_bool = "tutorial" in post.category|map('string') %}
      <div class="col"><a class="{{ setcolorclass(t_bool) }}" href="{{ pathtocategory('tutorial') }}">Tutorial</a></div>
      {% set h_bool = "how-to" in post.category|map('string') %}
      <div class="col"><a class="{{ setcolorclass(h_bool) }}" href="{{ pathtocategory('how-to') }}">How-to</a></div>
      <div class="w-100"></div>
      {% set e_bool = "explanation" in post.category|map('string') %}
      <div class="col"><a class="{{ setcolorclass(e_bool) }}" href="{{ pathtocategory('explanation') }}">Explanation</a></div>
      {% set r_bool = "reference" in post.category|map('string') %}
      <div class="col"><a class="{{ setcolorclass(r_bool) }}" href="{{ pathtocategory('reference') }}">Reference</a></div>
    </div>
  </div>

I tried to adapt this, but it looks a bit awkward.

Is there a way to adapt the gallery-grid directive (or something similar from sphinx-design), like is used on the theme homepage:

for use with the sidebar? I would greatly appreciate any suggestions/ideas!

[drammock]

I'd probably start with a Bootstrap grid for this, since each cell only has a single word in it.

https://getbootstrap.com/docs/5.3/layout/grid/

[michaelweinold]

Thank you for the suggestion!

[michaelweinold]

Following @drammock's suggestion, we added a grid. The relevant files:

source/_static/css/custom.css
source/_templates/sidebar_grid_diataxis.html