From cd4239ce17e699cc3bfcdd9188baa7acd82e4c08 Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Thu, 2 Jan 2025 09:11:42 +0800
Subject: [PATCH] feat: improve responsive header navigation

- 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.
---
 app/views/layouts/_header.html.erb | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index aa77b92..335d2b9 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -2,7 +2,19 @@
   <div class="container">
     <%= link_to "sample app", root_url, id: "logo" %>
     <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 "Help", help_url %></li>
         <% if logged_in? %>