oxyromon 0.12.0

Rusty ROM OrgaNizer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<script lang="ts">
  import { faGamepad } from "@fortawesome/free-solid-svg-icons";
  import "bootstrap/dist/css/bootstrap.min.css";
  import Fa from "svelte-fa";
  import {
    Button,
    ButtonGroup,
    ButtonToolbar,
    Collapse,
    Container,
    Input,
    InputGroup,
    Navbar,
    NavbarBrand,
    NavbarToggler,
  } from "sveltestrap";

  import { completeFilter, ignoredFilter, incompleteFilter, nameFilter, oneRegionFilter } from "../store.js";

  export const ssr = false;

  let navbarIsOpen = false;

  function handleNavbarUpdate(event) {
    navbarIsOpen = event.detail.isOpen;
  }
</script>

<div class="d-flex flex-column min-vh-100">
  <Navbar color="dark" dark sticky="top" expand="md" class="mb-3">
    <NavbarBrand href="/" class="ms-3">
      <Fa icon={faGamepad} />
      oxyromon
    </NavbarBrand>
    <NavbarToggler on:click={() => (navbarIsOpen = !navbarIsOpen)} />
    <Collapse
      isOpen={navbarIsOpen}
      navbar
      expand="md"
      class="d-flex justify-content-end"
      on:update={handleNavbarUpdate}
    >
      <ButtonToolbar class="d-flex">
        <ButtonGroup>
          <Button color="success" bind:active={$completeFilter} on:click={() => completeFilter.update((b) => !b)}>
            Complete
          </Button>
          <Button color="primary" bind:active={$oneRegionFilter} on:click={() => oneRegionFilter.update((b) => !b)}>
            1G1R
          </Button>
          <Button color="danger" bind:active={$incompleteFilter} on:click={() => incompleteFilter.update((b) => !b)}>
            Incomplete
          </Button>
          <Button color="secondary" bind:active={$ignoredFilter} on:click={() => ignoredFilter.update((b) => !b)}>
            Ignored
          </Button>
        </ButtonGroup>
        <InputGroup class="ms-3">
          <Input placeholder="Game Name" bind:value={$nameFilter} />
        </InputGroup>
      </ButtonToolbar>
    </Collapse> />
  </Navbar>

  <Container fluid class="flex-grow-1">
    <slot />
  </Container>
</div>