Refactoring
This commit is contained in:
parent
b23c2a24ea
commit
745af7a53e
33 changed files with 321 additions and 553 deletions
|
@ -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>{" "}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
102
src/components/de/Navbar.tsx
Normal file
102
src/components/de/Navbar.tsx
Normal 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;
|
102
src/components/en/Navbar.tsx
Normal file
102
src/components/en/Navbar.tsx
Normal 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;
|
Loading…
Add table
Add a link
Reference in a new issue