Untitled
unknown
javascript
4 years ago
2.6 kB
5
Indexable
<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>
Editor is loading...