Untitled

<template>
  <nav
    class="
      navigation-bar
      w-full
      bg-gradient-to-t
      from-gray-200
      to-gray-100
    "
  >
    <div class="flex justify-between sm:justify-start py-2">
      <button
        v-if="!store.isLoggedIn"
        @click="openLoginModal"
        class="bg-gray-600 text-white font-bold ml-2 px-2 rounded-md sm:px-10 sm:py-1"
      >
        LOGIN
      </button>
      <h1 class="text-center text-300xl font-bold sm:ml-10">
        Welcome to my Vue aplications!
      </h1>
      <button id="navigation-hamburger" @click="showNavigationLinks" class="block mr-3 sm:hidden">
        <i class="fas fa-bars fa-2x"></i>
      </button>
    </div>

    <div id="navigation-links" class="hidden sm:block">
      <div class="flex flex-col sm:flex-row sm:justify-start">
      <router-link
        class=" bg-gray-600 text-white text-center sm:px-10 sm:py-3 sm:mx-1 sm:rounded-t-md"
        :key="router.to"
        v-for="router in list"
        :to="router.to"
        >{{ router.title }}</router-link
      >
      </div>
    </div>
  </nav>
</template>

<script>
import firebase from "../utilities/firebase";
import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
  props: {
    isLoggedIn: { type: Boolean, required: false },
  },

  data() {
    return {
      store: this.$store.state,
      textToSignal: "I am your children signal!",

      list: [
        { title: "Home", to: "/" },
        { title: "Chat", to: "/database-test" },
        { title: "Tensor Flow", to: "/tensor-flow" },
        { title: "Weather App", to: "/weather-app" },
      ],
    };
  },

  computed: {
    ...mapGetters(["doubleCount", "getCount"]),
  },

  actions: {
    ...mapActions(["moreCounter"]),
  },

  methods: {
    ...mapMutations([
      "setCounter",
      "increment",
      "openLoginModal",
      "setHighCounter",
      "consoleLogger/tellHello",
    ]),

    showWelcomeMessage() {
      this.welcomeMessage = !this.welcomeMessage;
    },

    showNavigationLinks() {
      const toggle = document.getElementById("navigation-links");

      if (toggle.style.display === "block") {
        toggle.style.display = "none";
      } else {
        toggle.style.display = "block";
      }
    },

    logout() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          console.log("Log out successfull!");
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style>
</style>