From 9d9a4c9f5aae0920bf046c71cdd6e5f8cc4c4d91 Mon Sep 17 00:00:00 2001
From: Egor Savkin <es@m-labs.hk>
Date: Mon, 21 Oct 2024 15:30:25 +0800
Subject: [PATCH] Split dropdown

On main click it downloads stable, in dropdown there are two choices - stable and beta. Similar to the downloads on jetbrains website

Signed-off-by: Egor Savkin <es@m-labs.hk>
---
 sass/css/_base.scss  | 15 ++++++++++++++-
 templates/index.html | 11 +++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/sass/css/_base.scss b/sass/css/_base.scss
index 1f8e134..ac8f359 100644
--- a/sass/css/_base.scss
+++ b/sass/css/_base.scss
@@ -202,7 +202,14 @@ ul:not(.navbar-nav) li {
 
 
 .download-selector {
-  display: inline-block;
+  display: inline-flex;
+
+  .divider {
+    border-right: solid 1px white;
+    margin: 0.125rem 0;
+    height: inherit;
+    z-index: 10;
+  }
 
   .dropdown-menu {
     border: none;
@@ -218,6 +225,12 @@ ul:not(.navbar-nav) li {
     &:after {
       align-self: center;
     }
+    &[aria-expanded='true']:after {
+      transform: rotate(-180deg);
+    }
+    span {
+      margin-right: 0.5rem;
+    }
   }
 
   ul {
diff --git a/templates/index.html b/templates/index.html
index 7a23bb5..ce7ec9e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -53,13 +53,16 @@
               <a href="{{ get_url(path='@/experiment-control/place-order.md') }}" class="btn btn-primary btn-inversed btn-lg">Order hardware</a>
               <a href="https://m-labs.hk/artiq/manual/" class="btn btn-primary btn-lg">Manual</a>
               <a href="https://forum.m-labs.hk" class="btn btn-primary btn-lg">Forum</a>
-              <div class="dropdown download-selector">
-                <a class="btn btn-primary btn-lg d-inline-flex dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <div class="btn-group download-selector">
+                <a class="btn btn-primary btn-lg" href="https://nixbld.m-labs.hk/job/artiq/extra/msys2-offline-installer/latest/download/1">
                   <img src="/images/icons/icon-download.svg" class="d-inline-block align-self-center mx-1" style="height: 1rem" alt="download">
                   Windows installer
                 </a>
-
-                <ul class="dropdown-menu shadow">
+                <div class="divider"></div>
+                <button type="button" class="btn btn-primary btn-lg dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                  <span>stable</span>
+                </button>
+                <ul class="dropdown-menu shadow dropdown-menu-end">
                   <li><a class="dropdown-item" href="https://nixbld.m-labs.hk/job/artiq/extra/msys2-offline-installer/latest/download/1">ARTIQ-8 (stable)</a></li>
                   <li><a class="dropdown-item" href="https://nixbld.m-labs.hk/job/artiq/extra-beta/msys2-offline-installer/latest/download/1">ARTIQ-9 (beta)</a></li>
                 </ul>