h1 Vue Tabs
#tabs.tabs
	.tabs-triggers
		.tabs-trigger(
			v-for='(item, index) in categories',
			:class="[index === active ? 'tabs-trigger--active' : '']",
			@click='activate(index)') {{categories[index]}}
	.tabs-content(v-if="active === 0") Content 1
		//- menu-item
	.tabs-content(v-if="active === 1") Content 2
	.tabs-content(v-if="active === 2") Content 3
		

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700");

$base-duration: 250ms;

// Colors
$primary: #BC4B51;
$secondary: #EFCB68;
$accent: #686963;
$white: #fff;

$max-width: 1200px;
// Breakpoints
$sm: 20rem;
$med: 48rem;
$lg: 64rem;

*,
*:before,
*:after {
	box-sizing: border-box;
	outline: none;
}

html {
	font-family: "Source Sans Pro", sans-serif;
	font-size: 16px;
	font-smooth: auto;
	font-weight: 300;
	line-height: 1.5;
	color: #444;
}

body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	background-color: $secondary;
}

.tabs {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: $white;
	&-triggers {
		display: flex;
	}
	&-trigger {
		flex: 1 0 auto;
		margin: 0;
		padding: 1rem;
		background-color: $accent;
		font-weight: bold;
		transition: 100ms linear all;
		cursor: pointer;
		&--active {
			background-color: $white;
			color: $primary;
		}
	}
	&-content {
		padding: 1rem;
		background-color: $white;
	}
}

new Vue({
	el: "#tabs",
	data: {
		active: 0,
		categories: [
			"Tab 1", 
			"Tab 2", 
			"Tab 3"
		]
	},
	methods: {
		activate(index) {
			this.active = index;
		}
	}
});