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";

  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={params.query} />
  </Route>

  <Footer on:resize={setBottomMargin} />

  <AddModal />
</Router>

<DropPasteHandler />

<style global lang="scss">
  @use "normalize.css/normalize.css";
  @use "styles/colors-app";
  @use "styles/fonts";

  html,
  body {
    height: 100%;
  }

  #main {
    display: flex;
    flex-grow: 1;
  }

  #main,
  #header {
    margin: 0 2rem;
  }

  #footer {
    position: fixed;
    bottom: 0;

    width: 100%;

    display: flex;
    flex-direction: column;

    background: var(--background);
  }

  #footer > * {
    margin: 1rem;
  }

  .spinner {
    font-size: 2em;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
</style>