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)