Working sliding panel in basic form

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

@@ -1,11 +1,9 @@
 window.SidebarCtrl = Darkswarm.controller "SidebarCtrl", ($scope, $location) ->
-  $scope.active_sidebar = $location.path()
-  
   $scope.$watch ->
     $location.path()
   , ->
     $scope.active_sidebar = $location.path() 
 
 
-  $scope.visible = ->
-    $scope.active_sidebar != null and $scope.active_sidebar != ""
+  $scope.active = ->
+    return "active" if $scope.active_sidbar != null and $scope.active_sidebar != ""

app/assets/stylesheets/darkswarm/all.scss

@@ -7,5 +7,3 @@
    *= require foundation
    *= require_tree .
 */
-
-

app/assets/stylesheets/darkswarm/offcanvas.css

@@ -0,0 +1,50 @@
+/* Off canvas layout CSS/JS provided by or adapted from work by Jason Weaver and Luke Wroblewski Requires globals.css grid.css */
+body.off-canvas { padding: 0; margin: 0; overflow: hidden}
+
+.container { width: 100%; }
+
+.row { overflow: hidden; }
+
+.row .row { overflow: visible; }
+
+.paneled .container { overflow: hidden; }
+
+.paneled .row { width: 100%; }
+
+[role="main"]:before { content: " "; position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; }
+
+[role="complementary"], [role="main"] { width: 100%; padding: 0 15px; display: block; position: relative; z-index: 1; -webkit-transition: 0.25s all ease-in; -moz-transition: 0.25s all ease-in; -o-transition: 0.25s all ease-in; transition: 0.25s all ease-in; }
+
+.paneled [role="main"] { padding: 0; }
+
+.page-panel { width: 100%; padding: 0 15px; -webkit-transition: 0.3s margin ease-in-out; -moz-transition: 0.3s margin ease-in-out; -o-transition: 0.3s margin ease-in-out; transition: 0.3s margin ease-in-out; background: #fff; }
+
+#switchPanels { margin: 0 -15px; }
+
+.hide-extras [role="complementary"] { display: block; }
+
+[role="navigation"]#topMenu { -webkit-transition: 0.25s all ease-in; -moz-transition: 0.25s all ease-in; -o-transition: 0.25s all ease-in; transition: 0.25s all ease-in; }
+
+[role="navigation"]#topMenu ul { margin-top: 0; }
+
+[role="complementary"] { margin-left: -100%; width: 400px; float: left; z-index: 2; }
+
+[role="main"] { margin-left: 0; float: right; z-index: 1; position: relative; }
+
+.paneled [role="main"] { background: #fff; width: 500%; overflow: hidden; float: none; position: relative; left: 0; -webkit-transition: 0.15s all ease-in; -moz-transition: 0.15s all ease-in; -o-transition: 0.15s all ease-in; transition: 0.15s all ease-in; }
+
+.page-panel { min-height: 400px; float: left; margin: 0; width: 20%; }
+
+[role="complementary"].active { margin-left: 0; }
+.active + [role="main"] { margin-right: -420px; }
+
+.active-menu [role="navigation"]#topMenu { margin-top: 0 !important; }
+
+@media all and (min-width: 768px) { menu-button, .sidebar-button { display: none; }
+    /*[role="complementary"] { width: 20%; margin-left: 0; float: left; padding: 0 15px; }*/
+    [role="main"] { width: 100%; padding: 0 15px; }
+    .paneled [role="main"] { width: 100%; padding: 0; background: #f4f4f4; left: 0 !important; }
+    .page-panel { display: block; min-height: 800px; float: none; margin: 0; width: 100%; background: #f4f4f4; }
+    .hide-extras [role="main"] { width: 100%; }
+    .hide-extras [role="complementary"] { display: none; }
+    [role="navigation"]#topMenu { display: none; } }

app/views/layouts/darkswarm.html.haml

@@ -16,10 +16,7 @@
     = render partial: "shared/menu"
     = display_flash_messages
 
-    %section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", "ng-show" => "visible()"}
-      {{ active_sidebar }}
-      TEST ME
-      %a{href: "#"} close
+    %section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", "ng-class" => "active()"}
       = render partial: "shared/login_panel"
       = yield :sidebar
 

app/views/shared/_login_panel.html.haml

@@ -1,5 +1,6 @@
 .login-panel
-  #login-content.hide
+  %a{href: "#"} Close
+  #login-content
     = render "home/login"
-  #sign-up-content.hide
+  #sign-up-content
     = render "home/signup"

app/views/shared/_menu.html.haml

@@ -3,4 +3,7 @@
     %ul.left
       %li= link_to image_tag("ofn_logo_small.png"), root_path
       %li.divider
-      = render partial: "shared/login"
+      - if spree_current_user.nil?
+        = render 'shared/signed_out'
+      - else
+        = render 'shared/signed_in'

app/views/shared/_signed_in.html.haml

@@ -0,0 +1,5 @@
+%li#login-link.hide= link_to "Login", "#sidebar", id: "sidebarLoginButton", class: "sidebar-button"
+%li#login-name= link_to "#{spree_current_user.email}", "#"
+%li.divider
+%li#sign-up-link.hide= link_to "Sign Up", "#"
+%li#sign-out-link= link_to "Sign Out", "/logout"

app/views/shared/_signed_out.html.haml

@@ -0,0 +1,5 @@
+%li#login-link= link_to "Login", "#login", id: "sidebarLoginButton", class: "sidebar-button"
+%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"