<nav role='navigation'>
  <ul>
    <li class="entypo-book-open"><a href="#">Articles</a></li>
    <li class="entypo-twitter"><a href="#">Tweets</a></li>
    <li class="entypo-user"><a href="#">About</a></li>
    <li class="entypo-camera"><a href="#">Photos</a></li>
    <li class="entypo-cog"><a href="#">Settings</a></li>
    <li class="entypo-record button red"><a href="#">Red</a></li>
    <li class="entypo-record button green"><a href="#">Green</a></li>
    <li class="entypo-record button blue"><a href="#">Blue</a></li>
  </ul>
</nav>

<div class="main">
   
  <h1>Colorful Nav</h1>
  
<ul>
  <li>Google fonts &mdash; <a href="https://www.google.com/fonts/specimen/Inconsolata">Inconsolata</a></li>
  <li>Icons from &mdash; <a href="http://www.entypo.com/">Entypo</a> &amp; <a href="https://github.com/TimPietrusky/weloveiconfonts">We Love Icon Fonts</a></li>
  <li>Color coordinated icon hover colors</li>
  <li>Storing color selection with localStorage <span class="callout">current &mdash; <span id="current"></span></span></li>
</ul>  
  
</div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Inconsolata:700);
@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

$white: #ffffff;
$slate: #404041;
$red: #ff3e39;
$green: #00ce61;
$blue: #0074ce;

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

html {
  -webkit-font-smoothing: antialiased;
}

body {
  @include transition-property(background);
  @include transition-duration(300ms);
  font-family: 'Inconsolata', sans-serif;
  font-style: normal;
}

nav {
  width: 75px;
  background: $white;
/*  border-right: 1px solid $slate;*/
  position: fixed;
  z-index: 10;
  height: 100%;
  
  li {
    
    position: relative;
    color: $slate;
    width: 75px;
    height: 50px;
    text-align: center;
    font-size: 22px;
    line-height: 50px;
    display: block;
    @include transition-property(color);
    @include transition-duration(300ms);
    
    &:hover {
      
      color: $red;
      
      a {
        left: 100px;  
      }
    }
    
    &:first-child {
      padding-top: 10px;  
    }

    &:last-child {
      padding-bottom: 10px;
    }
    
    a {

      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
      position: absolute;
      z-index: -1;
      left: 0px;
      color: $white;
      @include transition-property(left);
      @include transition-duration(300ms);
    }

  }
}

.button {
  
  &.red {
    color: $red;  
  }

  &.green {
    color: $green;  
  }

  &.blue {
    color: $blue;  
  }
  
}

.main {
  
  padding: 50px;
  position: relative;
  left: 200px;  
  color: $white;
  font-weight: 700;
  
  .callout {
    background: rgba($white, 0.2);
    padding: 3px 6px 4px 6px;
    font-size:14px;
    @include border-radius(2px);
  }
  
  ul {
    
    list-style: disc;
    line-height: 2;
    
  }

  a {
    color: $white;
    text-decoration: none;
    border-bottom: 1px solid $white;
  }
  
}

h1 {
  font-weight: 700;
  font-size: 32px;  
  margin-bottom: 20px;
}

(function(){
   
  // VARS
  var body = $('body'),
      links = $('nav li').not('.button'),
      buttons = $('nav li.button'),
      current = $('#current'),
      savedColor;
    
  // LOCALSTORAGE ?
  if (typeof(Storage) !== "undefined") {
      savedColor = localStorage.color;
  }
  
  // COLORS
  var colors = [
    "#ff3e39", // red
    "#00ce61", // green
    "#0074ce", // blue
    "#404041"  // slate
  ];  
  
  // CHANGE ALL DEM COLORS
  function setActive(index) {
    
    body.css('background', colors[index]);
    buttons.removeClass('active entypo-cd');
    buttons.eq(index).addClass('active entypo-cd');
    current.text(colors[index]);
    links.hover(
       function(){ $(this).css('color', colors[index]) },
       function(){ $(this).css('color', colors[3]) }
    )
    
  }
  
  // RED BY DEFAULT
  if (savedColor) {
    setActive(savedColor);
    current.text(colors[savedColor]);
  } else {
    setActive(0);
    current.text(colors[0]);
  }
  
  // CLICK
  buttons.on('click', function (e) {
    
    e.preventDefault();
    var index = $(this).index('li.button');    
    setActive(index);
    localStorage.color = index;
    
  });

})();