<template>
  <v-app-bar flat>
    <v-app-bar-title>
      <span class="logo clickable" @click="$router.push('/')">
        <v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/>
        <span class="clickable">dexorder</span>
      </span>
      <v-chip text="ALPHA" size="x-small" color="red" class="mx-1"/>
    </v-app-bar-title>

    <v-btn icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
    <v-btn icon="mdi-swap-horizontal-circle-outline" text="New Order" @click="$router.push('/twap')"></v-btn>
    <v-btn icon="mdi-menu" text="Order Status" @click="$router.push('/orders')"></v-btn>

  </v-app-bar>
</template>

<script setup>
</script>


<style lang="scss">
@use "src/styles/vars" as v;

.arrow {
  color: v.$green;
  vertical-align: text-top;
}

.logo {
  font-family: v.$heading-font-family;
  font-weight: 500;
  font-size: 32px;
}

</style>
