Skip to content

Instantly share code, notes, and snippets.

@DataBoiBlog

DataBoiBlog/navbar.vue Secret

Last active Sep 10, 2019
Embed
What would you like to do?
Twitter clone
<template>
<nav>
<div class="nav-wrapper teal">
<div class="container">
<router-link to="/" class="brand-logo">It's Lit! 🔥</router-link>
<div v-bind:value="userID">
</div>
<ul class="right">
<li v-if="isLoggedIn" >
<span class="email black-text" >
@{{name}} - ({{currentEmail}}{{currentDisplay}})
</span>
<div>
</div>
</li>
<li v-if="isLoggedIn">
<router-link to="/profile">Profile</router-link>
</li>
<li v-if="isLoggedIn">
<router-link to="/">Home</router-link>
</li>
<li v-if="!isLoggedIn">
<router-link to="/login">Login</router-link>
</li>
<li v-if="!isLoggedIn">
<router-link to="/register">Register</router-link>
</li>
<li v-if="isLoggedIn">
<button class="btn black" v-on:click="logout">Logout</button>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
import Login from "./Login";
import db from "./firebaseInit";
import 'firebase/firestore'
import firebase from "firebase/app";
import username from "./Login";
import employees from "./employeeList"
import "firebase/auth";
export default {
name: "navbar",
props: {
},
components: {},
data() {
return {
isLoggedIn: false,
currentEmail: false,
currentDisplay: false,
currentHandle: "",
name: false
};
},
firestore() {
const user = firebase.auth().currentUser;
return{
profile: db.collection('profiles').doc(user.uid)
}
},
created() {
if (firebase.auth().currentUser) {
this.isLoggedIn = true;
this.currentEmail = firebase.auth().currentUser.email;
this.currentDisplay = firebase.auth().currentUser.displayName;
this.userID = firebase.auth().currentUser.uid;
db.collection('profiles').doc(firebase.auth().currentUser.uid).get().then(doc => {
this.name = doc.data().name
})
}
},
methods: {
logout: function() {
firebase
.auth()
.signOut()
.then(() => {
this.$router.go({ path: this.$router.path });
});
}
}
};
</script>
<style scoped>
.email {
padding-right: 0px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.