diff --git a/islands/Container.tsx b/islands/Container.tsx index 2f6768d..586e0f4 100644 --- a/islands/Container.tsx +++ b/islands/Container.tsx @@ -1,6 +1,6 @@ import { Head } from "$fresh/runtime.ts"; import { Component, ContextType } from "preact"; -import { useState } from "preact/hooks"; +import { useState, StateUpdater, useEffect } from "preact/hooks"; import Icon from "preact-material-components/Icon"; import List from "preact-material-components/List"; import TopAppBar from "preact-material-components/TopAppBar"; @@ -19,11 +19,28 @@ export default class Container extends Component { render() { i18n_map.value = this.props.i18n; const [display, set_display] = useState(false); - const [show_settings, set_show_settings] = useState(false); - const close_all = () => { - set_display(false); - set_show_settings(false); - }; + const [state, set_state1] = useState("#/"); + const set_state: StateUpdater = (updater) => { + const v = typeof updater === "function" ? updater(state) : updater; + set_state1(v); + history.pushState(v, "", v); + } + useEffect(() => { + const hash = document.location.hash; + if (!hash || hash == "#") { + set_state("#/"); + } else { + set_state1(hash); + } + self.addEventListener('popstate', (e) => { + const s = e.state; + if (typeof s === "string") { + set_state1(s); + } else { + set_state1("#/"); + } + }) + }, []) return (
@@ -51,20 +68,23 @@ export default class Container extends Component { set_display(false)}> close - + { + set_display(false); + set_state("#/"); + }}> home { - close_all(); - set_show_settings(true); + set_display(false); + set_state("#/settings"); }} > settings
- +
);