Added navigation to settings.

assets/less/classes/settings/wrapper.less

@@ -0,0 +1,42 @@
+.settings__wrapper {
+    display: flex;
+
+    @media (max-width: @site-mobile-width) {
+        flex-direction: column;
+    }
+
+    &__sidebar {
+        flex: 0 0 auto;
+
+        @media (max-width: @site-mobile-width) {
+            width: 100%;
+        }
+    }
+
+    &__menu {
+        width: 280px;
+        position: sticky;
+        top: 2px;
+        margin: 0 2px 2px;
+
+        @media (max-width: @site-mobile-width) {
+            width: 100%;
+        }
+    }
+
+    &__link {
+        color: inherit;
+        text-decoration: none;
+        display: block;
+        padding: 4px;
+        margin: 2px;
+        font-size: 1.5em;
+        line-height: 1.5em;
+        border-radius: 2px;
+        transition: background-color .2s;
+
+        &:hover {
+            background-color: var(--background-colour-translucent);
+        }
+    }
+}

assets/less/main.less

@@ -124,6 +124,7 @@ body {
 @import "classes/changelog-actions-tags";
 
 // Settings
+@import "classes/settings/wrapper";
 @import "classes/settings/container";
 @import "classes/settings/description";
 @import "classes/settings/disabled";

templates/user/settings.twig

@@ -4,6 +4,13 @@
 {% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
 
 {% set title = 'Settings' %}
+{% set menu = {
+    'account': '<i class="fas fa-user fa-fw"></i> Account',
+    'roles': '<i class="fas fa-user-check"></i> Roles',
+    'sessions': '<i class="fas fa-key fa-fw"></i> Sessions',
+    'login-attempts': '<i class="fas fa-user-lock fa-fw"></i> Login Attempts',
+    'account-log': '<i class="fas fa-file-alt fa-fw"></i> Account Log',
+} %}
 
 {% block content %}
     {% if errors|length > 0 %}
@@ -16,6 +23,21 @@
         </div>
     {% endif %}
 
+    <div class="settings__wrapper">
+        <div class="settings__wrapper__sidebar">
+            <div class="container settings__container settings__wrapper__menu">
+                {{ container_title('Settings') }}
+
+                {% for id, text in menu %}
+                    <a href="#{{ id }}" class="settings__wrapper__link">
+                        {{ text|raw }}
+                    </a>
+                {% endfor %}
+
+            </div>
+        </div>
+
+        <div class="settings__wrapper__content">
             <form action="" method="post" class="container settings__container" id="account">
                 {{ container_title('<i class="fas fa-user fa-fw"></i> Account', '', true) }}
                 {{ input_csrf('settings') }}
@@ -177,8 +199,8 @@
                 </div>
             </div>
 
-    <div class="container settings__container" id="logins">
+            <div class="container settings__container" id="login-attempts">
-        {{ container_title('<i class="fas fa-user-lock fa-fw"></i> Login History', '', true) }}
+                {{ container_title('<i class="fas fa-user-lock fa-fw"></i> Login Attempts', '', true) }}
                 {% set lhpagination = pagination(
                     logins.amount,
                     logins.take,
@@ -213,7 +235,7 @@
                 </div>
             </div>
 
-    <div class="container settings__container" id="log">
+            <div class="container settings__container" id="account-log">
                 {{ container_title('<i class="fas fa-file-alt fa-fw"></i> Account Log', '', true) }}
                 {% set alpagination = pagination(
                     logs.amount,
@@ -248,4 +270,6 @@
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 {% endblock %}