<template>
  <v-navigation-drawer v-model="s.nav">
    <v-list>
      <v-list-subheader title="Vault"/>
      <v-list-item prepend-icon="mdi-safe-square" title="Assets" @click="nav('vault')"/>
      <v-list-item prepend-icon="mdi-information-outline" title="Orders" @click="nav('orders')"/>
      <v-list-subheader title="Dexorders"/>
      <v-list-item prepend-icon="mdi-clock-outline" title="DCA" subtitle="Spread order across time" @click="nav('twap')"></v-list-item>
      <v-list-item prepend-icon="mdi-menu" title="Ladder" subtitle="Multiple price levels" @click="nav('ladder')"></v-list-item>
      <v-list-item prepend-icon="mdi-vector-line" title="Diagonal" subtitle="Trends and channels" @click="nav('diagonal')"></v-list-item>
      <v-list-item prepend-icon="mdi-hammer-wrench" title="Custom" subtitle="Create your own" @click="nav('custom')"></v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script setup>
import {useStore} from "@/store/store";
import {router} from "@/router/router.js";
const s = useStore()

function nav(path) {
  router.push('/'+path) // todo use nav()
  s.nav = false
}

function close() {
  console.log('closeoae')
  if(s.nav)
    s.nav=false
}
</script>

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

</style>
