songtianlun/sample_rails_tailwind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve responsive header navigation

Browse Source 
- 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.
This commit is contained in:
songtianlun 2025-01-02 09:11:42 +08:00
parent 8baa51f611
commit cd4239ce17
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/views/layouts/_header.html.erb
View File

@ -2,7 +2,19 @@
<div class="container"> <div class="container">
<%= link_to "sample app", root_url, id: "logo" %> <%= link_to "sample app", root_url, id: "logo" %>
<nav> <nav>
<ul class="nav navbar-nav navbar-right"> <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 "Home", root_url %></li>
<li><%= link_to "Help", help_url %></li> <li><%= link_to "Help", help_url %></li>
<% if logged_in? %> <% if logged_in? %>