<template>
  <v-app-bar scroll-behavior="hide" scroll-threshold="1">
<!--    <v-app-bar-nav-icon @click="s.nav=!s.nav" icon="mdi-plus"/>-->
    <v-app-bar-title>
      <span class="logo clickable" @click="s.nav=!s.nav">
        <v-icon icon="mdi-arrow-up-bold" size="x-small" class="arrow" color="green"/>
        <span class="clickable">dexorder</span>
      </span>
    </v-app-bar-title>

    <v-btn icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="route('Assets')"></v-btn>
    <v-btn icon="mdi-information-outline" text="Order Status" @click="route('Status')"></v-btn>

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

<script setup>
import {useStore} from "@/store/store";
const s = useStore()
</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>
