Improving the navigation by moving it all to a service, adding a generic icon

Gemfile

@@ -49,6 +49,7 @@ group :assets do
   gem 'uglifier', '>= 1.0.3'
 
   gem 'turbo-sprockets-rails3'
+  gem 'foundation-icons-sass-rails'
 
 end
 gem "foundation-rails"

Gemfile.lock

@@ -262,6 +262,9 @@ GEM
       nokogiri (~> 1.5)
       ruby-hmac
     formatador (0.2.4)
+    foundation-icons-sass-rails (3.0.0)
+      railties (>= 3.1.1)
+      sass-rails (>= 3.1.1)
     foundation-rails (5.2.1.0)
       railties (>= 3.1.0)
       sass (>= 3.2.0)
@@ -509,6 +512,7 @@ DEPENDENCIES
   eaterprises_feature!
   factory_girl_rails
   faker
+  foundation-icons-sass-rails
   foundation-rails
   foundation_rails_helper!
   geocoder

app/assets/javascripts/darkswarm/controllers/account_sidebar_controller.js.coffee

@@ -0,0 +1,9 @@
+window.AccountSidebarCtrl = Darkswarm.controller "AccountSidebarCtrl", ($scope, $http, $location, SpreeUser, Navigation) ->
+  $scope.path = "/account"
+  Navigation.paths.push $scope.path
+
+  $scope.active = ->
+    $location.path() == $scope.path
+
+  $scope.select = ->
+    Navigation.navigate($scope.path)

app/assets/javascripts/darkswarm/controllers/forgot_sidebar_controller.js.coffee

@@ -1,12 +1,14 @@
-window.ForgotSidebarCtrl = Darkswarm.controller "ForgotSidebarCtrl", ($scope, $http, $location, SpreeUser) ->
+window.ForgotSidebarCtrl = Darkswarm.controller "ForgotSidebarCtrl", ($scope, $http, $location, SpreeUser, Navigation) ->
   $scope.spree_user = SpreeUser.spree_user
+  $scope.path = "/forgot"
   $scope.sent = false
+  Navigation.paths.push $scope.path
 
   $scope.active = ->
-    $location.path() == '/forgot'
+    $location.path() == $scope.path
 
   $scope.select = ->
-    $location.path("/forgot")
+    Navigation.navigate($scope.path)
 
   $scope.submit = ->
     if $scope.spree_user.email != null

app/assets/javascripts/darkswarm/controllers/login_sidebar_controller.js.coffee

@@ -1,11 +1,14 @@
-window.LoginSidebarCtrl = Darkswarm.controller "LoginSidebarCtrl", ($scope, $http, $location, SpreeUser) ->
+window.LoginSidebarCtrl = Darkswarm.controller "LoginSidebarCtrl", ($scope, $http, $location, SpreeUser, Navigation) ->
   $scope.spree_user = SpreeUser.spree_user
+  $scope.path = "/login"
+  Navigation.paths.push $scope.path
 
   $scope.active = ->
-    $location.path() == '/login'
+    $location.path() == $scope.path
 
   $scope.select = ->
-    $location.path("/login")
+    Navigation.navigate($scope.path)
+
 
   $scope.submit = ->
     $http.post("/user/spree_user/sign_in", {spree_user: $scope.spree_user}).success (data)->

app/assets/javascripts/darkswarm/controllers/menu_controller.js.coffee

@@ -1,12 +1,10 @@
-window.MenuCtrl = Darkswarm.controller "MenuCtrl", ($scope, $location) ->
+window.MenuCtrl = Darkswarm.controller "MenuCtrl", ($scope, Navigation) ->
+
   $scope.toggleLogin = ->
-    if $location.path() == "/login"
-      $location.path("/")
-    else
-      $location.path("login")
+    Navigation.navigate "/login"
 
   $scope.toggleSignup = ->
-    if $location.path() == "/signup"
-      $location.path("/")
-    else
-      $location.path("signup")
+    Navigation.navigate "/signup"
+
+  $scope.toggle = ->
+    Navigation.navigate()

app/assets/javascripts/darkswarm/controllers/sidebar_controller.js.coffee

@@ -1,3 +1,6 @@
 window.SidebarCtrl = Darkswarm.controller "SidebarCtrl", ($scope, $location) ->
+  $scope.sidebarPaths = ["/login", "/signup", "/forgot", "/account"] 
+
   $scope.active = ->
-    $location.path() in ["/login", "/signup", "/forgot"]
+    $location.path() in $scope.sidebarPaths 
+

app/assets/javascripts/darkswarm/controllers/signup_sidebar_controller.js.coffee

@@ -1,14 +1,16 @@
-window.SignupSidebarCtrl = Darkswarm.controller "SignupSidebarCtrl", ($scope, $http, $location, SpreeUser) ->
+window.SignupSidebarCtrl = Darkswarm.controller "SignupSidebarCtrl", ($scope, $http, $location, SpreeUser, Navigation) ->
   $scope.spree_user = SpreeUser.spree_user
+  $scope.path = "/signup"
+  Navigation.paths.push $scope.path
   $scope.errors =
     email: null
     password: null
 
   $scope.active = ->
-    $location.path() == '/signup'
+    $location.path() == $scope.path
 
   $scope.select = ->
-    $location.path("/signup")
+    Navigation.navigate($scope.path)
 
   $scope.submit = ->
     $http.post("/user/spree_user", {spree_user: $scope.spree_user}).success (data)->

app/assets/javascripts/darkswarm/services/navigation.js.coffee

@@ -0,0 +1,12 @@
+Darkswarm.factory 'Navigation', ($location) ->
+  new class Navigation
+    paths: []
+    path: null
+
+    navigate: (path = false)->
+      @path = path || @path || @paths[0] 
+
+      if $location.path() == @path
+        $location.path("/")
+      else
+        $location.path(@path)

app/assets/stylesheets/darkswarm/all.scss

@@ -7,3 +7,4 @@
    *= require foundation
    *= require_tree .
 */
+@import 'foundation-icons';

app/assets/stylesheets/darkswarm/header.css.sass

@@ -1,6 +1,10 @@
 /*body { background: #ff0000; }*/
 nav.top-bar
   margin-bottom: 0px
+  a.icon
+    line-height: auto
+    font-size: 1.75em
+    color: white
 
 body > section[role='main']
   padding: 0px

app/views/layouts/darkswarm.html.haml

@@ -22,6 +22,4 @@
       = yield
       
       #footer
-
-
     = yield :scripts

app/views/shared/_login_sidebar.html.haml

@@ -3,8 +3,10 @@
   active: "active()", 
   select: "select()"}
   %form{"ng-submit" => "submit()"}
-    .alert-box.alert{"ng-show" => "errors != null"}
-      {{ errors }}
+    .row
+      .large-12.columns
+        .alert-box.alert{"ng-show" => "errors != null"}
+          {{ errors }}
     .row
       .large-12.columns
         %label{for: "email"} Email

app/views/shared/_menu.html.haml

@@ -1,6 +1,9 @@
 %nav.top-bar
   %section.top-bar-section
     %ul.left{"ng-controller" => "MenuCtrl"}
+      %li
+        %a.icon{"ng-click" => "toggle()"}
+          %i.fi-list
       %li= link_to image_tag("ofn_logo_small.png"), root_path
       %li.divider
       - if spree_current_user.nil?

app/views/shared/_sidebar.html.haml

@@ -1,7 +1,13 @@
 %section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", 
 "ng-class" => "{'active' : active()}"}
-  %tabset
-    = render partial: "shared/login_sidebar"
-    = render partial: "shared/signup_sidebar"
-    = render partial: "shared/forgot_sidebar"
+
+  - if spree_current_user.nil?
+    %tabset
+      = render partial: "shared/login_sidebar"
+      = render partial: "shared/signup_sidebar"
+      = render partial: "shared/forgot_sidebar"
+  - else
+    #account{"ng-controller" => "AccountSidebarCtrl"}
+      .row
+        You have an account! Well done
   = yield :sidebar

spec/javascripts/unit/darkswarm/navigation.js.coffee

@@ -0,0 +1,16 @@
+describe 'Navigation service', ->
+  Navigation = null
+  
+  beforeEach ->
+    module 'Darkswarm'
+    inject ($injector)->
+      Navigation = $injector.get("Navigation")
+
+  it "caches the path provided", ->
+    Navigation.navigate "/foo"
+    expect(Navigation.path).toEqual "/foo"
+
+  it "defaults to the first path in the list", ->
+    Navigation.paths = ["/test", "/bar"]
+    Navigation.navigate()
+    expect(Navigation.path).toEqual "/test"