Add top transfer dropdown

frontend-js/dist/app.js

@@ -93,6 +93,33 @@
   window.addEventListener("DOMContentLoaded", () => bind(document.querySelector(".three-pane")));
 })();
 
+(function () {
+  function closeAll() {
+    document.querySelectorAll(".ribbon-menu.open").forEach((menu) => {
+      menu.classList.remove("open");
+      const button = menu.querySelector("[data-ribbon-menu-toggle]");
+      if (button) button.setAttribute("aria-expanded", "false");
+    });
+  }
+
+  document.addEventListener("click", (event) => {
+    const button = event.target.closest("[data-ribbon-menu-toggle]");
+    if (button) {
+      const menu = button.closest(".ribbon-menu");
+      const willOpen = !menu.classList.contains("open");
+      closeAll();
+      menu.classList.toggle("open", willOpen);
+      button.setAttribute("aria-expanded", willOpen ? "true" : "false");
+      return;
+    }
+    if (!event.target.closest(".ribbon-menu")) closeAll();
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") closeAll();
+  });
+})();
+
 (function () {
   function setOpen(open) {
     document.body.classList.toggle("backstage-open", open);

frontend-js/dist/style.css

@@ -60,9 +60,56 @@ body.ol2013 {
   padding: 0 16px; height: 100%;
   color: #eaf3fb; text-decoration: none;
   border-bottom: 3px solid transparent;
+  background: transparent;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  font: inherit;
+  cursor: pointer;
 }
 .tab:hover { background: var(--ol-blue-dark); color: #fff; }
 .tab.active { background: #fff; color: var(--ol-blue); border-bottom-color: #fff; }
+.ribbon-menu {
+  position: relative;
+  height: 100%;
+}
+.ribbon-menu-button::after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid currentColor;
+}
+.ribbon-dropdown {
+  position: absolute;
+  top: 44px;
+  left: 0;
+  min-width: 238px;
+  background: #fff;
+  color: var(--ol-text);
+  border: 1px solid var(--ol-border);
+  box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
+  display: none;
+  z-index: 25;
+}
+.ribbon-menu.open .ribbon-dropdown { display: block; }
+.ribbon-dropdown-item {
+  display: block;
+  padding: 9px 13px;
+  color: var(--ol-text);
+  text-decoration: none;
+  border-left: 3px solid transparent;
+}
+.ribbon-dropdown-item:hover {
+  background: #eef6fd;
+}
+.ribbon-dropdown-item.active {
+  color: var(--ol-blue-dark);
+  background: var(--ol-sel);
+  border-left-color: var(--ol-blue);
+  font-weight: 600;
+}
 .mail-logo {
   position: relative;
   width: 17px;