mirror of
https://github.com/LemmyNet/joinlemmy-site.git
synced 2024-11-25 22:01:17 +00:00
Adding navbar and footer.
This commit is contained in:
parent
c3f212bc72
commit
5410eec082
7 changed files with 103 additions and 137 deletions
|
|
@ -73,10 +73,8 @@ server.get("/*", async (req, res) => {
|
||||||
|
|
||||||
<!-- Styles -->
|
<!-- Styles -->
|
||||||
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
|
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
|
||||||
<!-- Current theme and more -->
|
|
||||||
${helmet.link.toString()}
|
${helmet.link.toString()}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body ${helmet.bodyAttributes.toString()}>
|
<body ${helmet.bodyAttributes.toString()}>
|
||||||
<div id='root'>${root}</div>
|
<div id='root'>${root}</div>
|
||||||
<script defer src='/static/js/client.js'></script>
|
<script defer src='/static/js/client.js'></script>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,7 @@ import { i18n } from "../i18next";
|
||||||
import { routes } from "../routes";
|
import { routes } from "../routes";
|
||||||
import { NoMatch } from "./no-match";
|
import { NoMatch } from "./no-match";
|
||||||
import { Symbols } from "./symbols";
|
import { Symbols } from "./symbols";
|
||||||
import { Navbar } from "./navbar";
|
import { Footer, Navbar } from "./navbar";
|
||||||
import { Footer } from "./footer";
|
|
||||||
import { BACKGROUND_GRADIENT_1, BACKGROUND_GRADIENT_2 } from "./common";
|
import { BACKGROUND_GRADIENT_1, BACKGROUND_GRADIENT_2 } from "./common";
|
||||||
|
|
||||||
export class App extends Component<any, any> {
|
export class App extends Component<any, any> {
|
||||||
|
|
@ -18,19 +17,21 @@ export class App extends Component<any, any> {
|
||||||
<div className={BACKGROUND_GRADIENT_1}>
|
<div className={BACKGROUND_GRADIENT_1}>
|
||||||
<div className={BACKGROUND_GRADIENT_2}>
|
<div className={BACKGROUND_GRADIENT_2}>
|
||||||
<Provider i18next={i18n}>
|
<Provider i18next={i18n}>
|
||||||
{/* <Navbar /> */}
|
<div className="min-h-screen">
|
||||||
<Switch>
|
<Navbar />
|
||||||
{routes.map(({ path, exact, component: C, ...rest }) => (
|
<Switch>
|
||||||
<Route
|
{routes.map(({ path, exact, component: C, ...rest }) => (
|
||||||
key={path}
|
<Route
|
||||||
path={path}
|
key={path}
|
||||||
exact={exact}
|
path={path}
|
||||||
render={props => <C {...props} {...rest} />}
|
exact={exact}
|
||||||
/>
|
render={props => <C {...props} {...rest} />}
|
||||||
))}
|
/>
|
||||||
<Route render={props => <NoMatch {...props} />} />
|
))}
|
||||||
</Switch>
|
<Route render={props => <NoMatch {...props} />} />
|
||||||
{/* Footer /> */}
|
</Switch>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
<Symbols />
|
<Symbols />
|
||||||
</Provider>
|
</Provider>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
import { Component } from "inferno";
|
|
||||||
import { LinkLine } from "./link-line";
|
|
||||||
import { T } from "inferno-i18next";
|
|
||||||
|
|
||||||
export class Footer extends Component<any, any> {
|
|
||||||
constructor(props: any, context: any) {
|
|
||||||
super(props, context);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<footer>
|
|
||||||
<br />
|
|
||||||
<nav class="nav">
|
|
||||||
<div class="nav-left">
|
|
||||||
<p style="padding-left: 2rem">
|
|
||||||
<T i18nKey="footer_desc">
|
|
||||||
#
|
|
||||||
<a class="footer-name" href="https://infernojs.org">
|
|
||||||
#
|
|
||||||
</a>
|
|
||||||
<a class="footer-name" href="https://jenil.github.io/chota">
|
|
||||||
#
|
|
||||||
</a>
|
|
||||||
</T>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="nav-right hide-sm hide-md hide-lg">
|
|
||||||
<LinkLine />
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import { Component } from "inferno";
|
|
||||||
import { Link } from "inferno-router";
|
|
||||||
import { i18n } from "../i18next";
|
|
||||||
|
|
||||||
export class LinkLine extends Component<any, any> {
|
|
||||||
constructor(props: any, context: any) {
|
|
||||||
super(props, context);
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Link to="/instances">{i18n.t("join_a_server")}</Link>
|
|
||||||
<Link to="/news">{i18n.t("news")}</Link>
|
|
||||||
<Link to="/apps">{i18n.t("apps")}</Link>
|
|
||||||
<Link to="/donate">{i18n.t("donate")}</Link>
|
|
||||||
<a href={`/docs/index.html`}>{i18n.t("docs")}</a>
|
|
||||||
<Link to="/contact">{i18n.t("contact")}</Link>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,69 +1,89 @@
|
||||||
import { Component, ChangeEvent, linkEvent } from "inferno";
|
import { ChangeEvent, linkEvent } from "inferno";
|
||||||
import { Link } from "inferno-router";
|
import { Link } from "inferno-router";
|
||||||
import { LinkLine } from "./link-line";
|
|
||||||
import { Icon } from "./icon";
|
import { Icon } from "./icon";
|
||||||
import { i18n, languages } from "../i18next";
|
import { i18n, languages } from "../i18next";
|
||||||
|
import classNames from "classnames";
|
||||||
|
|
||||||
export class Navbar extends Component<any, any> {
|
const NavLink = ({ content }) => <li className="text-gray-400">{content}</li>;
|
||||||
constructor(props: any, context: any) {
|
|
||||||
super(props, context);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleLanguageChange(_: any, event: ChangeEvent<HTMLSelectElement>) {
|
const NavLinks = () => (
|
||||||
location.href = `/?lang=${event.target.value}`;
|
<>
|
||||||
}
|
<NavLink content={<Link to="/instances">{i18n.t("join_a_server")}</Link>} />
|
||||||
|
<NavLink content={<Link to="/news">{i18n.t("news")}</Link>} />
|
||||||
|
<NavLink content={<Link to="/apps">{i18n.t("apps")}</Link>} />
|
||||||
|
<NavLink content={<Link to="/donate">{i18n.t("donate")}</Link>} />
|
||||||
|
<NavLink content={<a href={`/docs/index.html`}>{i18n.t("docs")}</a>} />
|
||||||
|
<NavLink content={<Link to="/contact">{i18n.t("contact")}</Link>} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
languageList() {
|
function languageList() {
|
||||||
return Object.keys(i18n.services.resourceStore.data).sort();
|
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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleLanguageChange(_: any, event: ChangeEvent<HTMLSelectElement>) {
|
||||||
|
location.href = `/?lang=${event.target.value}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Footer = () => <Navbar footer />;
|
||||||
|
|
||||||
|
export const Navbar = ({ footer = false }) => (
|
||||||
|
<div className={classNames("navbar px-10", { "sticky top-[100vh]": footer })}>
|
||||||
|
<div className="navbar-start">
|
||||||
|
<Link className="btn btn-ghost normal-case text-xl" to="/">
|
||||||
|
<img src="/static/assets/images/lemmy.svg" className="h-12 w-12" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="navbar-center hidden lg:flex">
|
||||||
|
<ul className="menu menu-horizontal px-1">
|
||||||
|
<NavLinks />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div className="navbar-end">
|
||||||
|
{footer ? (
|
||||||
|
<a className="text-sm text-gray-600 TODO sm:max-lg:hidden">
|
||||||
|
@c Lemmy -2023. All Rights Reserved.
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<select
|
||||||
|
onChange={linkEvent(this, handleLanguageChange)}
|
||||||
|
class="select select-ghost select-bordered text-gray-400"
|
||||||
|
>
|
||||||
|
{languageList().map((language, i) => (
|
||||||
|
<option
|
||||||
|
key={i}
|
||||||
|
value={language}
|
||||||
|
selected={i18n.language.startsWith(language)}
|
||||||
|
>
|
||||||
|
{languages.find(l => l.code.startsWith(language)).name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<a
|
||||||
|
className="btn btn-ghost sm:max-lg:hidden"
|
||||||
|
href="https://github.com/LemmyNet"
|
||||||
|
>
|
||||||
|
<Icon icon="github" classes="w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<div className="dropdown dropdown-end">
|
||||||
|
<label tabIndex={0} className="btn btn-ghost lg:hidden">
|
||||||
|
<Icon icon="align-right" classes="w-6 h-6" />
|
||||||
|
</label>
|
||||||
|
<ul
|
||||||
|
tabIndex={0}
|
||||||
|
className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-neutral-800 rounded-box w-52 items-center"
|
||||||
|
>
|
||||||
|
<NavLinks />
|
||||||
|
<li>
|
||||||
|
<a className="btn btn-ghost" href="https://github.com/LemmyNet">
|
||||||
|
<Icon icon="github" classes="w-6 h-6" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,9 @@ export class Symbols extends Component<any, any> {
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<defs>
|
<defs>
|
||||||
|
<symbol id="icon-align-right" viewBox="0 0 24 24">
|
||||||
|
<path d="M21 9h-14c-0.552 0-1 0.448-1 1s0.448 1 1 1h14c0.552 0 1-0.448 1-1s-0.448-1-1-1zM21 5h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1h18c0.552 0 1-0.448 1-1s-0.448-1-1-1zM21 13h-18c-0.552 0-1 0.448-1 1s0.448 1 1 1h18c0.552 0 1-0.448 1-1s-0.448-1-1-1zM21 17h-14c-0.552 0-1 0.448-1 1s0.448 1 1 1h14c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path>
|
||||||
|
</symbol>
|
||||||
<symbol id="icon-user-check" viewBox="0 0 24 24">
|
<symbol id="icon-user-check" viewBox="0 0 24 24">
|
||||||
<path d="M17 21v-2c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464h-7c-1.38 0-2.632 0.561-3.536 1.464s-1.464 2.156-1.464 3.536v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879h7c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121v2c0 0.552 0.448 1 1 1s1-0.448 1-1zM13.5 7c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464-2.632 0.561-3.536 1.464-1.464 2.156-1.464 3.536 0.561 2.632 1.464 3.536 2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536zM11.5 7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121 0.335-1.577 0.879-2.121 1.292-0.879 2.121-0.879 1.577 0.335 2.121 0.879 0.879 1.292 0.879 2.121zM16.293 11.707l2 2c0.391 0.391 1.024 0.391 1.414 0l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-3.293 3.293-1.293-1.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>
|
<path d="M17 21v-2c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464h-7c-1.38 0-2.632 0.561-3.536 1.464s-1.464 2.156-1.464 3.536v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.829 0.335-1.577 0.879-2.121s1.292-0.879 2.121-0.879h7c0.829 0 1.577 0.335 2.121 0.879s0.879 1.292 0.879 2.121v2c0 0.552 0.448 1 1 1s1-0.448 1-1zM13.5 7c0-1.38-0.561-2.632-1.464-3.536s-2.156-1.464-3.536-1.464-2.632 0.561-3.536 1.464-1.464 2.156-1.464 3.536 0.561 2.632 1.464 3.536 2.156 1.464 3.536 1.464 2.632-0.561 3.536-1.464 1.464-2.156 1.464-3.536zM11.5 7c0 0.829-0.335 1.577-0.879 2.121s-1.292 0.879-2.121 0.879-1.577-0.335-2.121-0.879-0.879-1.292-0.879-2.121 0.335-1.577 0.879-2.121 1.292-0.879 2.121-0.879 1.577 0.335 2.121 0.879 0.879 1.292 0.879 2.121zM16.293 11.707l2 2c0.391 0.391 1.024 0.391 1.414 0l4-4c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-3.293 3.293-1.293-1.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>
|
||||||
</symbol>
|
</symbol>
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 1rem;
|
max-width: 4rem;
|
||||||
max-height: 1rem;
|
max-height: 4rem;
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
stroke: currentColor;
|
stroke: currentColor;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue