nav suggest

# förslag på bättre nav
## bakgrund
Vi ska toggla 2-3 nivåer av navigeringar och vidare hålla koll på dess state etc
Som det görs nu sätts det klasser rätt på nivåerna, tidigare och nästa. Det görs också på samma typ av sätt,
fast duplicerat över 3 clicks/triggers.

## Snippet

	// Open next level
	.directive('menuItem', function() {
	  var link = function(scope, element) {
	      element.on('click', function() {
	          element.parent().parent().removeClass('show');
	          element.parent().parent().parent().parent().removeClass('show');
	          element.next().addClass('show');
	      });
	  };

	  return {
	      link: link
	  };
	});


## Svagheter i nuvarande lösning
- Den viktigaste för mig är att scriptet är helt beroende av markupens struktur
Separation av funktionalitet och design gör att man kan återanvända och lättare förstå ena utan att förstå det andra. "separation of concerns".
Vet inte hur mycket jag säger emot mig själv när jag säger så, och sen föreslår "ng-class" i min lösning.
- Det andra är att det görs på ett ineffektivt sätt:  call på "element" används 3 gånger (onödigt performance för script att behöva titta i domen 3 gånger), och selectors efter de är "parent().parent().parent()" - (onödig dom-plaskande).
- Samma lösning är kopierad 2 gånger.
- Ändringar av klasser görs på 3 ställen från scriptet.
- "I don't like it"

## Förslag på lösning - arkitektur
En del i UI-et är hur vi styr; visar och döljer navigering och olika nivåer.

Det som vore bättre och lättare sätt att hantera visa/dölja nivåerna med, vore genom CSS. Och för att göra det smidigare i script.
Exempel: Sätta klass högre upp rätt på nav elementet så att man kan från ett ställe ärva ut regler för att visa rätt nav etc.

	// "script"
	// controller.js
	$scope.currentNavLevel = 0; // sätt på controller för nav. ($scope sätts i controller

	// return class and indicate level for nav
	$scope.navLevel = function() {
		var navClass = ['none', 'level1', 'level2', 'level3'];
		return = navClass[$scope.currentNavLevel]; // get class of navClassArray
	}
	// usage in .html
	<div ng-class="navLevel"></div>
	// if $scope.currentNavLevel == 2 you get "level2" as class,  think

	// för hantering av nivå-visning
	ng-click="currentNavLevel++"
	eller
	ng-click="currentNavLevel--"


	// directive.js
	element.on('click', function(scope, element, attrs) {
		// 1. hitta nuvranade nivå
		var navLevel = scope.currentNavLevel; // scope är globalnamespace
		// 2. gå fram eller back en nivå ( toggla rätt meny )
		scope.currentNavLevel++;
		// eller
		scope.currentNavLeel--;
	}



	// css
	.nav { /* default nav styles */ }
	.nav.show { /* show default styles */ }
	.nav.show.level1 {
	/* if level1 is added to nav */
		.level1 {
		// make it show
		}
	}

	.nav.show.level2 {
		.level2 {
		// make it show
		}
	}