nyanogang
/
nyanoblog
2
1
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

web: add main navigation bar

This commit is contained in:
anna 2022-12-14 04:00:33 +01:00
parent a62f6983d3
commit a3f0808cd4
Signed by: fef
GPG Key ID: EC22E476DC2D3D84
3 changed files with 132 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/web/app.ts
View File

@ -2,6 +2,7 @@ import {LitElement, html} from "lit";
import {customElement} from "lit/decorators.js";
import {msg} from "@lit/localize";
import "./components/header-bar";
import "./features/compose-form";
import "./layout/column-layout";
import "./layout/scroll-list";
@ -18,7 +19,9 @@ export default class NyanoBlog extends LitElement {
<div slot="left-bottom">bottom left slot</div>
<div slot="main">main slot</div>
<div slot="main">
<header-bar></header-bar>
</div>
<side-panel slot="right" headline="${msg("Notifications")}">
<scroll-list style="max-height: 400px">

121
src/web/components/header-bar.ts Normal file
View File

@ -0,0 +1,121 @@
import {LitElement, html, css} from "lit";
import {customElement} from "lit/decorators.js";
import {msg} from "@lit/localize";
import withSharedStyles from "../theme";
import "./svg-icon";
@customElement("header-bar")
export default class HeaderBar extends LitElement {
protected render() {
return html`
<nav>
<ul>
<li aria-current="page">
<a href="#">
<svg-icon size="20" icon="house-fill" role="none"></svg-icon>
<span class="name">${msg("Home")}</span>
</a>
</li>
<li>
<a href="#">
<svg-icon size="20" icon="people-fill" role="none"></svg-icon>
<span class="name">${msg("Local")}</span>
</a>
</li>
<li>
<a href="#">
<svg-icon size="20" icon="${this.getGlobeIconName()}" role="none"></svg-icon>
<span class="name">${msg("Federated")}</span>
</a>
</li>
<li>
<a href="#">
<svg-icon size="20" icon="star-fill" role="none"></svg-icon>
<span class="name">${msg("Favourites")}</span>
</a>
</li>
<li>
<a href="#">
<svg-icon size="20" icon="bookmark-fill" role="none"></svg-icon>
<span class="name">${msg("Bookmarks")}</span>
</a>
</li>
<li>
<a href="#">
<svg-icon size="20" icon="gear-fill" role="none"></svg-icon>
<span class="name">${msg("Settings")}</span>
</a>
</li>
</ul>
</nav>
`;
}
private getGlobeIconName() {
const offset = new Date().getTimezoneOffset();
if (offset < -7 * 60) {
return "globe-asia-australia";
} else if (offset < -2 * 60) {
return "globe-central-south-asia";
} else if (offset < 3 * 60) {
return "globe-europe-africa";
} else {
return "globe-americas";
}
}
static get styles() {
return withSharedStyles(css`
:host {
font-size: 1rem;
}
nav {
display: block;
}
ul {
margin: 0 0 16px;
padding: 0 0 16px 0;
list-style-type: none;
display: block;
line-height: 20px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
li {
display: inline-block;
margin: 0;
padding: 0 16px;
}
a, a:visited {
color: var(--text-color);
text-decoration: none;
}
li[aria-current] > * {
color: var(--accent-color);
font-weight: bold;
cursor: default;
}
svg-icon {
transform: translateY(4px);
}
.name {
margin-left: 8px;
}
@media(max-width: 1600px) {
.name {
display: none;
}
}
`);
}
}

10
src/web/components/svg-icon.ts
View File

@ -7,7 +7,7 @@ export default class SVGIcon extends LitElement {
public icon = "";
@property({type: String, attribute: true})
public color = "var(--text-color)";
public color = "";
@property({type: Number, attribute: true})
public size = 24;
@ -15,7 +15,12 @@ export default class SVGIcon extends LitElement {
protected render() {
// i have svg
return html`
<svg id="asshole" class="bi" width="${this.size}" height="${this.size}" fill="${this.color}">
<svg
id="asshole"
class="bi"
width="${this.size}"
height="${this.size}"
fill="${this.color === "" ? "currentColor" : this.color}">
<use href="/img/bootstrap-icons.svg#${this.icon}" width="${this.size}" height="${this.size}"/>
</svg>
`;
@ -25,7 +30,6 @@ export default class SVGIcon extends LitElement {
return css`
:host {
display: inline-block;
color: var(--text-color);
}
#asshole {