vue nav

<template>
  <!-- Navbar -->
  <v-app-bar app :color="navcolor" dark elevate-on-scroll height="70" id="navbar">
    <!-- <v-app-bar-nav-icon></v-app-bar-nav-icon> -->

    <v-btn @click="colorNavchg">clk</v-btn>

    <v-toolbar-title>
      <v-btn class="d-flex flex-column" text rounded>
        <img class="mt-2" src="../assets/images/lpt.png" alt height="50" width="50" />
        <div >Diotech</div>
      </v-btn>
    </v-toolbar-title>

    <v-spacer></v-spacer>

    <v-btn v-for="(btn, idx) in navBtns" :key="idx" text rounded @click="log">
      <div>{{ btn.name }}</div>
    </v-btn>

    <v-menu close-on-click origin="center center" transition="scale-transition">
      <template v-slot:activator="{ on }">
        <v-btn rounded color="blue" class="mx-2" v-on="on">Demos</v-btn>
      </template>

      <v-list>
        <v-list-item v-for="n in 3" :key="n" @click="() => {}">
          <v-list-item-title>Option {{ n }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-app-bar>
</template>

<script>
export default {
  data() {
    return {
      navBtns: [
        { name: "HOME", link: "", style: "" },
        { name: "SERVICES", link: "", style: "" },
        { name: "ABOUT", link: "", style: "" }
      ],
      navcolor: 'transparent'
    };
  },
  methods: {
    log() {
      console.log(this.colorNav)
    },
    colorNavchg() {
      this.navcolor = 'green'
    }
  },
  computed: {
    //
  },
  created() {

    // () => {
    //   const nav = document.getElementById('navbar');
    //   if (this.scrollY <= 50) nav.className = "";
    //   else nav.className.concat(' primary');
    // };
  },
  mounted() {
    window.onscroll = function() {
      // const nav = document.getElementById("navbar");
      console.log(this.navcolor);
      if (this.scrollY <= 50) {
        this.navcolor = 'transparent';
      } else {
        this.navcolor = 'blue';
      }

    };
  }
};
</script>

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