upend/webui/src/App.svelte

<script lang="ts">
  import { Router, Route, createHistory } from "svelte-navigator";
  import createHashSource from "./util/history";
  import Header from "./components/layout/Header.svelte";
  import Footer from "./components/layout/Footer.svelte";
  import Home from "./views/Home.svelte";
  import Browse from "./views/Browse.svelte";
  import Search from "./views/Search.svelte";
  import DropPasteHandler from "./components/DropPasteHandler.svelte";
  import AddModal from "./components/AddModal.svelte";
  import Store from "./views/Store.svelte";
  import "./styles/main.scss";

  const history = createHistory(createHashSource());

  let footerHeight = "0";
  function setBottomMargin(size: CustomEvent<ResizeObserverEntry>) {
    footerHeight = `${size.detail.contentRect.height}px`;
  }
</script>

<Router {history} primary={false} --footer-height={footerHeight}>
  <Header />

  <Route path="/">
    <Home />
  </Route>

  <Route path="/browse/*addresses" let:params>
    <Browse />
  </Route>

  <Route path="/search/:query" let:params>
    <Search query={decodeURIComponent(params.query)} />
  </Route>

  <Route path="/store">
    <Store />
  </Route>

  <Footer on:resize={setBottomMargin} />

  <AddModal />
</Router>

<DropPasteHandler />