navigation active class

README.md

@@ -14,7 +14,6 @@ A simple api to send sms messages with [twillio](https://www.twilio.com/).
 
 ## TODO
 
-* active class on main navs
 * sorcery or a lower oauth solution
 * application log
 * app version file - milestone 0.9.0

app/assets/stylesheets/molecules/nav.scss

@@ -13,6 +13,15 @@
     a {
       color: $light;
     }
+
+    &.active {
+      background-color: $taupe;
+
+      a {
+        color: $dark;
+        cursor: default;
+      }
+    }
   }
 }
 
@@ -27,5 +36,14 @@
       background-color: $light;
     }
   }
+
+  .active a {
+    color: $grey;
+    cursor: default;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
 }
 

app/helpers/application_helper.rb

@@ -4,4 +4,12 @@ module ApplicationHelper
 
     link_to 'page', page_person_path(person)
   end
+
+  def active_controller(kontroller)
+    'active' if params[:controller] == kontroller
+  end
+
+  def active_action(action)
+    'active' if params[:action] == action
+  end
 end

app/views/children/_sub_nav.html.haml

@@ -1,4 +1,4 @@
 %ul.sub-nav
-  %li= link_to 'List', list_children_path
-  %li= link_to 'New', new_child_path
+  %li{ class: active_action('index') }= link_to 'List', list_children_path
+  %li{ class: active_action('new') }= link_to 'New', new_child_path
 

app/views/layouts/_navigation.html.haml

@@ -1,7 +1,7 @@
 %ul.nav
-  %li= link_to 'Home', root_path
-  %li= link_to 'Parents', list_parents_path
-  %li= link_to 'Children', list_children_path
-  %li= link_to 'Staff', list_staff_path
-  %li= link_to 'Users', list_users_path
-  %li= link_to 'Pages', list_pages_path
+  %li{ class: active_controller('docs') }= link_to 'Home', root_path
+  %li{ class: active_controller('parents') }= link_to 'Parents', list_parents_path
+  %li{ class: active_controller('children') }= link_to 'Children', list_children_path
+  %li{ class: active_controller('staff') }= link_to 'Staff', list_staff_path
+  %li{ class: active_controller('users') }= link_to 'Users', list_users_path
+  %li{ class: active_controller('pages') }= link_to 'Pages', list_pages_path

app/views/pages/_sub_nav.html.haml

@@ -1,4 +1,4 @@
 %ul.sub-nav
-  %li= link_to 'View Past Pages', list_pages_path
-  %li= link_to 'Send Page', page_person_path
+  %li{ class: active_action('index') }= link_to 'View Past Pages', list_pages_path
+  %li{ class: active_action('page') }= link_to 'Send Page', page_person_path
 

app/views/parents/_sub_nav.html.haml

@@ -1,4 +1,3 @@
 %ul.sub-nav
-  %li= link_to 'List', list_parents_path
-  %li= link_to 'New', new_parent_path
-
+  %li{ class: active_action('index') }= link_to 'List', list_parents_path
+  %li{ class: active_action('new') }= link_to 'New', new_parent_path