add settings navbar

app/javascript/application.js

@@ -6,6 +6,7 @@ import ToggleVisible from './elements/toggle_visible'
 import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
 import FileDropzone from './elements/file_dropzone'
+import MenuActive from './elements/menu_active'
 
 import FlowBuilder from './flow_builder/builder'
 
@@ -17,6 +18,7 @@ window.customElements.define('toggle-visible', ToggleVisible)
 window.customElements.define('disable-hidden', DisableHidden)
 window.customElements.define('turbo-modal', TurboModal)
 window.customElements.define('file-dropzone', FileDropzone)
+window.customElements.define('menu-active', MenuActive)
 
 window.customElements.define('flow-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/menu_active.js

@@ -0,0 +1,9 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.querySelectorAll('a').forEach((link) => {
+      if (document.location.pathname.startsWith(link.pathname)) {
+        link.classList.add('bg-base-300')
+      }
+    })
+  }
+}