From 28cd08bbba6ab99d65cb4d3f6a9440046d99819e Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 3 Mar 2021 09:28:12 +0100
Subject: [PATCH] core: make user settings use vertical tabs

---
 authentik/api/pagination_schema.py          | 3 ++-
 authentik/core/templates/user/settings.html | 2 +-
 web/src/elements/Tabs.ts                    | 9 ++++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/authentik/api/pagination_schema.py b/authentik/api/pagination_schema.py
index a7571d41e..9490b8463 100644
--- a/authentik/api/pagination_schema.py
+++ b/authentik/api/pagination_schema.py
@@ -61,7 +61,8 @@ class PaginationInspector(PaginatorInspector):
         """
         Get the pagination parameters for a single paginator **instance**.
 
-        Should return :data:`.NotHandled` if this inspector does not know how to handle the given `paginator`.
+        Should return :data:`.NotHandled` if this inspector
+        does not know how to handle the given `paginator`.
 
         :param BasePagination paginator: the paginator
         :rtype: list[openapi.Parameter]
diff --git a/authentik/core/templates/user/settings.html b/authentik/core/templates/user/settings.html
index 50f70d560..ff803e4be 100644
--- a/authentik/core/templates/user/settings.html
+++ b/authentik/core/templates/user/settings.html
@@ -13,7 +13,7 @@
                 <p>{% trans "Configure settings relevant to your user profile." %}</p>
             </div>
         </section>
-        <ak-tabs>
+        <ak-tabs vertical="true">
             <section slot="page-1" data-tab-title="{% trans 'User details' %}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                 <div class="pf-u-display-flex pf-u-justify-content-center">
                     <div class="pf-u-w-75">
diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts
index 1144e793c..814106eb4 100644
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@@ -12,10 +12,17 @@ export class Tabs extends LitElement {
     @property()
     currentPage?: string;
 
+    @property({type: Boolean})
+    vertical = false;
+
     static get styles(): CSSResult[] {
         return [GlobalsStyle, TabsStyle, css`
             ::slotted(*) {
                 height: 100%;
+                flex-grow: 2;
+            }
+            :host([vertical]) {
+                display: flex;
             }
         `];
     }
@@ -39,7 +46,7 @@ export class Tabs extends LitElement {
             }
             this.currentPage = pages[0].attributes.getNamedItem("slot")?.value;
         }
-        return html`<div class="pf-c-tabs">
+        return html`<div class="pf-c-tabs ${this.vertical ? "pf-m-vertical pf-m-box" : ""}">
                 <ul class="pf-c-tabs__list">
                     ${pages.map((page) => this.renderTab(page))}
                 </ul>