Rails 4 / Bootstrap 3: how to display a different navbar on different pages?
Here's _header.html.erb
our Rails 4 application made with Bootstrap 3 components:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<nav>
<div class="col-xs-4">
<%= link_to "APP NAME", root_path, id: "logo" %>
</div>
<div class="col-xs-4 text-center">
<ul class="nav navbar-nav navbar-center">
<li><%= link_to "Features", features_path %></li>
<li><%= link_to "Pricing", pricing_path %></li>
<li><%= link_to "Blog", '#' %></li>
</ul>
</div>
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-right">
<% if current_user.try(:admin?) %>
<li><%= link_to "Users", users_path %></li>
<% end %>
<% if logged_in? %>
<li><%= link_to "Dashboard", current_user %></li>
<li><%= link_to "Settings", current_user %></li>
<li><%= link_to "Log out", logout_path, method: "delete" %></li>
<% else %>
<li><%= link_to "Log in", login_path %></li>
<li><%= link_to "Sign up", signup_path %></li>
<% end %>
</ul>
</div>
</nav>
</div>
</header>
As you can see, this conditionally displays the navigation bar depending on whether the current user is logged out, logged in, or logged in as an administrator.
However, we are wondering how we could display a different navbar on different pages.
For example, on all public pages (houses, features, prices, blog, help, etc.) we would like to display links Features
, Pricing
and Blog
(whether the user is logged in or not), but on the internal pages of the application (panel tools, settings, etc.) we would like to remove these links.
EDIT: To make things clearer, what we call public pages are actually ours static_pages
, which rely on ours StaticPages#Controller
, whereas internal app pages like the dashboard and settings are dependent on ours Users#Controller
.
How can we achieve this? Do I need to create a new _header.html.erb
partial?
Is there a Rails way to do this?
source to share
You can put each navbar variation in a partial part and use it content_for
.
In your app layout, you can have logic that checks if a specific navbar should be displayed, for example:
<% if content_for?(:navbar) %>
<%= yield(:navbar) %>
<% else %>
# code for default navbar
<% end %>
And inside your views where you want the various navbars
<% content_for :navbar do %>
<%= render 'nav_bar_variation_one' %>
<% end %>
and
<% content_for :navbar do %>
<%= render 'nav_bar_variation_two' %>
<% end %>
source to share
In my case, I need a different font color for my navbar. So it was too difficult to create another navigator.
Here's my solution:
i created a new method that will return "black-navbar" if i enter my order_controller or "white-navbar" otherwise.
#my code into application_helper.rb
def navbar_attr
if %w(orders).include?(params[:controller])
return 'black-navbar'
else
return 'white-navbar'
end
end
then I will call this method in the html of my navbar
# in my case my file is _navbar.html.erb
<p class="<%= navbar_attr %>">Hello</p>
If my navbar is called through my order_controller it will add the "black-navbar" class, otherwise it will add "white-navbar".
source to share