<template>
  <div ref="home" id="home">
    <NavBar />
    <router-view> </router-view>
    <Footer />
    <Sidebar />
  </div>
</template>

<script>
import NavBar from "./homeComponents/NavBar";
import store from "@/store/index";
import Footer from "./homeComponents/Footer";
import Sidebar from "./homeComponents/Sidebar";
import TestNav from "./homeComponents/TestNav";

export default {
  name: "Home",
  components: {
    NavBar,
    Footer,
    Sidebar,
    TestNav,
  },
  data: () => {
    return {
      scrolled: true,
    };
  },
  mounted() {},
  created() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  computed: {},
  mounted() {},
  methods: {
    handleScroll() {
      // console.log("window scroll y: " + window.scrollY);
      if (window.scrollY === 0 && this.scrolled === false) {
        console.log(
          "emitting for nav change top with scrolled: " + this.scrolled
        );
        this.scrolled = true;
        console.log("emitting for nav change");
        this.$root.$emit("changeNav", true);
      } else if (window.scrollY > 0 && this.scrolled === true) {
        console.log(
          "emitting for nav change bottom with scrolled: " + this.scrolled
        );
        this.scrolled = false;
        console.log("scrolled after change: " + this.scrolled);
        this.$root.$emit("changeNav", false);
      }
    },
  },
};
</script>

<style></style>
