Rework UI to have vertical menus

4 files changed, 55 insertions, 19 deletions

diff --git a/templates/settings/_menu.html b/templates/settings/_menu.html
index 4f71651..e2dc70b 100644
--- a/templates/settings/_menu.html
+++ b/templates/settings/_menu.html
@@ -1,5 +1,28 @@
 <nav>
-    <a href="{% url "settings_profile" %}" {% if section == "profile" %}class="selected"{% endif %}>Profile</a>
-    <a href="#" {% if section == "interface" %}class="selected"{% endif %}>Interface</a>
-    <a href="#" {% if section == "filtering" %}class="selected"{% endif %}>Filtering</a>
+    <h3>Identity</h3>
+    <a href="{% url "settings_profile" %}" {% if section == "profile" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-user"></i> Profile
+    </a>
+    <a href="{% url "settings_interface" %}" {% if section == "interface" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-display"></i> Interface
+    </a>
+    {% if request.user.admin %}
+    <h3>Account</h3>
+    <a href="#" {% if section == "login" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-key"></i> Login &amp; Security
+    </a>
+    <h3>Administration</h3>
+    <a href="{% url "admin_basic" %}" {% if section == "basic" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-book"></i> Basic
+    </a>
+    <a href="{% url "admin_domains" %}" {% if section == "domains" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-globe"></i> Domains
+    </a>
+    <a href="{% url "admin_users" %}" {% if section == "users" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-users"></i> Users
+    </a>
+    <a href="{% url "admin_identities" %}" {% if section == "identities" %}class="selected"{% endif %}>
+        <i class="fa-solid fa-id-card"></i> Identities
+    </a>
+    {% endif %}
 </nav>
diff --git a/templates/settings/base.html b/templates/settings/base.html
new file mode 100644
index 0000000..d5efa69
--- /dev/null
+++ b/templates/settings/base.html
@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{% block title %}{% block subtitle %}{% endblock %} - Settings{% endblock %}
+
+{% block right_content %}
+    {% include "settings/_menu.html" %}
+{% endblock %}
diff --git a/templates/settings/profile.html b/templates/settings/profile.html
index 1a7c29f..5c00557 100644
--- a/templates/settings/profile.html
+++ b/templates/settings/profile.html
@@ -1,18 +1,22 @@
-{% extends "base.html" %}
+{% extends "settings/base.html" %}
 
-{% block title %}Profile - Settings{% endblock %}
+{% block subtitle %}Profile{% endblock %}
 
 {% block content %}
-    {% block menu %}
-        {% include "settings/_menu.html" %}
-    {% endblock %}
     <form action="." method="POST" enctype="multipart/form-data" >
         {% csrf_token %}
-        {% for field in form %}
-            {% include "forms/_field.html" %}
-        {% endfor %}
+        <fieldset>
+            <legend>Details</legend>
+            {% include "forms/_field.html" with field=form.name %}
+            {% include "forms/_field.html" with field=form.summary %}
+        </fieldset>
+        <fieldset>
+            <legend>Images</legend>
+            {% include "forms/_field.html" with field=form.icon preview=request.identity.icon.url %}
+            {% include "forms/_field.html" with field=form.image preview=request.identity.image.url %}
+        </fieldset>
         <div class="buttons">
-            <a href="{{ request.identity.urls.view }}" class="button secondary">View Profile</a>
+            <a href="{{ request.identity.urls.view }}" class="button secondary left">View Profile</a>
             <button>Save</button>
         </div>
     </form>
diff --git a/templates/settings/settings.html b/templates/settings/settings.html
index 016eebb..a933627 100644
--- a/templates/settings/settings.html
+++ b/templates/settings/settings.html
@@ -1,15 +1,17 @@
-{% extends "base.html" %}
+{% extends "settings/base.html" %}
 
-{% block title %}{{ section.title }} - Settings{% endblock %}
+{% block subtitle %}{{ section.title }}{% endblock %}
 
 {% block content %}
-    {% block menu %}
-        {% include "settings/_menu.html" %}
-    {% endblock %}
     <form action="." method="POST">
         {% csrf_token %}
-        {% for field in form %}
-            {% include "forms/_field.html" %}
+        {% for title, fields in fieldsets.items %}
+            <fieldset>
+                <legend>{{ title }}</legend>
+                {% for field in fields %}
+                    {% include "forms/_field.html" %}
+                {% endfor %}
+            </fieldset>
         {% endfor %}
         <div class="buttons">
             <button>Save</button>