add mobile settings navigation

app/controllers/settings_index_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class SettingsIndexController < ApplicationController
+  skip_authorization_check
+
+  def index; end
+end

app/views/accounts/show.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow max-w-xl mx-auto">
+  <div class="flex-grow md:max-w-xl md:mx-auto">
     <h1 class="text-4xl font-bold mb-4">
       <%= t('account') %>
     </h1>

app/views/email_smtp_settings/index.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow max-w-xl mx-auto min-w-0">
+  <div class="flex-grow md:max-w-xl md:mx-auto min-w-0">
     <h1 class="text-4xl font-bold mb-4">Email SMTP</h1>
     <% value = @encrypted_config.value || {} %>
     <%= form_for @encrypted_config, url: settings_email_index_path, method: :post, html: { autocomplete: 'off', class: 'space-y-4' } do |f| %>

app/views/notifications_settings/index.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow max-w-xl mx-auto">
+  <div class="flex-grow md:max-w-xl md:mx-auto">
     <h1 class="text-4xl font-bold mb-4">
       <%= t('email_notifications') %>
     </h1>

app/views/personalization_settings/show.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow max-w-xl mx-auto">
+  <div class="flex-grow md:max-w-xl md:mx-auto">
     <p class="text-4xl font-bold mb-4">
       <%= t('email_templates') %>
     </p>

app/views/profile/index.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow max-w-xl mx-auto">
+  <div class="flex-grow md:max-w-xl md:mx-auto">
     <h1 class="text-4xl font-bold mb-4">
       <%= t('profile') %>
     </h1>

app/views/settings_index/index.html.erb

@@ -0,0 +1,7 @@
+<div class="mb-2 w-full">
+  <a href="<%= root_path %>" class="flex items-center space-x-0.5 font-medium">
+    <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>
+    <span><%= t('back') %></span>
+  </a>
+</div>
+<%= render 'shared/settings_nav', expanded: true %>

app/views/shared/_navbar.html.erb

@@ -28,7 +28,13 @@
           <span class="text-sm align-text-top"><%= current_user.initials %></span>
         </label>
         <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box min-w-[160px] text-right">
-          <li>
+          <li class="md:hidden">
+            <%= link_to settings_index_path, class: 'flex items-center' do %>
+              <%= svg_icon('settings', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
+              <span class="mr-1"><%= t('settings') %></span>
+            <% end %>
+          </li>
+          <li class="max-md:hidden">
             <%= link_to settings_profile_index_path, class: 'flex items-center' do %>
               <%= svg_icon('adjustments', class: 'w-5 h-5 flex-shrink-0 stroke-2') %>
               <span class="mr-1"><%= t('profile') %></span>

app/views/shared/_settings_nav.html.erb

@@ -1,7 +1,23 @@
-<div class="block w-full md:w-52 flex-none">
+<% expanded = local_assigns[:expanded] %>
+<% unless expanded %>
+  <div class="md:hidden w-full">
+    <a href="<%= settings_index_path %>" class="flex items-center space-x-0.5 font-medium">
+      <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>
+      <span><%= t('settings') %></span>
+    </a>
+  </div>
+<% end %>
+<div class="<%= expanded ? 'block max-md:-mx-3' : 'hidden md:block w-full md:w-52 flex-none' %>">
   <menu-active>
     <ul id="account_settings_menu" class="menu px-0">
-      <li class="menu-title py-0 !bg-transparent mb-3 -mt-5"><a href="<%= '/' %>" class="!bg-transparent !text-neutral font-medium flex items-center space-x-0.5"><%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %><span><%= t('back') %></span></a></li>
+      <% unless expanded %>
+        <li class="menu-title py-0 !bg-transparent mb-3 -mt-5">
+          <a href="<%= root_path %>" class="!bg-transparent !text-neutral font-medium flex items-center space-x-0.5">
+            <%= svg_icon('arrow_left', class: 'w-4 h-4 stroke-2') %>
+            <span><%= t('back') %></span>
+          </a>
+        </li>
+      <% end %>
       <li class="menu-title py-0 !bg-transparent">
         <span class="!bg-transparent"><%= t('settings') %></span>
       </li>
@@ -114,7 +130,7 @@
     </ul>
   </menu-active>
   <% if Docuseal.multitenant? || cannot?(:manage, :tenants) %>
-    <div id="support_channels" class="mx-4 border-t border-base-300 hidden md:block">
+    <div id="support_channels" class="mx-4 border-t border-base-300 <%= 'hidden md:block' unless expanded %>">
       <div class="text-sm mt-3">
         <%= t('need_help_ask_a_question_') %>
       </div>

app/views/sms_settings/index.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow max-w-xl mx-auto">
+  <div class="flex-grow md:max-w-xl md:mx-auto">
     <h1 class="text-4xl font-bold mb-4">SMS</h1>
     <%= render 'placeholder' %>
   </div>

app/views/sso_settings/index.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow max-w-xl mx-auto">
+  <div class="flex-grow md:max-w-xl md:mx-auto">
     <h1 class="text-4xl font-bold mb-4">SAML SSO</h1>
     <%= render 'placeholder' %>
   </div>

app/views/storage_settings/index.html.erb

@@ -1,6 +1,6 @@
 <div class="flex flex-wrap space-y-4 md:flex-nowrap md:space-y-0">
   <%= render 'shared/settings_nav' %>
-  <div class="flex-grow max-w-xl mx-auto">
+  <div class="flex-grow md:max-w-xl md:mx-auto">
     <h1 class="text-4xl font-bold mb-4">
       <%= t('storage') %>
     </h1>

config/routes.rb

@@ -178,6 +178,8 @@ Rails.application.routes.draw do
     resources :send_email, only: %i[create], controller: 'submitters_send_email'
   end
 
+  get 'settings' => 'settings_index#index', as: :settings_index
+
   scope '/settings', as: :settings do
     unless Docuseal.multitenant?
       resources :storage, only: %i[index create], controller: 'storage_settings'