Reimplement compose and add tiling windows

core/templates/partials/settings-hierarchy-nav.html

@@ -1,12 +1,28 @@
 {% if settings_nav %}
-  <h1 class="title is-4">{{ settings_nav.title }}</h1>
-  <div class="tabs is-boxed is-small mb-4 security-page-tabs">
-    <ul>
-      {% for tab in settings_nav.tabs %}
-        <li class="{% if tab.active %}is-active{% endif %}">
-          <a href="{{ tab.href }}">{{ tab.label }}</a>
-        </li>
-      {% endfor %}
-    </ul>
-  </div>
+  <nav class="gia-settings-nav" aria-label="Settings navigation">
+    {% if settings_nav.groups %}
+      <div class="tabs is-boxed is-small mb-2 security-page-tabs gia-settings-nav-groups">
+        <ul>
+          {% for tab in settings_nav.groups %}
+            <li class="{% if tab.active %}is-active{% endif %}">
+              <a href="{{ tab.href }}">{{ tab.label }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+    {% for row in settings_nav.rows %}
+      {% if row.tabs|length > 1 %}
+        <div class="tabs is-toggle is-toggle-rounded is-small security-page-tabs gia-settings-nav-row {% if forloop.last %}mb-4{% else %}mb-2{% endif %}">
+          <ul>
+            {% for tab in row.tabs %}
+              <li class="{% if tab.active %}is-active{% endif %}">
+                <a href="{{ tab.href }}">{{ tab.label }}</a>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endif %}
+    {% endfor %}
+  </nav>
 {% endif %}