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

Improve Navbar auto close

Browse source
This commit is contained in:
aronmal 2023-10-26 01:08:13 +02:00
parent e168fb5d84
commit 4a96f797ea
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 24 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,8 +4,8 @@ import {
faGlobe,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
import { createSignal } from "solid-js";
import { A, useLocation, useNavigate } from "solid-start";
import { createEffect, createSignal } from "solid-js";
import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
import { FontAwesomeIcon } from "../FontAwesomeIcon";
export const [lightMode, setLightMode] = createSignal(false);
@ -14,6 +14,13 @@ const [menu, setMenu] = createSignal(false);
function Navbar() {
const navigate = useNavigate();
const location = useLocation();
const isRouting = useIsRouting();
createEffect(() => {
if (!isRouting() || !menu()) return;
setMenu(false);
});
return (
<>
<div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
@ -81,10 +88,9 @@ function Navbar() {
<FontAwesomeIcon icon={faCircleHalfStroke} />
</button>
<button
onClick={() => {
navigate("/en" + location.pathname.slice(3), { scroll: false });
setMenu(false);
}}
onClick={() =>
navigate("/en" + location.pathname.slice(3), { scroll: false })
}
>
Englisch <FontAwesomeIcon icon={faGlobe} />
</button>

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

@ -4,8 +4,8 @@ import {
faGlobe,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
import { createSignal } from "solid-js";
import { A, useLocation, useNavigate } from "solid-start";
import { createEffect, createSignal } from "solid-js";
import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
import { FontAwesomeIcon } from "../FontAwesomeIcon";
export const [lightMode, setLightMode] = createSignal(false);
@ -14,6 +14,13 @@ const [menu, setMenu] = createSignal(false);
function Navbar() {
const navigate = useNavigate();
const location = useLocation();
const isRouting = useIsRouting();
createEffect(() => {
if (!isRouting() || !menu()) return;
setMenu(false);
});
return (
<>
<div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
@ -81,10 +88,9 @@ function Navbar() {
<FontAwesomeIcon icon={faCircleHalfStroke} />
</button>
<button
onClick={() => {
navigate("/de" + location.pathname.slice(3), { scroll: false });
setMenu(false);
}}
onClick={() =>
navigate("/de" + location.pathname.slice(3), { scroll: false })
}
>
Deutsch <FontAwesomeIcon icon={faGlobe} />
</button>