From 629fddefa7ef6330aec82efef1126386154df1ec Mon Sep 17 00:00:00 2001
From: lucasjs <lucas.tcjb@gmail.com>
Date: Sun, 19 Nov 2017 23:57:23 -0200
Subject: [PATCH] Add Tabs Top #1

---
 src/components/TabsTop.vue | 85 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/components/TabsTop.vue

diff --git a/src/components/TabsTop.vue b/src/components/TabsTop.vue
new file mode 100644
index 0000000..7974556
--- /dev/null
+++ b/src/components/TabsTop.vue
@@ -0,0 +1,85 @@
+<template>
+	<nav class="tabs-top">
+		<ul class="tabs-top__links">
+			<li
+				v-for="link of links"
+				:key="link.class"
+				class="tabs-top__link"
+			>
+				<a
+					:href="link.url"
+					:class="link.class"
+				>
+					{{ link.name }}
+				</a>
+			</li>
+		</ul>
+	</nav>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			links: [
+				{
+					class: 'minha-area',
+					url: '#',
+					name: 'minha área',
+				},
+				{
+					class: 'todas-areas',
+					url: '#',
+					name: 'todas as áreas',
+				},
+				{
+					class: 'hashtags',
+					url: '#',
+					name: '#hashtags',
+				},
+			],
+		};
+	},
+};
+</script>
+
+<style lang="stylus" scoped>
+	@import '../assets/styles/_colors'
+
+	*
+		box-sizing border-box
+
+	.tabs-top
+		background transparent
+		border-bottom 1px solid $pink
+		margin-bottom 20px
+		padding 15px
+		width 100%
+
+		&__links
+			align-items center
+			display flex
+			justify-content: space-between;
+			margin 0
+
+		&__link
+			list-style none
+
+			a
+				color $pink
+				font-size 12pt
+				text-transform lowercase
+
+				&.active
+					font-weight 600
+					position relative
+
+					&:after
+						background $pink
+						bottom 0
+						content ''
+						display block
+						height 4px
+						position absolute
+						width inherit
+</style>