[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/_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>