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')
+      }
+    })
+  }
+}

app/views/email_settings/index.html.erb

@@ -1,3 +1,7 @@
+<div class="max-w-6xl mx-auto">
+  <div class="flex space-x-8">
+    <%= render 'shared/settings_nav' %>
+    <div class="mt-4">
       Email settings
       <% value = @encrypted_config.value || {} %>
       <%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off' } do |f| %>
@@ -25,3 +29,6 @@ Email settings
         <% end %>
         <%= f.button button_title %>
       <% end %>
+    </div>
+  </div>
+</div>

app/views/esign_settings/index.html.erb

@@ -1,3 +1,7 @@
+<div class="max-w-6xl mx-auto">
+  <div class="flex space-x-8">
+    <%= render 'shared/settings_nav' %>
+    <div class="mt-4">
       <%= form_for '', url: settings_esign_index_path, method: :post do |f| %>
         <file-dropzone data-name="verify_attachments">
           <label for="file">
@@ -8,3 +12,6 @@
         </file-dropzone>
         <%= f.button button_title %>
       <% end %>
+    </div>
+  </div>
+</div>

app/views/shared/_settings_nav.html.erb

@@ -0,0 +1,33 @@
+<menu-active class="block">
+  <div class="mt-4 -ml-3.5">
+    <ul class="menu menu-compact px-2 w-52">
+      <li class="menu-title"><span>Settings</span></li>
+      <li></li>
+      <li>
+        <a href="<%= settings_profile_index_path %>" class="hover:bg-base-300">
+          Profile
+        </a>
+      </li>
+      <li>
+        <a href="<%= settings_email_index_path %>" class="hover:bg-base-300">
+          Email
+        </a>
+      </li>
+      <li>
+        <a href="<%= settings_storage_index_path %>" class="hover:bg-base-300">
+          Storage
+        </a>
+      </li>
+      <li>
+        <a href="<%= settings_esign_index_path %>" class="hover:bg-base-300">
+          eSign
+        </a>
+      </li>
+      <li>
+        <a href="<%= settings_users_path %>" class="hover:bg-base-300">
+          Team
+        </a>
+      </li>
+    </ul>
+  </div>
+</menu-active>

app/views/storage_settings/index.html.erb

@@ -1,3 +1,7 @@
+<div class="max-w-6xl mx-auto">
+  <div class="flex space-x-8">
+    <%= render 'shared/settings_nav' %>
+    <div class="mt-4">
       Storage settings
       <% value = @encrypted_config.value || { 'service' => 'disk' } %>
       <% configs = value['configs'] || {} %>
@@ -65,3 +69,6 @@ Storage settings
         </disable-hidden>
         <%= f.button button_title %>
       <% end %>
+    </div>
+  </div>
+</div>

app/views/users/index.html.erb

@@ -1,3 +1,7 @@
+<div class="max-w-6xl mx-auto">
+  <div class="flex space-x-8">
+    <%= render 'shared/settings_nav' %>
+    <div class="mt-4">
       <div>
         Users
         <a href="<%= new_user_path %>" data-turbo-frame="modal">New User</a>
@@ -35,3 +39,6 @@
           </tr>
         <% end %>
       </table>
+    </div>
+  </div>
+</div>

config/routes.rb

@@ -55,6 +55,7 @@ Rails.application.routes.draw do
     resources :storage, only: %i[index create], controller: 'storage_settings'
     resources :email, only: %i[index create], controller: 'email_settings'
     resources :esign, only: %i[index create], controller: 'esign_settings'
+    resources :profile, only: %i[index create]
     resources :users, only: %i[index]
   end
 end

tailwind.config.js

@@ -3,6 +3,13 @@ module.exports = {
     require('daisyui')
   ],
   daisyui: {
-    themes: ['cupcake']
+    themes: [
+      {
+        cupcake: {
+          ...require('daisyui/src/colors/themes')['[data-theme=cupcake]'],
+          primary: '#E4E0E1'
+        }
+      }
+    ]
   }
 }