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,6 +1,10 @@
-Email settings
-<% value = @encrypted_config.value || {} %>
-<%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off' } do |f| %>
+<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| %>
         <%= f.fields_for :value do |ff| %>
           <div>
             <%= ff.label :host %>
@@ -24,4 +28,7 @@ Email settings
           </div>
         <% end %>
         <%= f.button button_title %>
-<% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/esign_settings/index.html.erb

@@ -1,4 +1,8 @@
-<%= form_for '', url: settings_esign_index_path, method: :post do |f| %>
+<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">
             <input id="attachment_uuid" name="attachment_uuid" class="hidden" data-target="file-dropzone.valueField" type="text">
@@ -7,4 +11,7 @@
           </label>
         </file-dropzone>
         <%= f.button button_title %>
-<% end %>
+      <% 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,7 +1,11 @@
-Storage settings
-<% value = @encrypted_config.value || { 'service' => 'disk' } %>
-<% configs = value['configs'] || {} %>
-<%= form_for @encrypted_config, url: settings_storage_index_path, method: :post, html: { autocomplete: 'off' } do |f| %>
+<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'] || {} %>
+      <%= form_for @encrypted_config, url: settings_storage_index_path, method: :post, html: { autocomplete: 'off' } do |f| %>
         <% options = [['Disk', 'disk'], ['AWS S3', 'aws_s3'], ['Google Cloud', 'google']] %>
         <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>">
           <% [['Disk', 'disk'], ['AWS S3', 'aws_s3'], ['Google Cloud', 'google']].each do |(label, val)| %>
@@ -64,4 +68,7 @@ Storage settings
           <% end %>
         </disable-hidden>
         <%= f.button button_title %>
-<% end %>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/users/index.html.erb

@@ -1,8 +1,12 @@
-<div>
+<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>
-</div>
-<table>
+      </div>
+      <table>
         <tr>
           <th>
             User
@@ -34,4 +38,7 @@
             </td>
           </tr>
         <% end %>
-</table>
+      </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'
+        }
+      }
+    ]
   }
 }