section#nav-test
	#nav-container
		ul
			li.nav-li.active-nav
				a Home
			li.nav-li
				a Projects
			li.nav-li
				a Pricing
			li.nav-li
				a Contact
		#line

@import url(https://fonts.googleapis.com/css?family=Roboto);

body {
	margin: 0;
	font-family: "Roboto", "Helvetica Neue", "Helvetica",  "Arial", sans-serif;
	background: #eaeaea;
}

section#nav-test {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;

	#nav-container {
		position: relative;
		margin: 60px auto;
		box-sizing: border-box;

		ul {
			display: flex;
			background: rgb(50, 54, 57);
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
			padding-left: 30px;
			padding-right: 30px;
			margin: 0;

			li {
				display: flex;
				align-items: center;
				min-height: 48px;
				margin-left: 60px;
				cursor: pointer;
				user-select: none;

				&:first-child {
					margin-left: 0;
				}

				a {
					color: rgb(241, 241, 241);
				}
			}
		}

		#line {
			position: absolute;
			bottom: 0;
			height: 2px;
			background: red;
			transition: all 150ms ease-in-out;
		}
	}
	
	h1 {
		margin-top: 30px;
		font-weight: 500;
		color: #212121;
	}
}

$line = $('#line')
$navListItem = $('.nav-li')
$activeWidth = $('.active-nav').width()
$firstChild = $('.nav-li:first-child')
$defaultMarginLeft = parseInt($('.nav-li:first-child').next().css('marginLeft').replace(/\D/g, ''))
$defaultPaddingLeft = parseInt($('#nav-container > ul').css('padding-left').replace(/\D/g, ''))

$line.width($activeWidth + 'px')
$line.css('marginLeft', $defaultPaddingLeft + 'px')

$navListItem.click ->
	$this = $(this)
	$activeNav = $('.active-nav')
	$currentWidth = $activeNav.width()
	$currentOffset = $activeNav.position().left
	$currentIndex = $activeNav.index()
	$activeNav.removeClass('active-nav')
	$this.addClass('active-nav')

	if $this.is($activeNav)
		return 0;

	else 
		if $this.index() > $currentIndex
			if $activeNav.is($firstChild)
				$initWidth = $defaultMarginLeft + $this.width() + $this.position().left - $defaultPaddingLeft
			else
				$initWidth = $this.position().left + $this.width() - $currentOffset

			$marginLeftToSet = $this.position().left + $defaultMarginLeft + 'px'

			$line.width($initWidth + 'px')
			setTimeout( ->
				$line.css('marginLeft', $marginLeftToSet)
				$line.width($this.width() + 'px')
			, 175)

		else
			if $this.is($firstChild)
				$initWidth = $currentOffset - $defaultPaddingLeft + $defaultMarginLeft + $currentWidth
				$marginLeftToSet = $this.position().left
			else
				$initWidth = $currentWidth + $currentOffset - $this.position().left
				$marginLeftToSet = $this.position().left + $defaultMarginLeft

			$line.css('marginLeft', $marginLeftToSet)
			$line.width($initWidth + 'px')
			setTimeout( ->
				$line.width($this.width() + 'px')
			, 175)