web: Fix sidebar colors, padding.

web/src/admin/AdminInterface/index.entrypoint.css

@@ -33,9 +33,6 @@ ak-sidebar::part(about-dialog-trigger) {
     --pf-c-button--m-plain--hover--Color: var(--pf-c-nav__link--Color);
 }
 
-ak-sidebar-item::part(list-item) {
-}
-
 ak-sidebar-item:active ak-sidebar-item::part(list-item),
 ak-sidebar-item:hover ak-sidebar-item::part(list-item) {
     --pf-c-nav__link--after--BorderColor: var(--pf-global--BorderColor--200);

web/src/elements/sidebar/Sidebar.css

@@ -7,21 +7,25 @@
     --ak-c-nav__item--BorderColor: var(--pf-global--BorderColor--100);
     --pf-c-nav__subnav__link--hover--after--BorderColor: var(--pf-global--palette--orange-400);
 
+    --pf-c-nav__link--xl--PaddingLeft: var(--pf-global--spacer--md);
     --pf-c-nav__link--hover--before--BorderBottomWidth: 1px;
     --pf-c-nav__link--before--BorderColor: transparent;
 
-    --pf-c-nav__link--PaddingTop: 0.5rem;
-    --pf-c-nav__link--PaddingRight: 0.5rem;
-    --pf-c-nav__link--PaddingBottom: 0.5rem;
-    --pf-c-nav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
+    --pf-c-nav__link--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-nav__link--PaddingRight: var(--pf-global--spacer--sm);
+    --pf-c-nav__link--PaddingBottom: var(--pf-global--spacer--sm);
 
+    --pf-c-nav__subnav__link--PaddingLeft: var(--pf-global--spacer--md);
+    --pf-c-nav__subnav--PaddingBottom: var(--pf-global--spacer--sm);
     --pf-c-nav__item--before--BorderColor: transparent;
     --pf-c-nav__link--after--BorderColor: var(--pf-global--BorderColor--300);
     --pf-c-nav__link--m-current--Color: var(--ak-accent);
+
     display: flex;
     flex-direction: column;
     height: 100%;
     overflow-y: hidden;
+    padding-block-start: var(--pf-global--spacer--sm);
 }
 
 .pf-c-nav__section + .pf-c-nav__section {

web/src/elements/sidebar/SidebarItem.css

@@ -3,6 +3,10 @@
     box-shadow: none !important;
 }
 
+button.pf-c-nav__link {
+    margin-block-end: var(--pf-global--spacer--xs);
+}
+
 :host([highlight]) .pf-c-nav__item {
     background-color: var(--ak-accent);
     margin: 16px;
@@ -32,6 +36,7 @@
     user-select: none;
     --pf-c-nav__item--MarginTop: 0;
     --pf-c-nav__link--m-current--after--BorderLeftWidth: 1px;
+    margin-inline-start: 0.2rem;
 }
 
 .pf-c-nav__link::after {

web/src/elements/sidebar/SidebarItem.ts

@@ -2,20 +2,20 @@ import { ROUTE_SEPARATOR } from "#common/constants";
 
 import { AKElement } from "#elements/Base";
 import Styles from "#elements/sidebar/SidebarItem.css";
+import { ifPresent } from "#elements/utils/attributes";
 
 import { msg, str } from "@lit/localize";
 import { CSSResult, html, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
 import PFNav from "@patternfly/patternfly/components/Nav/nav.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 
 export interface SidebarItemProperties {
-    path?: string;
+    path?: string | null;
     activeWhen?: string[];
-    expanded?: boolean;
+    expanded?: boolean | null;
 }
 
 @customElement("ak-sidebar-item")
@@ -27,25 +27,25 @@ export class SidebarItem extends AKElement {
         Styles,
     ];
 
-    @property()
-    public path?: string;
+    @property({ type: String })
+    public path: string | null = null;
 
     @property({ type: String })
-    public label?: string;
+    public label: string | null = null;
 
     activeMatchers: RegExp[] = [];
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, useDefault: false })
     public expanded = false;
 
-    @property({ type: Boolean })
-    public current?: boolean;
+    @property({ type: Boolean, useDefault: false })
+    public current = false;
 
-    @property({ type: Boolean })
+    @property({ type: Boolean, attribute: "absolute-link", useDefault: false })
     public isAbsoluteLink = false;
 
-    @property({ type: Boolean })
-    public highlight?: boolean;
+    @property({ type: Boolean, useDefault: false })
+    public highlight = false;
 
     public parent?: SidebarItem;
 
@@ -126,12 +126,13 @@ export class SidebarItem extends AKElement {
     renderWithChildren() {
         return html`<li
             part="list-item-expandable"
-            aria-label=${ifDefined(this.label)}
+            aria-label=${ifPresent(this.label)}
             role="heading"
             ${ref(this.#listRef)}
             class="pf-c-nav__item pf-m-expandable ${this.expanded ? "pf-m-expanded" : ""}"
         >
             <button
+                part="button button-with-children"
                 class="pf-c-nav__link"
                 aria-label=${this.expanded
                     ? msg(str`Collapse ${this.label}`)
@@ -168,7 +169,7 @@ export class SidebarItem extends AKElement {
         return html`<li
             part="list-item"
             role="presentation"
-            aria-label=${ifDefined(this.label)}
+            aria-label=${ifPresent(this.label)}
             class="pf-c-nav__item pf-m-expandable ${this.expanded ? "pf-m-expanded" : ""}"
         >
             ${this.label}
@@ -176,6 +177,7 @@ export class SidebarItem extends AKElement {
                 aria-label=${this.expanded
                     ? msg(str`Collapse ${this.label}`)
                     : msg(str`Expand ${this.label}`)}
+                part="button button-with-path-and-children"
                 class="pf-c-nav__link"
                 aria-expanded=${this.expanded ? "true" : "false"}
                 type="button"
@@ -200,11 +202,11 @@ export class SidebarItem extends AKElement {
     renderWithPath() {
         return html`
             <a
-                part="link"
+                part="link ${this.current ? "current" : ""}"
                 id="sidebar-nav-link-${this.path}"
                 href="${this.isAbsoluteLink ? "" : "#"}${this.path}"
                 class="pf-c-nav__link ${this.current ? "pf-m-current" : ""}"
-                aria-current=${ifDefined(this.current ? "page" : undefined)}
+                aria-current=${ifPresent(this.current ? "page" : undefined)}
             >
                 ${this.label}
             </a>
@@ -223,7 +225,7 @@ export class SidebarItem extends AKElement {
         return html`<li
             part="list-item"
             role="presentation"
-            aria-label=${ifDefined(this.label)}
+            aria-label=${ifPresent(this.label)}
             class="pf-c-nav__item"
         >
             ${this.path ? this.renderWithPath() : this.renderWithLabel()}

web/src/styles/authentik/base/colors-dark.css

@@ -67,8 +67,8 @@ html[data-theme="dark"] {
 
 html[data-theme="dark"] {
     --pf-global--BorderColor--100: #444548;
-    --pf-global--BorderColor--200: #444548;
-    --pf-global--BorderColor--300: #57585a;
+    --pf-global--BorderColor--200: #57585a;
+    --pf-global--BorderColor--300: #444548;
     --pf-global--BorderColor--400: #aaabac;
 }