<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>
      <logo @click="// noinspection JSIgnoredPromiseFromCall
    router.push({name: 'Home'})" class="clickable"/>
      <social class="d-inline" size="small"/>
    </v-app-bar-title>

    <v-btn @click="// noinspection JSIgnoredPromiseFromCall
    router.push({name: 'HowItWorks'})" prepend-icon="mdi-information-outline" text="How It Works"/>
    <v-btn prepend-icon="mdi-arrow-up-bold" variant="tonal" color="primary" @click="openApp" text="Launch App"/>

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

<script setup>
import {useTheme} from "vuetify";
import Logo from "@/components/Logo.vue";
import Social from "@/components/Social.vue";
import {router} from "@/router/router.js";

const theme = useTheme().current

function openApp() {
  window.open('https://app.dexorder.com/', 'dexorderapp')
}
</script>

<style scoped lang="scss">
</style>