static: add navbar items to sidebar

passbook/static/static/passbook/passbook.css

@@ -7,6 +7,13 @@
     font-display: swap;
 }
 
+html {
+    --pf-c-nav__link--PaddingTop: 0.5rem;
+    --pf-c-nav__link--PaddingRight: 0.5rem;
+    --pf-c-nav__link--PaddingBottom: 0.5rem;
+    --pf-c-nav__link--PaddingLeft: 0.5rem;
+}
+
 .pb-brand {
     font-family: "DIN 1451 Std";
     font-size: 4em;

passbook/static/static/src/elements/Sidebar.ts

@@ -1,4 +1,5 @@
 import {
+    css,
     customElement,
     html,
     LitElement,
@@ -19,9 +20,23 @@ export interface SidebarItem {
 }
 
 export const SIDEBAR_ITEMS: SidebarItem[] = [
+
     {
-        name: "Overview",
-        path: "overview",
+        name: "",
+        path: "",
+    },
+    {
+        name: "General",
+        children: [
+            {
+                name: "Overview",
+                path: "overview",
+            },
+            {
+                name: "System Tasks",
+                path: "tasks",
+            },
+        ],
     },
     {
         name: "Applications",
@@ -35,6 +50,19 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         name: "Providers",
         path: "providers",
     },
+    {
+        name: "User Management",
+        children: [
+            {
+                name: "User",
+                path: "users",
+            },
+            {
+                name: "Groups",
+                path: "groups",
+            },
+        ],
+    },
     {
         name: "Outposts",
         children: [
@@ -48,6 +76,10 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
             },
         ],
     },
+    {
+        name: "Policies",
+        path: "policies",
+    },
     {
         name: "Property Mappings",
         path: "property_mappings",
@@ -59,10 +91,6 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
                 name: "Flows",
                 path: "flows",
             },
-            {
-                name: "Bindings",
-                path: "stages/bindings",
-            },
             {
                 name: "Stages",
                 path: "stages",
@@ -77,19 +105,6 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
             },
         ],
     },
-    {
-        name: "Policies",
-        children: [
-            {
-                name: "Policies",
-                path: "policies",
-            },
-            {
-                name: "Bindings",
-                path: "policies/bindings",
-            },
-        ],
-    },
     {
         name: "Certificates",
         path: "crypto/certificates",
@@ -98,27 +113,65 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
         name: "Tokens",
         path: "tokens",
     },
-    {
-        name: "User",
-        path: "users",
-    },
-    {
-        name: "Groups",
-        path: "groups",
-    },
-    {
-        name: "System Tasks",
-        path: "tasks",
-    },
 ];
 
-@customElement("pb-admin-sidebar")
-export class AdminSideBar extends LitElement {
+export const ROOT_ITEMS: SidebarItem[] = [
+    {
+        name: "Library",
+        path: "/-/overview/",
+    },
+    {
+        name: "Monitor",
+        path: "/audit/audit/",
+    },
+    {
+        name: "Administration",
+        children: SIDEBAR_ITEMS
+    }
+];
+
+@customElement("pb-sidebar")
+export class SideBar extends LitElement {
     @property()
     activePath: string;
 
+    @property()
+    brandLogo?: string;
+
+    @property()
+    brandTitle?: string;
+
     static get styles() {
-        return [GlobalsStyle, PageStyle, NavStyle];
+        return [
+            GlobalsStyle,
+            PageStyle,
+            NavStyle,
+            css`
+                .pf-c-nav__link {
+                    --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 {
+                    --pf-c-nav__subnav--PaddingBottom: 0px;
+                }
+                .pb-brand {
+                    font-family: "DIN 1451 Std";
+                    line-height: 60px;
+                    display: flex;
+                    font-size: 3rem;
+                    flex-direction: row;
+                    align-items: center;
+                    margin-right: 0.5em;
+                    color: var(--pf-c-nav__link--m-current--Color);
+                    text-align: center;
+                }
+                .pb-brand img {
+                    margin: 0 0.5rem;
+                    max-height: 60px;
+                }
+            `,
+        ];
     }
 
     constructor() {
@@ -129,6 +182,17 @@ export class AdminSideBar extends LitElement {
         });
     }
 
+    renderBrand(): TemplateResult {
+        return html`<li class="pf-c-nav__item">
+            <a href="#/" class="pf-c-page__header-brand-link">
+                <div class="pf-c-brand pb-brand">
+                    <img src="${this.brandLogo}" alt="passbook icon" />
+                    ${this.brandTitle ? html`<span>${this.brandTitle}</span>` : ""}
+                </div>
+            </a>
+        </li>`;
+    }
+
     renderItem(item: SidebarItem): TemplateResult {
         return html` <li
             class="pf-c-nav__item ${item.children
@@ -165,7 +229,8 @@ export class AdminSideBar extends LitElement {
         return html`<div class="pf-c-page__sidebar-body">
             <nav class="pf-c-nav" aria-label="Global">
                 <ul class="pf-c-nav__list">
-                    ${SIDEBAR_ITEMS.map((i) => this.renderItem(i))}
+                    ${this.renderBrand()}
+                    ${ROOT_ITEMS.map((i) => this.renderItem(i))}
                 </ul>
             </nav>
         </div>`;

passbook/static/static/src/main.ts

@@ -1,7 +1,7 @@
 import "./legacy.js";
 
 import "./elements/ActionButton";
-import "./elements/AdminSidebar";
+import "./elements/Sidebar";
 import "./elements/CodeMirror";
 import "./elements/Dropdown";
 import "./elements/FetchFillSlot";

passbook/static/static/src/pages/RouterOutlet.ts

@@ -33,18 +33,27 @@ export class RouterOutlet extends LitElement {
     @property()
     activeRoute?: Route;
 
+    @property()
+    defaultUrl?: string;
+
     static get styles() {
         return [PF, PFAddons];
     }
 
     constructor() {
         super();
-        this.navigate();
         window.addEventListener("hashchange", (e) => this.navigate());
     }
 
+    firstUpdated() {
+        this.navigate();
+    }
+
     navigate() {
-        const activeUrl = window.location.hash.slice(1, Infinity);
+        let activeUrl = window.location.hash.slice(1, Infinity);
+        if (activeUrl === "") {
+            activeUrl = this.defaultUrl!;
+        }
         ROUTES.forEach((route) => {
             let selectedRoute: Route | null = null;
             if (route.url.exec(activeUrl)) {

passbook/static/static/src/pages/SiteShell.ts

@@ -97,19 +97,17 @@ export class SiteShell extends LitElement {
 
     render() {
         return html` ${this.loading
-                ? html` <div class="pf-c-backdrop">
-                      <div class="pf-l-bullseye">
-                          <div class="pf-l-bullseye__item">
-                              <span
-                                  class="pf-c-spinner pf-m-xl"
-                                  role="progressbar"
-                                  aria-valuetext="Loading..."
-                              >
-                                  <span class="pf-c-spinner__clipper"></span>
-                                  <span class="pf-c-spinner__lead-ball"></span>
-                                  <span class="pf-c-spinner__tail-ball"></span>
-                              </span>
-                          </div>
+                ? html` <div class="pf-l-bullseye">
+                      <div class="pf-l-bullseye__item">
+                          <span
+                              class="pf-c-spinner pf-m-xl"
+                              role="progressbar"
+                              aria-valuetext="Loading..."
+                          >
+                              <span class="pf-c-spinner__clipper"></span>
+                              <span class="pf-c-spinner__lead-ball"></span>
+                              <span class="pf-c-spinner__tail-ball"></span>
+                          </span>
                       </div>
                   </div>`
                 : ""}