Refactoring

This commit is contained in:
aronmal 2023-10-23 17:39:38 +02:00
parent b23c2a24ea
commit 745af7a53e
Signed by: aronmal
GPG key ID: 816B7707426FC612
33 changed files with 321 additions and 553 deletions

View file

@ -36,21 +36,24 @@ function R(props: {
}
});
return (
<A
href={props.href}
target={type() === "external" ? "_blank" : ""}
rel={type() === "external" ? "noreferrer noopener" : ""}
id={props.id}
class={props.class}
>
<Show when={type() === "id"}>
<FontAwesomeIcon class="left" icon={types["id"]} />
</Show>
{props.children}
<Show when={type() !== "id"}>
<FontAwesomeIcon class="right" icon={types[type()]} title={type()} />
</Show>
</A>
<>
{" "}
<A
href={props.href}
target={type() === "external" ? "_blank" : ""}
rel={type() === "external" ? "noreferrer noopener" : ""}
id={props.id}
class={props.class}
>
<Show when={type() === "id"}>
<FontAwesomeIcon class="left" icon={types["id"]} />
</Show>
{props.children}
<Show when={type() !== "id"}>
<FontAwesomeIcon class="right" icon={types[type()]} title={type()} />
</Show>
</A>{" "}
</>
);
}

View file

@ -0,0 +1,102 @@
import {
faBookOpen,
faCircleHalfStroke,
faGlobe,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
import { createSignal } from "solid-js";
import { A, useNavigate } from "solid-start";
import { FontAwesomeIcon } from "../FontAwesomeIcon";
export const [lightMode, setLightMode] = createSignal(false);
const [menu, setMenu] = createSignal(false);
function Navbar() {
const navigate = useNavigate();
return (
<>
<div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
<A href="/de/">
<FontAwesomeIcon icon={faBookOpen} /> Einführung
</A>
<A href="/de/overview">
<FontAwesomeIcon icon={faBookOpen} /> Start
</A>
<ol>
<li>
<A href="/de/overview#start">Was sind EUCs?</A>
</li>
<li>
<A href="/de/overview#why">Warum EUCs?</A>
</li>
<li>
<A href="/de/overview#funktion">Funktionsweise</A>
</li>
<li>
<A href="/de/overview#begriffe">Begriffe</A>
</li>
<li>
<A href="/de/overview#sicherheit">Sicherheit</A>
</li>
<li>
<A href="/de/overview#ausrüstung">Ausrüstung</A>
</li>
<li>
<A href="/de/overview#cutout">Cut-out's</A>
</li>
<li>
<A href="/de/overview#akkuss">Akkusicherheit</A>
</li>
<li>
<A href="/de/overview#fahrweise">Fahrweise</A>
</li>
<li>
<A href="/de/overview#wobbles">Wobbles</A>
</li>
<li>
<A href="/de/overview#leistung">Leistung</A>
</li>
<li>
<A href="/de/overview#federung">Federung</A>
</li>
<li>
<A href="/de/overview#reifen">Reifen</A>
</li>
<li>
<A href="/de/overview#historie">Historie</A>
</li>
<li>
<A href="/de/overview#geräte">Geräte Liste</A>
</li>
</ol>
<A href="/de/manufacturers">
<FontAwesomeIcon icon={faBookOpen} /> Hersteller
</A>
<button onClick={() => setLightMode((e) => !e)}>
{lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} />
</button>
<button onClick={() => navigate("/en/overview")}>
Englisch <FontAwesomeIcon icon={faGlobe} />
</button>
<button onClick={() => setMenu(false)}>
Close <FontAwesomeIcon icon={faXmark} />
</button>
</div>
<div
id="sidenavbar"
style={{ visibility: menu() ? "hidden" : "visible" }}
>
<button onClick={() => navigate(-1)}>Zurück</button>
<A href="#start">Start</A>
<button onClick={() => setMenu(true)}>Menu</button>
</div>
</>
);
}
export default Navbar;

View file

@ -0,0 +1,102 @@
import {
faBookOpen,
faCircleHalfStroke,
faGlobe,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
import { createSignal } from "solid-js";
import { A, useNavigate } from "solid-start";
import { FontAwesomeIcon } from "../FontAwesomeIcon";
export const [lightMode, setLightMode] = createSignal(false);
const [menu, setMenu] = createSignal(false);
function Navbar() {
const navigate = useNavigate();
return (
<>
<div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
<A href="/en/">
<FontAwesomeIcon icon={faBookOpen} /> Introduction
</A>
<A href="/en/overview">
<FontAwesomeIcon icon={faBookOpen} /> Start
</A>
<ol>
<li>
<A href="/en/overview#start">What are EUCs?</A>
</li>
<li>
<A href="/en/overview#why">Why EUCs?</A>
</li>
<li>
<A href="/en/overview#funktion">Functionality</A>
</li>
<li>
<A href="/en/overview#begriffe">Glossarry</A>
</li>
<li>
<A href="/en/overview#sicherheit">Safety</A>
</li>
<li>
<A href="/en/overview#ausrüstung">Gear</A>
</li>
<li>
<A href="/en/overview#cutout">Cut-out's</A>
</li>
<li>
<A href="/en/overview#akkuss">Battery safety</A>
</li>
<li>
<A href="/en/overview#fahrweise">Ride style</A>
</li>
<li>
<A href="/en/overview#wobbles">Wobbles</A>
</li>
<li>
<A href="/en/overview#leistung">Performance</A>
</li>
<li>
<A href="/en/overview#federung">Suspension</A>
</li>
<li>
<A href="/en/overview#reifen">Tires</A>
</li>
<li>
<A href="/en/overview#historie">History</A>
</li>
<li>
<A href="/en/overview#geräte">Device list</A>
</li>
</ol>
<A href="/en/manufacturers">
<FontAwesomeIcon icon={faBookOpen} /> Manufacturers
</A>
<button onClick={() => setLightMode((e) => !e)}>
{lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} />
</button>
<button onClick={() => navigate("/de/overview")}>
Deutsch <FontAwesomeIcon icon={faGlobe} />
</button>
<button onClick={() => setMenu(false)}>
Close <FontAwesomeIcon icon={faXmark} />
</button>
</div>
<div
id="sidenavbar"
style={{ visibility: menu() ? "hidden" : "visible" }}
>
<button onClick={() => navigate(-1)}>Back</button>
<A href="#start">Start</A>
<button onClick={() => setMenu(true)}>Menu</button>
</div>
</>
);
}
export default Navbar;