songtianlun
cd4239ce17
- Add a toggle button for collapsing the navbar - Change the structure of the navbar to ensure it is responsive This enhancement allows the navigation bar to be more user-friendly on mobile devices, enabling easy access to navigation links while saving screen space. The toggle button helps in collapsing or expanding the menu as needed.
42 lines
1.5 KiB
Plaintext
42 lines
1.5 KiB
Plaintext
<header class="navbar navbar-fixed-top navbar-inverse">
|
|
<div class="container">
|
|
<%= link_to "sample app", root_url, id: "logo" %>
|
|
<nav>
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed"
|
|
data-toggle="collapse"
|
|
data-target="#bs-example-navbar-collapse-1"
|
|
aria-expanded="false">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar>"></span>
|
|
<span class="icon-bar>"></span>
|
|
</button>
|
|
</div>
|
|
<ul class="nav navbar-nav navbar-right collapse navbar-collapse"
|
|
id="bs-example-navbar-collapse-1">
|
|
<li><%= link_to "Home", root_url %></li>
|
|
<li><%= link_to "Help", help_url %></li>
|
|
<% if logged_in? %>
|
|
<li><%= link_to "Users", '#' %></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
Account <b class="caret"></b>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><%= link_to "Profile", current_user %></li>
|
|
<li><%= link_to "Settings", '#' %></li>
|
|
<li class="divider"></li>
|
|
<li>
|
|
<%= link_to "Log out", logout_path, method: :delete %>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<% else %>
|
|
<li><%= link_to "Login in", login_url %></li>
|
|
<% end %>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
</header> |