82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { Router, Route, useNavigate, useBeforeLeave } from "@solidjs/router";
|
|
import { OverviewPage } from "./pages/Overview";
|
|
import { MatchPage } from "./pages/MatchDetails";
|
|
import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js";
|
|
|
|
function Layout(props: ParentProps) {
|
|
return (
|
|
<div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none">
|
|
{props.children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
const [path, setPath] = createSignal(window.location.pathname);
|
|
|
|
// Die zentrale Navigations-Funktion
|
|
const navigate = (to) => {
|
|
if (window.location.pathname === to) return;
|
|
|
|
// Hier steuerst du die Transition BEVOR die URL oder das Signal angefasst wird
|
|
if (document.startViewTransition) {
|
|
document.startViewTransition(() => {
|
|
window.history.pushState({}, "", to);
|
|
setPath(to);
|
|
});
|
|
} else {
|
|
window.history.pushState({}, "", to);
|
|
setPath(to);
|
|
}
|
|
};
|
|
|
|
const handlePopstate = () => {
|
|
if (document.startViewTransition) {
|
|
document.documentElement.classList.add("back-navigation");
|
|
// Der Browser hat die URL bei BACK schon geändert,
|
|
// wir triggern die Transition und updaten das Signal synchron
|
|
const transition = document.startViewTransition(() => {
|
|
setPath(window.location.pathname);
|
|
});
|
|
transition.finished.then(() => {
|
|
document.documentElement.classList.remove("back-navigation");
|
|
});
|
|
} else {
|
|
setPath(window.location.pathname);
|
|
}
|
|
};
|
|
|
|
const handleLinks = (e) => {
|
|
const a = e.target.closest("a");
|
|
if (a) {
|
|
const href = a.getAttribute("href");
|
|
if (href.startsWith("/")) {
|
|
e.preventDefault();
|
|
navigate(href);
|
|
}
|
|
}
|
|
};
|
|
// Hier fixen wir das Back-Button-Problem ein für alle Mal sauber!
|
|
onMount(() => {
|
|
window.addEventListener("click", handleLinks);
|
|
window.addEventListener("popstate", handlePopstate);
|
|
});
|
|
onCleanup(() => {
|
|
window.removeEventListener("click", handleLinks);
|
|
window.removeEventListener("popstate", handlePopstate);
|
|
});
|
|
|
|
return (
|
|
<div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none">
|
|
<Show when={path() === "/"}>
|
|
<OverviewPage />
|
|
</Show>
|
|
<Show when={path().startsWith("/match/")}>
|
|
<MatchPage />
|
|
</Show>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|