static: add navbar items to sidebar

This commit is contained in:
Jens Langhammer 2020-11-22 13:13:45 +01:00
parent 30bf4f5747
commit 372e51ee07
7 changed files with 132 additions and 53 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -7,6 +7,13 @@
font-display: swap; 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 { .pb-brand {
font-family: "DIN 1451 Std"; font-family: "DIN 1451 Std";
font-size: 4em; font-size: 4em;

View File

@ -1,4 +1,5 @@
import { import {
css,
customElement, customElement,
html, html,
LitElement, LitElement,
@ -19,10 +20,24 @@ export interface SidebarItem {
} }
export const SIDEBAR_ITEMS: SidebarItem[] = [ export const SIDEBAR_ITEMS: SidebarItem[] = [
{
name: "",
path: "",
},
{
name: "General",
children: [
{ {
name: "Overview", name: "Overview",
path: "overview", path: "overview",
}, },
{
name: "System Tasks",
path: "tasks",
},
],
},
{ {
name: "Applications", name: "Applications",
path: "applications", path: "applications",
@ -35,6 +50,19 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
name: "Providers", name: "Providers",
path: "providers", path: "providers",
}, },
{
name: "User Management",
children: [
{
name: "User",
path: "users",
},
{
name: "Groups",
path: "groups",
},
],
},
{ {
name: "Outposts", name: "Outposts",
children: [ children: [
@ -48,6 +76,10 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
}, },
], ],
}, },
{
name: "Policies",
path: "policies",
},
{ {
name: "Property Mappings", name: "Property Mappings",
path: "property_mappings", path: "property_mappings",
@ -59,10 +91,6 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
name: "Flows", name: "Flows",
path: "flows", path: "flows",
}, },
{
name: "Bindings",
path: "stages/bindings",
},
{ {
name: "Stages", name: "Stages",
path: "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", name: "Certificates",
path: "crypto/certificates", path: "crypto/certificates",
@ -98,27 +113,65 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
name: "Tokens", name: "Tokens",
path: "tokens", path: "tokens",
}, },
{
name: "User",
path: "users",
},
{
name: "Groups",
path: "groups",
},
{
name: "System Tasks",
path: "tasks",
},
]; ];
@customElement("pb-admin-sidebar") export const ROOT_ITEMS: SidebarItem[] = [
export class AdminSideBar extends LitElement { {
name: "Library",
path: "/-/overview/",
},
{
name: "Monitor",
path: "/audit/audit/",
},
{
name: "Administration",
children: SIDEBAR_ITEMS
}
];
@customElement("pb-sidebar")
export class SideBar extends LitElement {
@property() @property()
activePath: string; activePath: string;
@property()
brandLogo?: string;
@property()
brandTitle?: string;
static get styles() { 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() { 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 { renderItem(item: SidebarItem): TemplateResult {
return html` <li return html` <li
class="pf-c-nav__item ${item.children 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"> return html`<div class="pf-c-page__sidebar-body">
<nav class="pf-c-nav" aria-label="Global"> <nav class="pf-c-nav" aria-label="Global">
<ul class="pf-c-nav__list"> <ul class="pf-c-nav__list">
${SIDEBAR_ITEMS.map((i) => this.renderItem(i))} ${this.renderBrand()}
${ROOT_ITEMS.map((i) => this.renderItem(i))}
</ul> </ul>
</nav> </nav>
</div>`; </div>`;

View File

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

View File

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

View File

@ -97,8 +97,7 @@ export class SiteShell extends LitElement {
render() { render() {
return html` ${this.loading return html` ${this.loading
? html` <div class="pf-c-backdrop"> ? html` <div class="pf-l-bullseye">
<div class="pf-l-bullseye">
<div class="pf-l-bullseye__item"> <div class="pf-l-bullseye__item">
<span <span
class="pf-c-spinner pf-m-xl" class="pf-c-spinner pf-m-xl"
@ -110,7 +109,6 @@ export class SiteShell extends LitElement {
<span class="pf-c-spinner__tail-ball"></span> <span class="pf-c-spinner__tail-ball"></span>
</span> </span>
</div> </div>
</div>
</div>` </div>`
: ""} : ""}
<slot name="body"> </slot>`; <slot name="body"> </slot>`;