Changing tabs

Introduction

Need to change the tabs on the top of the page in RuckSack? Well you have come to the right place!

The details

Tabs in RuckSack are rendered in the “app/views/layouts/_tabs.html.haml” partial. If you look at that file, you may notice two important variables:

• @tabbed_navigation_items
• @user_navigation_items

These contain the tabs on the left and right, respectively. If you look at the action views, you’ll notice that these are almost always assigned like this:

  - @tabbed_navigation_items = common_tabs(:pages)
  - @user_navigation_items = user_tabs(nil)

Basically “common_tabs” and “user_tabs” are both helpers located in “app/helpers/application_helper.rb”. The variable being passed in controls which tab is marked as active, in this case the “pages” tab for the left tabs, and nothing for the right tabs.

Looking further, here is the code for those two helpers:

	def common_tabs(current)
	  items = [{:id => :overview, :url => '/dashboard'},
	           {:id => :pages, :url => '/pages/current'},
	           {:id => :reminders, :url => '/reminders'},
	           {:id => :journal, :url => '/journals'}]
	  
	  @selected_navigation_item = current
	  return items
	end
	
	def user_tabs(current)
	  items = [{:id => :users, :url => '/users'}]
	  
	  @selected_user_item = current
	  return items
	end

So essentially, an item in the tab is represented as a hash. e.g.:

{:id => :journal, :url => '/journals'}

Which makes a “Journal” tab linking to “/journals”. So all you need to do is add your own hash to the items list in either common_tabs or user_tabs. e.g.:

{:id => :cake, :url => '/cake'}

But wait! There is one more thing to do. You need to add a localization for your tab in lang/ui/en-US.yml. e.g.:

cake: Cake

And hey presto! You have a new tab. Now all you need to do is implement “/cake”…