signet-frontend/src/App.vue

<template>
  <nav class="navbar has-background-grey-dark" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <RouterLink to="/" class="navbar-item">
        <span class="signet-logo title is-3-desktop is-4-mobile has-text-white-ter">
          Beignet
        </span>
      </RouterLink>
      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons is-hidden-mobile is-hidden-tablet-only">
          <div class="authentication" v-if="!hasToken">
            <RouterLink to="/login" class="button is-primary">
              Log in
            </RouterLink>
          </div>
          <div v-else>
            <RouterLink to="/addfund" class="button is-primary">
              Add Fund
            </RouterLink>
            <RouterLink to="/register" class="button is-white">
              Register
            </RouterLink>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <div id="content">
    <RouterView v-slot="{ Component }">
      <Suspense>
        <Component :is="Component" />

        <template #fallback>
          <span style="font-size: 4em; color: saddlebrown">Loading</span>
        </template>
      </Suspense>
    </RouterView>
  </div>

  <footer>
    <div>
      Proudly made in Michigan <div class="michigan-icon"></div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { useSessionStorage } from '@vueuse/core';
import store from '@/store';
import {
  computed,
  ref,
} from 'vue';
import jwtDecode from 'jwt-decode';
import { Claims } from '@/api/types';

const userData = ref({ username: '', privileges: -1, exp: -1 } as Claims);

const state = useSessionStorage('jwt', { token: '' });
if (state.value.token) {
  store.commit('setToken', state.value.token);
  userData.value = jwtDecode<Claims>(state.value.token);
}

const hasToken = computed(() => !!store.getters.getToken);
</script>

<style lang="stylus">
@import "../node_modules/bulma/css/bulma.min.css"

#content
  min-height 80vh

#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale

html, body
  padding 0
  margin 0

body
  min-height 100vh
  color #e8dbca
  background-color #313538

footer
  color #707070
  padding 12px
  margin-top 10px

  & *
    vertical-align middle
    text-align center

.signet-logo
  font-family Paytone
  letter-spacing 1px

.michigan-icon
  display inline-block
  width 28px
  height 28px
  background-image url("./assets/icons8-michigan-50.png")
  background-repeat no-repeat
  background-position center
  background-size 28px
  margin-left 4px

@font-face
  font-family Paytone
  src url("./assets/PaytoneOne-Regular.ttf")
</style>