tati fucks up navbar

client/css/navbar.css

@@ -0,0 +1,61 @@
+nav  ul {
+	list-style: none;
+}
+
+nav ul li {
+	display: inline;
+}
+nav a {
+	position: relative;
+	display: inline-block;
+	margin: 15px 25px;
+	outline: none;
+	color: #4a4a4a;
+	text-decoration: none;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	padding: 0 0 10px;
+    font-size: 16px;
+    opacity: 0.8;
+    transition: opacity ease-in 0.2s;
+}
+
+nav a:hover,
+nav a:focus {
+	outline: none;
+    opacity: 1;
+    cursor: pointer;
+    color: #333;
+}
+
+nav a.router-link-active {
+    opacity: 1;
+    font-family: ralewayBold;
+}
+
+nav a::after {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	height: 1px;
+	background: #4a4a4a;
+	content: '';
+	opacity: 0;
+	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
+	transition: height 0.3s, opacity 0.3s, transform 0.3s;
+	-webkit-transform: translateY(-10px);
+	-moz-transform: translateY(-10px);
+	transform: translateY(-10px);
+}
+
+nav a:hover::after,
+nav a:focus::after,
+nav a.router-link-active::after {
+	height: 2px;
+	opacity: 1;
+	-webkit-transform: translateY(0px);
+	-moz-transform: translateY(0px);
+	transform: translateY(0px);
+}

client/css/products.css

@@ -1,55 +1,3 @@
-nav.category-nav a {
-	position: relative;
-	display: inline-block;
-	margin: 15px 25px;
-	outline: none;
-	color: #4a4a4a;
-	text-decoration: none;
-	text-transform: uppercase;
-	letter-spacing: 1px;
-	padding: 0 0 10px;
-    font-size: 16px;
-    opacity: 0.8;
-    transition: opacity ease-in 0.2s;
-}
-
-nav.category-nav a:hover,
-nav.category-nav a:focus {
-	outline: none;
-    opacity: 1;
-}
-
-nav.category-nav a.router-link-active {
-    opacity: 1;
-    font-family: ralewayBold;
-}
-
-nav.category-nav a::after {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	width: 100%;
-	height: 1px;
-	background: #4a4a4a;
-	content: '';
-	opacity: 0;
-	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
-	transition: height 0.3s, opacity 0.3s, transform 0.3s;
-	-webkit-transform: translateY(-10px);
-	-moz-transform: translateY(-10px);
-	transform: translateY(-10px);
-}
-
-nav.category-nav a:hover::after,
-nav.category-nav a:focus::after,
-nav.category-nav a.router-link-active::after {
-	height: 2px;
-	opacity: 1;
-	-webkit-transform: translateY(0px);
-	-moz-transform: translateY(0px);
-	transform: translateY(0px);
-}
 
 ul.product-list {
     list-style: none;

client/css/styles.css

@@ -138,7 +138,7 @@ body {
     width: 90%;
 }
 
-.navbar-list{
+/*.navbar-list{
   list-style: none;
   margin-bottom: 0;
   text-align: right;
@@ -166,6 +166,7 @@ ul.navbar-list > li > a {
 ul.navbar-list > li > a:hover {
   color: #898989;
   border-bottom: 1px solid #222;
+  cursor: pointer;
 }
 
 ul.navbar-list > li > a > object {
@@ -173,10 +174,16 @@ ul.navbar-list > li > a > object {
   vertical-align: middle;
 }
 
+ul.navbar-list > li > a.selected {
+  color: #222;
+  border-bottom: 1px solid #222;
+  font-family: ralewayBold;
+}*/
+
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+.fade-enter, .fade-leave-to {
   opacity: 0
 }
 

client/js/app.js

@@ -40,8 +40,6 @@ rivets.configure({
     executeFunctions: true
 })
 
-
-
 var app = document.getElementById('app');
 var view = rivets.bind(app, {
     sections: sections,
@@ -50,16 +48,17 @@ var view = rivets.bind(app, {
         var newValue = event.target.text;
         window.history.pushState({}, newValue, '#' + newValue)
         chooseSection(newValue);
+        event.target.className = 'selected';
     }
 });
 
 function chooseSection(section) {
-    for (var key in selectedSection_) {
-        var isSelected = (key === section);
-        selectedSection_[key] = isSelected;
-    }
-    //event.target.classList = isSelected ? ['selected-section'] : event.target.classList.filter(function (c) { return c !== 'selected-section'; })
-
+    var navbarList = window.document.querySelectorAll('ul.navbar-list > li > a');
+    navbarList.forEach(function (el) {
+        var isSelected = el.text === section;
+        el.className = isSelected ? 'selected' : '';
+        selectedSection_[el.text] = isSelected;
+    })
 }
 var elements = [];