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">
          <template v-for="(element, i) in logoElements" v-bind:key="i">
            <span :style="`color: #${element.color}`">{{ element.letter }}</span>
          </template>
        </span>
      </RouterLink>
    </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="/admin/dashboard" class="button is-primary">
              Admin
            </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>
          <div class="is-flex is-flex-direction-row is-justify-content-center"
               style="height: 90vh">
            <span style="font-size: 1.25em; color: greenyellow; margin: auto 0">Loading...</span>
          </div>
        </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);

interface LogoElement {
  letter: string;
  color: string;
}

const logoElements: LogoElement[] = [
  {
    color: '9fe82c',
    letter: 'B',
  },
  {
    color: '8ee045',
    letter: 'e',
  },
  {
    color: '7dd95c',
    letter: 'i',
  },
  {
    color: '6dd373',
    letter: 'g',
  },
  {
    color: '5dcb8a',
    letter: 'n',
  },
  {
    color: '4cc4a2',
    letter: 'e',
  },
  {
    color: '3dbeb8',
    letter: 't',
  },
];
</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

.navbar-burger > *
  background-color #fff !important

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