[Bonsai docs] Add version switcher to sidebar and update custom styles (#6004)

* Create brand.html

* Update custom.css for version switcher

* Update brand.html

src/bonsai/docs/_static/custom.css

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap");
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&display=swap');
+
 h1, h2, h3, h4 {
     font-weight: normal;
     color: #7cbf33;
@@ -8,22 +9,27 @@ h1, h2, h3, h4 {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+
 a {
     text-decoration: none;
 }
+
 .toc-tree .reference:hover {
     color: #d98014;
 }
+
 .sidebar-brand-text {
     font-size: 1rem;
     text-align: center;
 }
+
 .blockbutton {
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
 }
+
 .blockbutton a {
     display: block;
     padding-top: 15px;
@@ -35,12 +41,15 @@ a {
     color: #fff;
     text-decoration: none;
 }
+
 .blockbutton a:hover {
     background: #70ba35;
 }
+
 .highlight .hll {
     background-color: #ffc2;
 }
+
 section img {
     display: block;
     margin-left: auto;
@@ -48,6 +57,7 @@ section img {
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     border-radius: 5px;
 }
+
 .location-scene img {
     display: inline;
     border-radius: 0px;
@@ -55,9 +65,11 @@ section img {
     vertical-align: middle;
     margin-top: -3px;
 }
+
 .location-scene p {
     margin: 0.75rem;
 }
+
 .location-scene {
     border: 1px solid var(--color-admonition-title);
     background-color: var(--color-admonition-title-background);
@@ -65,24 +77,27 @@ section img {
     font-style: italic;
     color: var(--color-admonition-text);
 }
+
 img.transparent {
     width: auto;
     height: auto;
     box-shadow: none;
 }
+
 img.icon {
     width: auto;
     height: auto;
     border-radius: 0px;
     box-shadow: none;
     vertical-align: middle;
-    vertical-align: middle;
 }
+
 .content figure figcaption>p {
     font-style: italic;
     font-size: small;
     color: #808080;
 }
+
 span.menuselection {
     border: 1px solid var(--color-admonition-title);
     background-color: var(--color-admonition-title-background);
@@ -92,8 +107,6 @@ span.menuselection {
     padding-right: 3px;
 }
 
-
-
 /* Start section cards. */
 .toc-cards {
     display: grid;
@@ -102,3 +115,19 @@ span.menuselection {
     list-style-type: none;
     margin-bottom: 24px;
 }
+
+/* New styles for the version switcher */
+.doc-version-switcher {
+    display: block;
+    margin: 10px auto;
+    padding: 5px;
+    font-size: 1rem;
+    border-radius: 5px;
+    border: 1px solid #7cbf33;
+    background-color: #f7f7f6;
+    color: #2e3436;
+}
+
+.doc-version-switcher:hover {
+    border-color: #d98014;
+}

src/bonsai/docs/_templates/sidebar/brand.html

@@ -0,0 +1,47 @@
+{#-
+
+Hi there!
+
+You might be interested in https://pradyunsg.me/furo/customisation/sidebar/
+
+Although if you're reading this, chances are that you're either familiar
+enough with Sphinx that you know what you're doing, or landed here from that
+documentation page.
+
+Hope your day's going well. :)
+
+-#}
+<a class="sidebar-brand{% if logo %} centered{% endif %}" href="{{ pathto(master_doc) }}">
+  {% block brand_content %}
+  {%- if logo_url %}
+  <div class="sidebar-logo-container">
+    <img class="sidebar-logo" src="{{ logo_url }}" alt="Logo"/>
+  </div>
+  {%- endif %}
+  {%- if theme_light_logo and theme_dark_logo %}
+  <div class="sidebar-logo-container">
+    <img class="sidebar-logo only-light" src="{{ pathto('_static/' + theme_light_logo, 1) }}" alt="Light Logo"/>
+    <img class="sidebar-logo only-dark" src="{{ pathto('_static/' + theme_dark_logo, 1) }}" alt="Dark Logo"/>
+  </div>
+  {%- endif %}
+  {% if not theme_sidebar_hide_name %}
+  <span class="sidebar-brand-text">{{ docstitle if docstitle else project }}</span>
+  {%- endif %}
+  {% endblock brand_content %}
+  <select class="doc-version-switcher" onchange="switchDocs()">
+    <option value="stable">Stable</option>
+    <option value="unstable">Unstable</option>
+  </select>
+</a>
+
+<script>
+  function switchDocs() {
+    var selectBox = document.querySelector('.doc-version-switcher');
+    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
+    if (selectedValue === 'unstable') {
+      window.location.href = 'http://docs-unstable.bonsaibim.org/';
+    } else {
+      window.location.href = 'http://docs.bonsaibim.org/';
+    }
+  }
+</script>