Refactored navigation

app/assets/stylesheets/header.scss

@@ -74,7 +74,7 @@ header {
     font-size:24px;
     line-height:36px;
     font-weight:500;
-    color:#567;
+    color:$style_color;
     text-shadow: 0 1px 1px #FFF;
   }
 
@@ -82,7 +82,9 @@ header {
     float: right;
     margin-right:10px;
     .btn { 
-      margin-left:8px;
+      margin-left:7px;
+      background: #F1F1F1;
+      border: 1px solid #CCC;
     }
   }
 
@@ -97,7 +99,7 @@ header {
     margin-right: 55px;
 
     .search-input {
-      width:130px;
+      @extend .span2;
       background-image: url("icon-search.png");
       background-repeat: no-repeat;
       background-position: 10px;

app/assets/stylesheets/nav.scss

@@ -2,7 +2,7 @@
  *  Main Menu of Application
  *
  */
-nav.main_menu { 
+ul.main_menu { 
   border-radius: 4px;
   margin: auto;
   margin:30px 0;
@@ -13,9 +13,7 @@ nav.main_menu {
   background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
   background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
   background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
-  display:table;
-  table-layout:fixed;
-  width:100%;
+  position:relative;
   @include shade;
   .count { 
     position: relative;
@@ -39,10 +37,14 @@ nav.main_menu {
     text-shadow:none;
     color:$style_color;
   }
-  a { 
-    display:table-cell;
-    text-align:center;
-    font-weight:bold;
+  li { 
+    list-style-type: none;
+    margin: 0;
+    display: table-cell;
+    width: 1%;
+    border-right: 1px solid #DDD;
+    border-left: 1px solid #EEE;
+
     &:first-child{ 
       -webkit-border-top-left-radius: 4px;
       -webkit-border-bottom-left-radius: 4px;
@@ -52,22 +54,7 @@ nav.main_menu {
       border-bottom-left-radius: 4px;
       border-left: 0;
     }
-    padding: 9px 2px;
-    color: $style_color;
-    position: relative;
-    margin: 0;
-    text-shadow:0 1px 1px white;
-    border-right: 1px solid #DDD;
-    border-left: 1px solid #EEE;
 
-    &.home { 
-      background: url(home_icon.PNG) no-repeat center center;
-      text-indent:-9999px;
-      img { 
-        position:relative;
-        top:4px;
-      }
-    }
     &.current { 
       background-color:#D5D5D5;
       border-bottom: 1px solid #567;
@@ -80,11 +67,28 @@ nav.main_menu {
       }
     }
 
-    &.wide { 
-      width:185px;
-      @media (min-width: 1080px) and (max-width: 1200px) { width:160px; }
+    &.home { 
+      a { 
+        background: url(home_icon.PNG) no-repeat center center;
+        text-indent:-9999px;
+        min-width:20px;
+        img { 
+          position:relative;
+          top:4px;
+        }
+      }
     }
   }
+  a { 
+    display: block;
+    text-align: center;
+    font-weight:bold;
+    height:35px;
+    line-height:36px;
+    color: $style_color;
+    text-shadow:0 1px 1px white;
+
+  }
 }
 /*
  *  End of Main Menu

app/assets/stylesheets/themes/ui_modern.scss

@@ -9,19 +9,21 @@
  *
  */
 .ui_modern { 
-  nav.main_menu { 
+  ul.main_menu { 
     background:none;
     box-shadow:none;
     @include border-radius(0px);
     border:none;
     border-bottom:2px solid #456;
 
-    a { 
+    li { 
       border:none;
 
       &.current {
         border-bottom:2px solid #f90;
         background-color:#fff;
+        position:relative;
+        top:1px;
       }
     }
   }

app/helpers/application_helper.rb

@@ -96,4 +96,41 @@ module ApplicationHelper
       event.project && 
       event.project.merge_requests_enabled
   end
+
+  def tab_class(tab_key)
+    active = case tab_key
+             
+             # Project Area
+             when :wall; wall_tab?
+             when :wiki; controller.controller_name == "wikis"
+             when :issues; issues_tab?
+             when :network; current_page?(:controller => "projects", :action => "graph", :id => @project)
+             when :merge_requests; controller.controller_name == "merge_requests"
+
+             # Dashboard Area
+             when :help; controller.controller_name == "help"
+             when :search; current_page?(search_path)
+             when :dash_issues; current_page?(dashboard_issues_path)
+             when :dash_mr; current_page?(dashboard_merge_requests_path)
+             when :root; current_page?(dashboard_path) || current_page?(root_path)
+
+             # Profile Area
+             when :profile;  current_page?(:controller => "profile", :action => :show)
+             when :password; current_page?(:controller => "profile", :action => :password)
+             when :token;    current_page?(:controller => "profile", :action => :token)
+             when :design;   current_page?(:controller => "profile", :action => :design)
+             when :ssh_keys; controller.controller_name == "keys"
+
+             # Admin Area
+             when :admin_root;     controller.controller_name == "dashboard"
+             when :admin_users;    controller.controller_name == 'users'
+             when :admin_projects; controller.controller_name == "projects"
+             when :admin_emails;   controller.controller_name == 'mailer'
+             when :admin_resque;   controller.controller_name == 'resque'
+
+             else
+               false
+             end
+    active ? "current" : nil
+  end
 end

app/views/layouts/_app_menu.html.haml

@@ -1,11 +1,19 @@
-%nav.main_menu
-  = link_to "Home", root_path, :class => "home #{"current" if current_page?(dashboard_path) || current_page?(root_path)}", :title => "Home"
-  = link_to dashboard_issues_path, :class => "#{"current" if current_page?(dashboard_issues_path)}", :id => "issues_slide" do
-    Issues
-    %span.count= current_user.assigned_issues.opened.count
-  = link_to dashboard_merge_requests_path, :class => "#{"current" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide" do
-    Requests
-    %span.count= current_user.cared_merge_requests.count
-  = link_to search_path, :class => "#{"current" if current_page?(search_path)}" do
-    Search
-  = link_to "Help", help_path, :class => "#{"current" if controller.controller_name == "help"}"
+%ul.main_menu
+  %li.home{:class => tab_class(:root)}
+    = link_to "Home", root_path, :title => "Home"
+
+  %li{:class => tab_class(:dash_issues)}
+    = link_to dashboard_issues_path do
+      Issues
+      %span.count= current_user.assigned_issues.opened.count
+
+  %li{:class => tab_class(:dash_mr)}
+    = link_to dashboard_merge_requests_path do
+      Merge Requests
+      %span.count= current_user.cared_merge_requests.count
+
+  %li{:class => tab_class(:search)}
+    = link_to "Search", search_path
+
+  %li{:class => tab_class(:help)}
+    = link_to "Help", help_path

app/views/layouts/_project_menu.html.haml

@@ -1,25 +1,36 @@
-%nav.main_menu
-  = link_to @project.code, project_path(@project), :class => "home #{project_tab_class}", :title => "Project"
+%ul.main_menu
+  %li.home{:class => project_tab_class}
+    = link_to @project.code, project_path(@project), :title => "Project"
+
   - if @project.repo_exists?
     - if can? current_user, :download_code, @project
-      = link_to tree_project_ref_path(@project, @project.root_ref), :class => tree_tab_class do
-        Files
-      = link_to "Commits", project_commits_path(@project), :class => commit_tab_class
+      %li{:class => tree_tab_class}
+        = link_to tree_project_ref_path(@project, @project.root_ref) do
+          Files
+      %li{:class => commit_tab_class}
+        = link_to "Commits", project_commits_path(@project)
+
+      %li{:class => tab_class(:network)}
+        = link_to "Network", graph_project_path(@project)
 
-    = link_to "Network", graph_project_path(@project), :class => current_page?(:controller => "projects", :action => "graph", :id => @project) ? "current" : nil
     - if @project.issues_enabled
-      = link_to  project_issues_filter_path(@project), :class => issues_tab? ? "current" : nil do
-        Issues
-        %span.count= @project.issues.opened.count
+      %li{:class => tab_class(:issues)}
+        = link_to  project_issues_filter_path(@project)  do
+          Issues
+          %span.count= @project.issues.opened.count
+
     - if @project.merge_requests_enabled
-      = link_to project_merge_requests_path(@project), :class => (controller.controller_name == "merge_requests") ? "current wide" : "wide" do
-        Merge Requests
-        %span.count= @project.merge_requests.opened.count
+      %li{:class => tab_class(:merge_requests)}
+        = link_to project_merge_requests_path(@project) do
+          Merge Requests
+          %span.count= @project.merge_requests.opened.count
 
     - if @project.wall_enabled
-      = link_to wall_project_path(@project), :class => wall_tab? ? "current" : nil do
-        Wall
+      %li{:class =>  tab_class(:wall)}
+        = link_to wall_project_path(@project) do
+          Wall
 
     - if @project.wiki_enabled
-      = link_to project_wiki_path(@project, :index), :class => (controller.controller_name == "wikis") ? "current" : nil do
-        Wiki
+      %li{:class =>  tab_class(:wiki)}
+        = link_to project_wiki_path(@project, :index) do
+          Wiki

app/views/layouts/admin.html.haml

@@ -5,11 +5,16 @@
     = render "layouts/flash"
     = render "layouts/head_panel", :title => "Admin area"
     .container
-      %nav.main_menu
-        = link_to "Stats", admin_root_path, :class => "home #{'current' if controller.controller_name == "dashboard"}"
-        = link_to "Projects", admin_projects_path, :class => ('current' if controller.controller_name == "projects")
-        = link_to "Users", admin_users_path, :class => ('current' if controller.controller_name == 'users')
-        = link_to "Emails", admin_emails_path, :class => ('current' if controller.controller_name == 'mailer')
-        = link_to "Resque", admin_resque_path, :class => ('current' if controller.controller_name == 'resque')
+      %ul.main_menu
+        %li.home{:class => tab_class(:admin_root)}
+          = link_to "Stats", admin_root_path
+        %li{:class => tab_class(:admin_projects)}
+          = link_to "Projects", admin_projects_path
+        %li{:class => tab_class(:admin_users)}
+          = link_to "Users", admin_users_path
+        %li{:class => tab_class(:admin_emails)}
+          = link_to "Emails", admin_emails_path
+        %li{:class => tab_class(:admin_resque)}
+          = link_to "Resque", admin_resque_path
 
       .content= yield

app/views/layouts/profile.html.haml

@@ -5,12 +5,23 @@
     = render "layouts/flash"
     = render "layouts/head_panel", :title => "Profile"
     .container
-      %nav.main_menu
-        = link_to "Profile", profile_path, :class => "home #{current_page?(:controller => "profile", :action => :show) ? "current" : nil}"
-        = link_to "Password", profile_password_path,  :class => current_page?(:controller => "profile", :action => :password) ? "current" : nil
-        = link_to "Token", profile_token_path,  :class => current_page?(:controller => "profile", :action => :token) ? "current" : nil
-        = link_to "Design", profile_design_path, :class => current_page?(:controller => "profile", :action => :design) ? "current" : nil
-        = link_to keys_path,  :class => controller.controller_name == "keys" ? "current" : nil do
-          SSH Keys
+      %ul.main_menu
+        %li.home{:class => tab_class(:profile)}
+          = link_to "Profile", profile_path
+
+        %li{:class => tab_class(:password)}
+          = link_to "Password", profile_password_path
+
+        %li{:class => tab_class(:token)}
+          = link_to "Token", profile_token_path
+
+        %li{:class => tab_class(:design)}
+          = link_to "Design", profile_design_path
+
+        %li{:class => tab_class(:ssh_keys)}
+          = link_to keys_path do
+            SSH Keys
+            %span.count= current_user.keys.count
+
       .content
         = yield