app/assets/stylesheets/main_nav.scss

@@ -16,7 +16,7 @@
     @include media-max(large) {
       display: grid;
       grid-template-columns: repeat(1fr);
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
     }
 
     li {
@@ -41,6 +41,10 @@
           padding-right: 0;
         }
 
+        @include media-max(small) {
+          font-size: 0.85rem;
+        }
+
         &.active {
           color: $text-color-body;
           border-bottom: 2px solid #ffd000;

app/controllers/security_controller.rb

@@ -0,0 +1,7 @@
+class SecurityController < ApplicationController
+  before_action :require_user_signed_in
+
+  def index
+    @current_section = :security
+  end
+end

app/views/dashboard/index.html.erb

@@ -37,12 +37,3 @@
     </div>
   </div>
 </section>
-
-<section>
-  <h3>Password change</h3>
-  <p>
-    <%= form_with(url: settings_reset_password_path, method: :post) do %>
-      <%= submit_tag("Send me a password reset link") %>
-    <% end %>
-  </p>
-</section>

app/views/security/index.html.erb

@@ -0,0 +1,12 @@
+<section>
+  <h2>Security</h2>
+</section>
+
+<section>
+  <h3>Password change</h3>
+  <p>
+    <%= form_with(url: settings_reset_password_path, method: :post) do %>
+      <%= submit_tag("Send me a password reset link") %>
+    <% end %>
+  </p>
+</section>

app/views/shared/_main_nav.html.erb

@@ -13,6 +13,10 @@
         <%= link_to "Donations", donations_path,
               class: @current_section == :contributions ? "active" : nil %>
       </li>
+      <li>
+        <%= link_to "Security", security_path,
+              class: @current_section == :security ? "active" : nil %>
+      </li>
     </ul>
   </div>
 </nav>

config/routes.rb

@@ -12,6 +12,8 @@ Rails.application.routes.draw do
   get 'settings', to: 'settings#index'
   post 'settings_reset_password', to: 'settings#reset_password'
 
+  get 'security', to: 'security#index'
+
   resources :invitations, only: ['index', 'show', 'create', 'destroy']
 
   namespace :admin do