Reworking the way the Sidebar works

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

@@ -1,14 +1,13 @@
-window.LoginSidebarCtrl = Darkswarm.controller "LoginSidebarCtrl", ($scope, $http) ->
+window.LoginSidebarCtrl = Darkswarm.controller "LoginSidebarCtrl", ($scope, $http, $location) ->
   $scope.spree_user = {
     remember_me: 0
   }
 
   $scope.active = ->
-    $scope.active_sidebar == '/login'
+    $location.path() == '/login'
 
   $scope.submit = ->
     $http.post("/user/spree_user/sign_in", {spree_user: $scope.spree_user}).success (data)->
       location.href = location.origin + location.pathname  # Strips out hash fragments
     .error (data) ->
       $scope.errors = data.message
-

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

@@ -0,0 +1,12 @@
+window.MenuCtrl = Darkswarm.controller "MenuCtrl", ($scope, $location) ->
+  $scope.toggleLogin = ->
+    if $location.path() == "/login"
+      $location.url("/")
+    else
+      $location.url("login#sidebar")
+
+  $scope.toggleSignup = ->
+    if $location.path() == "/signup"
+      $location.url("/")
+    else
+      $location.url("signup#sidebar")

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

@@ -1,8 +1,3 @@
 window.SidebarCtrl = Darkswarm.controller "SidebarCtrl", ($scope, $location) ->
-  $scope.$watch ->
-    $location.path()
-  , ->
-    $scope.active_sidebar = $location.path() 
-
   $scope.active = ->
-    return "active" if $scope.active_sidebar != null and $scope.active_sidebar != ""
+    $location.hash() == "sidebar"

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

@@ -1,11 +1,11 @@
-window.SignupSidebarCtrl = Darkswarm.controller "SignupSidebarCtrl", ($scope, $http) ->
+window.SignupSidebarCtrl = Darkswarm.controller "SignupSidebarCtrl", ($scope, $http, $location) ->
   $scope.spree_user = {}
   $scope.errors =
     email: null
     password: null
 
   $scope.active = ->
-    $scope.active_sidebar == '/signup'
+    $location.path() == '/signup'
 
   $scope.submit = ->
     $http.post("/user/spree_user", {spree_user: $scope.spree_user}).success (data)->

app/views/layouts/darkswarm.html.haml

@@ -16,11 +16,7 @@
     = render partial: "shared/menu"
     = display_flash_messages
 
-    %section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", "ng-class" => "active()"}
-      %a{href: "#"} Close
-      = render partial: "shared/login_sidebar"
-      = render partial: "shared/signup_sidebar"
-      = yield :sidebar
+    = render "shared/sidebar"
 
     %section{ role: "main" }
       = yield
@@ -29,4 +25,3 @@
 
 
     = yield :scripts
-

app/views/shared/_menu.html.haml

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

app/views/shared/_sidebar.html.haml

@@ -0,0 +1,6 @@
+%section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", 
+"ng-class" => "{'active' : active()}"}
+  %a{href: "#"} Close
+  = render partial: "shared/login_sidebar"
+  = render partial: "shared/signup_sidebar"
+  = yield :sidebar

app/views/shared/_signed_out.html.haml

@@ -1,5 +1,8 @@
-%li#login-link= link_to "Login", "#login", id: "sidebarLoginButton", class: "sidebar-button"
+%li#login-link
+  %a.sidebar-button{"ng-click" => "toggleLogin()"} Login
+
 %li#login-name.hide
 %li.divider
-%li#sign-up-link= link_to "Sign Up", "#signup", id: "sidebarSignUpButton", class: "sidebar-button"
-%li#sign-out-link.hide= link_to "Sign Out", "/logout"
+
+%li#sign-up-link
+  %a.sidebar-button{"ng-click" => "toggleSignup()"} Sign Up

spec/javascripts/unit/darkswarm/controllers/sidebar_controller_spec.js.coffee

@@ -6,19 +6,17 @@ describe "SidebarCtrl", ->
   beforeEach ->
     module("Darkswarm")
     location =
-      path: ->
-        "/test"
+      hash: ->
+        "sidebar"
     inject ($controller, $rootScope) ->
       scope = $rootScope
       ctrl = $controller 'SidebarCtrl', {$scope: scope, $location: location}
     scope.$apply()
 
-  it 'tracks the active sidebar from the $location', ->
-    expect(scope.active_sidebar).toEqual "/test"
-
   it 'is active when a location is set', ->
-    expect(scope.active()).toEqual "active"
+    expect(scope.active()).toEqual true
 
   it 'is inactive no location is set', ->
-    scope.active_sidebar = null
-    expect(scope.active()).toEqual null
+    location.hash = ->
+      null 
+    expect(scope.active()).toEqual false