trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: use sections in sidebar, adjust colouring 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-16 17:34:19 +01:00
parent e45bc3834a
commit 78f3abc64f
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/src/elements/sidebar/Sidebar.ts
View File

@ -73,22 +73,18 @@ export class SidebarItem {
return html``; return html``;
} }
} }
return html` <li class="pf-c-nav__item ${this.hasChildren() ? "pf-m-expandable pf-m-expanded" : ""}"> if (!this.path) {
${this.path ? return html`<section class="pf-c-nav__section">
html`<a href="#${this.path}" class="pf-c-nav__link ${this.isActive(activePath) ? "pf-m-current" : ""}"> <h2 class="pf-c-nav__section-title">${this.name}</h2>
${this.name} <ul class="pf-c-nav__list">
</a>` :
html`<a class="pf-c-nav__link" aria-expanded="true">
${this.name}
<span class="pf-c-nav__toggle">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</a>
<section class="pf-c-nav__subnav">
<ul class="pf-c-nav__simple-list">
${this._children.map((i) => until(i.render(activePath), html``))} ${this._children.map((i) => until(i.render(activePath), html``))}
</ul> </ul>
</section>`} </section>`;
}
return html`<li class="pf-c-nav__item ${this.hasChildren() ? "pf-m-expandable pf-m-expanded" : ""}">
<a href="#${this.path}" class="pf-c-nav__link ${this.isActive(activePath) ? "pf-m-current" : ""}">
${this.name}
</a>
</li>`; </li>`;
} }
} }
@ -108,6 +104,15 @@ export class Sidebar extends LitElement {
NavStyle, NavStyle,
AKGlobal, AKGlobal,
css` css`
.pf-c-nav__link.pf-m-current::after,
.pf-c-nav__link.pf-m-current:hover::after,
.pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
--pf-c-nav__link--m-current--after--BorderColor: #fd4b2d;
}
.pf-c-nav__section + .pf-c-nav__section {
--pf-c-nav__section--section--MarginTop: var(--pf-global--spacer--sm);
}
.pf-c-nav__list .sidebar-brand { .pf-c-nav__list .sidebar-brand {
max-height: 82px; max-height: 82px;
margin-bottom: -0.5rem; margin-bottom: -0.5rem;
@ -129,8 +134,11 @@ export class Sidebar extends LitElement {
--pf-c-nav__link--PaddingRight: 0.5rem; --pf-c-nav__link--PaddingRight: 0.5rem;
--pf-c-nav__link--PaddingBottom: 0.5rem; --pf-c-nav__link--PaddingBottom: 0.5rem;
} }
.pf-c-nav__subnav { .pf-c-nav__section-title {
--pf-c-nav__subnav--PaddingBottom: 0px; font-size: 12px;
}
.pf-c-nav__item {
--pf-c-nav__item--MarginTop: 0px;
} }
`, `,
]; ];