aronmal/jg-eucs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix in navbar

Browse source
This commit is contained in:
aronmal 2023-10-25 18:15:05 +02:00
parent 745af7a53e
commit 912537f576
Signed by: aronmal
GPG key ID: 816B7707426FC612
4 changed files with 20 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/de/Navbar.tsx
View file

@ -5,7 +5,7 @@ import {
faXmark, faXmark,
} from "@fortawesome/pro-regular-svg-icons"; } from "@fortawesome/pro-regular-svg-icons";
import { createSignal } from "solid-js"; import { createSignal } from "solid-js";
import { A, useNavigate } from "solid-start"; import { A, useLocation, useNavigate } from "solid-start";
import { FontAwesomeIcon } from "../FontAwesomeIcon"; import { FontAwesomeIcon } from "../FontAwesomeIcon";
export const [lightMode, setLightMode] = createSignal(false); export const [lightMode, setLightMode] = createSignal(false);
@ -13,6 +13,7 @@ const [menu, setMenu] = createSignal(false);
function Navbar() { function Navbar() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
return ( return (
<> <>
<div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}> <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
@ -79,7 +80,12 @@ function Navbar() {
{lightMode() ? "Dark Mode " : "Light Mode "} {lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} /> <FontAwesomeIcon icon={faCircleHalfStroke} />
</button> </button>
<button onClick={() => navigate("/en/overview")}> <button
onClick={() => {
navigate("/en" + location.pathname.slice(3), { scroll: false });
setMenu(false);
}}
>
Englisch <FontAwesomeIcon icon={faGlobe} /> Englisch <FontAwesomeIcon icon={faGlobe} />
</button> </button>
<button onClick={() => setMenu(false)}> <button onClick={() => setMenu(false)}>
@ -92,7 +98,7 @@ function Navbar() {
style={{ visibility: menu() ? "hidden" : "visible" }} style={{ visibility: menu() ? "hidden" : "visible" }}
> >
<button onClick={() => navigate(-1)}>Zurück</button> <button onClick={() => navigate(-1)}>Zurück</button>
<A href="#start">Start</A> <button onClick={() => navigate("/de/overview")}>Start</button>
<button onClick={() => setMenu(true)}>Menu</button> <button onClick={() => setMenu(true)}>Menu</button>
</div> </div>
</> </>

12
src/components/en/Navbar.tsx
View file

@ -5,7 +5,7 @@ import {
faXmark, faXmark,
} from "@fortawesome/pro-regular-svg-icons"; } from "@fortawesome/pro-regular-svg-icons";
import { createSignal } from "solid-js"; import { createSignal } from "solid-js";
import { A, useNavigate } from "solid-start"; import { A, useLocation, useNavigate } from "solid-start";
import { FontAwesomeIcon } from "../FontAwesomeIcon"; import { FontAwesomeIcon } from "../FontAwesomeIcon";
export const [lightMode, setLightMode] = createSignal(false); export const [lightMode, setLightMode] = createSignal(false);
@ -13,6 +13,7 @@ const [menu, setMenu] = createSignal(false);
function Navbar() { function Navbar() {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
return ( return (
<> <>
<div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}> <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
@ -79,7 +80,12 @@ function Navbar() {
{lightMode() ? "Dark Mode " : "Light Mode "} {lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} /> <FontAwesomeIcon icon={faCircleHalfStroke} />
</button> </button>
<button onClick={() => navigate("/de/overview")}> <button
onClick={() => {
navigate("/de" + location.pathname.slice(3), { scroll: false });
setMenu(false);
}}
>
Deutsch <FontAwesomeIcon icon={faGlobe} /> Deutsch <FontAwesomeIcon icon={faGlobe} />
</button> </button>
<button onClick={() => setMenu(false)}> <button onClick={() => setMenu(false)}>
@ -92,7 +98,7 @@ function Navbar() {
style={{ visibility: menu() ? "hidden" : "visible" }} style={{ visibility: menu() ? "hidden" : "visible" }}
> >
<button onClick={() => navigate(-1)}>Back</button> <button onClick={() => navigate(-1)}>Back</button>
<A href="#start">Start</A> <button onClick={() => navigate("/en/overview")}>Start</button>
<button onClick={() => setMenu(true)}>Menu</button> <button onClick={() => setMenu(true)}>Menu</button>
</div> </div>
</> </>

2
src/routes/de/overview.tsx
View file

@ -10,7 +10,7 @@ function overview() {
<Link rel="stylesheet" href="/styles/overview.css" /> <Link rel="stylesheet" href="/styles/overview.css" />
<Navbar /> <Navbar />
<header id="start"> <header>
<img src="/images/cover.jpg" /> <img src="/images/cover.jpg" />
</header> </header>

2
src/routes/en/overview.tsx
View file

@ -9,7 +9,7 @@ function Overview() {
<Title>Introduction EUCs</Title> <Title>Introduction EUCs</Title>
<Link rel="stylesheet" href="/styles/overview.css" /> <Link rel="stylesheet" href="/styles/overview.css" />
<Navbar /> <Navbar />
<header id="start"> <header>
<img src="/images/cover.jpg" /> <img src="/images/cover.jpg" />
</header> </header>
{/* {/*