mirror of
https://github.com/LemmyNet/joinlemmy-site.git
synced 2024-12-23 19:31:29 +00:00
69 lines
2 KiB
TypeScript
69 lines
2 KiB
TypeScript
import { Component, ChangeEvent, linkEvent } from "inferno";
|
|
import { Link } from "inferno-router";
|
|
import { LinkLine } from "./link-line";
|
|
import { Icon } from "./icon";
|
|
import { i18n, languages } from "../i18next";
|
|
|
|
export class Navbar extends Component<any, any> {
|
|
constructor(props: any, context: any) {
|
|
super(props, context);
|
|
}
|
|
|
|
handleLanguageChange(_: any, event: ChangeEvent<HTMLSelectElement>) {
|
|
location.href = `/?lang=${event.target.value}`;
|
|
}
|
|
|
|
languageList() {
|
|
return Object.keys(i18n.services.resourceStore.data).sort();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<>
|
|
<nav class="nav hide-xs hide-sm">
|
|
<div class="nav-left">
|
|
<Link className="brand" to="/">
|
|
<img
|
|
src="/static/assets/images/lemmy.svg"
|
|
height="32"
|
|
width="32"
|
|
/>
|
|
</Link>
|
|
<LinkLine />
|
|
</div>
|
|
<div class="nav-right">
|
|
<div>
|
|
<select
|
|
onChange={linkEvent(this, this.handleLanguageChange)}
|
|
class="text-light bd-dark language-selector"
|
|
>
|
|
{this.languageList().map((language, i) => (
|
|
<option
|
|
key={i}
|
|
value={language}
|
|
selected={i18n.language.startsWith(language)}
|
|
>
|
|
{languages.find(l => l.code.startsWith(language)).name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<a href="https://github.com/LemmyNet">
|
|
<Icon icon="github" />
|
|
</a>
|
|
<a href="https://matrix.to/#/#lemmy:matrix.org">
|
|
<Icon icon="matrix" />
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<nav class="nav hide-md hide-lg">
|
|
<div class="nav-center">
|
|
<Link className="brand" to="/">
|
|
<img src="/static/assets/images/lemmy.svg" />
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|
|
}
|