From 98ca8f89e6eb810cc4a0e41737da4b719b1d3f60 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Thu, 23 May 2024 09:29:26 +0200
Subject: [PATCH] Use inline styles for menubar component

Since we use shadow dom anyway we can just inline the styles
and remove the necessity to precompile it.
---
 app/assets/config/alchemy_manifest.js       |   1 -
 app/assets/stylesheets/alchemy/menubar.scss |  81 ------------
 app/javascript/menubar.js                   |  10 --
 app/views/alchemy/_menubar.html.erb         | 139 ++++++++++++++++++--
 spec/features/page_feature_spec.rb          |  10 +-
 5 files changed, 131 insertions(+), 110 deletions(-)
 delete mode 100644 app/assets/stylesheets/alchemy/menubar.scss
 delete mode 100644 app/javascript/menubar.js

diff --git a/app/assets/config/alchemy_manifest.js b/app/assets/config/alchemy_manifest.js
index c8bc5c8167..55c683627b 100644
--- a/app/assets/config/alchemy_manifest.js
+++ b/app/assets/config/alchemy_manifest.js
@@ -1,7 +1,6 @@
 //= link alchemy/admin/all.css
 //= link alchemy/admin/all.js
 //= link alchemy/preview.js
-//= link alchemy/menubar.css
 //= link alchemy/print.css
 //= link alchemy/welcome.css
 //= link tinymce/plugins/alchemy_link/plugin.min.js
diff --git a/app/assets/stylesheets/alchemy/menubar.scss b/app/assets/stylesheets/alchemy/menubar.scss
deleted file mode 100644
index 0684eefb5a..0000000000
--- a/app/assets/stylesheets/alchemy/menubar.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- *= require_self
- */
-
-@import "alchemy/variables";
-@import "alchemy/mixins";
-
-#alchemy_menubar {
-  position: fixed;
-  top: 0;
-  left: -358px;
-  width: 400px;
-  z-index: 10000;
-  background: $main-menu-bg-color;
-  transition: left 0.25s cubic-bezier(0.23, 1, 0.32, 1);
-  box-shadow: 0 0 0 1px $white;
-  box-sizing: border-box;
-  height: auto;
-  padding: 8px 40px 8px 8px;
-  overflow: hidden;
-  font-family: $default-font-family;
-  font-size: $base-font-size;
-
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  &:hover {
-    left: 0;
-  }
-
-  &:after {
-    content: "";
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    background: image-url("alchemy/icon-white.svg") 1px 1px no-repeat;
-    background-size: 24px 24px;
-    transform: translateY(-50%);
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-    height: 100%;
-
-    li {
-      width: 33.333%;
-      height: 100%;
-      margin: 0;
-      padding: 0 $default-padding;
-      float: left;
-      list-style-type: none;
-      text-align: center;
-
-      a,
-      button {
-        @include button-defaults(
-          $background-color: $main-menu-bg-color,
-          $hover-color: $blue,
-          $hover-border-color: $white,
-          $border: 1px solid $white,
-          $box-shadow: none,
-          $padding: 0.5em 0,
-          $margin: 0,
-          $color: $white
-        );
-        width: 100%;
-        text-decoration: none !important;
-
-        &:after {
-          display: none;
-        }
-      }
-    }
-  }
-}
diff --git a/app/javascript/menubar.js b/app/javascript/menubar.js
deleted file mode 100644
index 369ec38019..0000000000
--- a/app/javascript/menubar.js
+++ /dev/null
@@ -1,10 +0,0 @@
-class Menubar extends HTMLElement {
-  constructor() {
-    super()
-    const template = this.querySelector("template")
-    const attachedShadowRoot = this.attachShadow({ mode: "open" })
-    attachedShadowRoot.appendChild(template.content.cloneNode(true))
-  }
-}
-
-customElements.define("alchemy-menubar", Menubar)
diff --git a/app/views/alchemy/_menubar.html.erb b/app/views/alchemy/_menubar.html.erb
index 60c2ed012b..2c525ae5d0 100644
--- a/app/views/alchemy/_menubar.html.erb
+++ b/app/views/alchemy/_menubar.html.erb
@@ -1,20 +1,133 @@
 <% if !Alchemy::Current.preview_page? && @page && can?(:edit_content, @page) %>
   <alchemy-menubar>
     <template>
-      <%= stylesheet_link_tag("alchemy/menubar") %>
-      <div id="alchemy_menubar" data-turbo="false">
-        <ul>
-          <li><%= link_to Alchemy.t(:to_alchemy), alchemy.admin_dashboard_url %></li>
-          <li><%= link_to Alchemy.t(:edit_page), alchemy.edit_admin_page_url(@page) %></li>
-          <li>
-            <%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
-              <%= button_tag Alchemy.t(:logout) %>
-            <% end %>
-          </li>
-        </ul>
+      <style>
+        .menubar {
+          --icon-size: 24px;
+          --panel-width: 525px;
+          --border-radius: 3px;
+          --left-offset: 0px;
+          display: flex;
+          position: fixed;
+          top: 0;
+          left: calc(-1 * (var(--panel-width) - var(--left-offset)));
+          z-index: 10000;
+          background: #214166;
+          transition: left 0.25s cubic-bezier(0.23, 1, 0.32, 1);
+          box-shadow: 0 0 0 1px #fff;
+          box-sizing: border-box;
+          border-bottom-right-radius: var(--border-radius);
+          padding: 12px 16px 12px;
+          gap: 12px;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: nowrap;
+          overflow: hidden;
+          font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
+            "Lucida Sans", Verdana, Tahoma, sans-serif;
+          font-size: 13px;
+        }
+
+        .menubar * {
+          box-sizing: border-box;
+          margin: 0;
+          padding: 0;
+        }
+
+        .menubar:hover,
+        .menubar:focus-within {
+          left: 0;
+        }
+
+        .menubar > svg {
+          width: var(--icon-size);
+          height: var(--icon-size);
+          flex-shrink: 0;
+          margin-left: 4px;
+        }
+
+        .menubar .button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          font-size: inherit;
+          font-weight: 700;
+          cursor: pointer;
+          border-radius: var(--border-radius);
+          background-color: transparent;
+          border: 1px solid rgba(255, 255, 255, 0.5);
+          color: #fff;
+          margin: 0;
+          padding: 0.75em 1.5em;
+          appearance: none;
+          transition: all 250ms;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          text-decoration: none;
+          white-space: nowrap;
+        }
+
+        .menubar .button:hover {
+          text-decoration: none;
+          background-color: rgba(0, 0, 0, 0.25);
+          border-color: rgba(255, 255, 255, 0.75)
+        }
+
+        .menubar .button:active {
+          box-shadow: inset 0px 1px 1px -1px #333;
+        }
+
+        .menubar .button:focus {
+          outline: solid 2px #eca96e;
+          outline-offset: 2px;
+        }
+      </style>
+
+      <div class="menubar" data-turbo="false">
+        <%= link_to alchemy.admin_dashboard_url, class: "button" do %>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path>
+          </svg>
+          <%= Alchemy.t(:to_alchemy) %>
+        <% end %>
+        <%= link_to alchemy.edit_admin_page_url(@page), class: "button" do %>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path d="M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z"></path>
+          </svg>
+          <%= Alchemy.t(:edit_page) %>
+        <% end %>
+        <%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
+          <%= button_tag class: "button" do %>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+              <path d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z"></path>
+            </svg>
+            <%= Alchemy.t(:logout) %>
+          <% end %>
+        <% end %>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+          <path fill="#fff" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z"/>
+        </svg>
       </div>
     </template>
-  </alchemy-menubar>
 
-  <%= javascript_include_tag('menubar', type: "module") %>
+    <script type="module">
+      class Menubar extends HTMLElement {
+        constructor() {
+          super()
+          const template = this.querySelector("template")
+          const attachedShadowRoot = this.attachShadow({ mode: "open" })
+          attachedShadowRoot.appendChild(template.content.cloneNode(true))
+        }
+
+        connectedCallback() {
+          const bar = this.shadowRoot.querySelector(".menubar")
+          const width = bar.offsetWidth
+          bar.style = `--panel-width: ${width}px; --left-offset: calc(var(--icon-size) + 32px);`
+        }
+      }
+
+      customElements.define("alchemy-menubar", Menubar)
+    </script>
+  </alchemy-menubar>
 <% end %>
diff --git a/spec/features/page_feature_spec.rb b/spec/features/page_feature_spec.rb
index 988403adbb..90f9672ba5 100644
--- a/spec/features/page_feature_spec.rb
+++ b/spec/features/page_feature_spec.rb
@@ -114,25 +114,25 @@
 
       it "a link to the admin area" do
         within find("alchemy-menubar").shadow_root do
-          expect(page).to have_selector("li a[href='#{alchemy.admin_dashboard_url(host: host)}']")
+          expect(page).to have_selector("a[href='#{alchemy.admin_dashboard_url(host: host)}']")
         end
       end
 
       it "a link to edit the current page" do
         within find("alchemy-menubar").shadow_root do
           expect(page).to \
-            have_selector("li a[href='#{alchemy.edit_admin_page_url(public_page, host: host)}']")
+            have_selector("a[href='#{alchemy.edit_admin_page_url(public_page, host: host)}']")
         end
       end
 
       it "a form and button to logout of alchemy" do
         within find("alchemy-menubar").shadow_root do
           expect(page).to \
-            have_selector("li form[action='#{Alchemy.logout_path}'][method='post']")
+            have_selector("form[action='#{Alchemy.logout_path}'][method='post']")
           expect(page).to \
-            have_selector("li form[action='#{Alchemy.logout_path}'] > button[type='submit']")
+            have_selector("form[action='#{Alchemy.logout_path}'] > button[type='submit']")
           expect(page).to \
-            have_selector("li form[action='#{Alchemy.logout_path}'] > input[type='hidden'][name='_method'][value='#{Alchemy.logout_method}']")
+            have_selector("form[action='#{Alchemy.logout_path}'] > input[type='hidden'][name='_method'][value='#{Alchemy.logout_method}']")
         end
       end
     end