From ab50fe765c6eae661e52747f14e440f1fecf392a Mon Sep 17 00:00:00 2001
From: lucasjs <lucas.tcjb@gmail.com>
Date: Thu, 30 Nov 2017 23:45:41 -0200
Subject: [PATCH] Edit tabs bottom #1

---
 src/components/TabsBottomAprendiz.vue         | 97 +++++++++++++++++++
 .../{TabsBottom.vue => TabsBottomGuru.vue}    |  7 +-
 2 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/components/TabsBottomAprendiz.vue
 rename src/components/{TabsBottom.vue => TabsBottomGuru.vue} (93%)

diff --git a/src/components/TabsBottomAprendiz.vue b/src/components/TabsBottomAprendiz.vue
new file mode 100644
index 0000000..8a247c2
--- /dev/null
+++ b/src/components/TabsBottomAprendiz.vue
@@ -0,0 +1,97 @@
+<template>
+	<nav class="tabs-bottom">
+		<ul class="tabs-bottom__links">
+			<li
+				v-for="link in links"
+				:key="link.class"
+			>
+				<router-link
+					:to="link.url"
+					class="tabs-bottom__link"
+					:class="link.class"
+					active-class="active"
+				>
+					{{ link.name }}
+				</router-link>
+			</li>
+		</ul>
+	</nav>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			links: [
+				{
+					class: 'home',
+					url: '/home',
+					name: 'home',
+				},
+				{
+					class: 'buscar',
+					url: '/buscar',
+					name: 'buscar',
+				},
+				{
+					class: 'perguntar',
+					url: '/perguntas',
+					name: 'perguntar',
+				},
+				{
+					class: 'perfil',
+					url: '/perfil',
+					name: 'perfil',
+				},
+			],
+		};
+	},
+};
+</script>
+
+<style lang="stylus" scoped>
+	@import '../assets/styles/*'
+
+	*
+		box-sizing border-box
+
+	.tabs-bottom
+		background #fff
+		bottom 0
+		box-shadow 0px 0px 20px 0px rgba(0, 0, 0, 0.3)
+		padding 10px
+		position fixed
+		width 100%
+		z-index 99
+
+		&__links
+			align-items center
+			display flex
+			justify-content space-between
+			margin 0
+			padding 0 10px
+			holder()
+
+			li
+				list-style none
+
+		&__link
+			color $pink
+			font-size 12pt
+			text-transform lowercase
+
+			&.active
+				font-weight 600
+				position relative
+
+				&:after
+					background $pink
+					top -13px
+					content ''
+					height 5px
+					left 0
+					margin 0 auto
+					position absolute
+					right 0
+					width 80%
+</style>
diff --git a/src/components/TabsBottom.vue b/src/components/TabsBottomGuru.vue
similarity index 93%
rename from src/components/TabsBottom.vue
rename to src/components/TabsBottomGuru.vue
index ee246a0..0301990 100644
--- a/src/components/TabsBottom.vue
+++ b/src/components/TabsBottomGuru.vue
@@ -41,7 +41,12 @@ export default {
 				{
 					class: 'responder',
 					url: '/perguntas',
-					name: 'perguntas',
+					name: 'responder',
+				},
+				{
+					class: 'perfil',
+					url: '/perfil',
+					name: 'perfil',
 				},
 			],
 		};