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

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

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