From 02d2e4781efa7b795dbd4f207e858f79228085a6 Mon Sep 17 00:00:00 2001
From: Annie Walsh <annie@anyonething.co.uk>
Date: Thu, 3 Aug 2023 17:49:48 +0100
Subject: [PATCH 1/5] Adds mobile hamburg style menu

---
 app/views/shared/_navbar.html.erb | 59 +++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
index 8d2b068b..eb211620 100644
--- a/app/views/shared/_navbar.html.erb
+++ b/app/views/shared/_navbar.html.erb
@@ -1,4 +1,5 @@
-<nav class="navbar">
+<nav class="navbar relative md:flex">
+  <div class="flex justify-between w-full">
   <ul>
     <li>
       <%= link_to root_path, class: "text-white flex gap-4 items-center" do %>
@@ -6,19 +7,47 @@
       <% end %>
     </li>
   </ul>
-  <ul class="hidden md:flex">
-    <%= render "shared/navbar/link", link_title: "Talks", path: talks_path %>
-    <%= render "shared/navbar/link", link_title: "Speakers", path: speakers_path %>
-    <% if Current.user&.admin? %>
-      <%= render "shared/navbar/link", link_title: "Events", path: events_path %>
-
-      <%= render "shared/navbar/link", link_title: "Suggestions", path: admin_suggestions_path %>
-    <% end %>
-    <li>
-      <%= link_to "https://github.com/adrienpoly/rubyvideo", target: "_blank", alt: "github repository for the Ruby video project" do %>
-        <%= icon "github", size: :lg %>
+   <!-- Mobile menu button -->
+   <menu id="hamburger" class="md:hidden flex items-center px-3 py-2">
+        <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
+          <span class="absolute -inset-0.5"></span>
+          <span class="sr-only">Open main menu</span>
+          <svg id="menu-open-icon" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+          </svg>
+          <svg id="menu-close-icon" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </menu>
+    <ul class="hidden md:flex" id="main-menu">
+      <%= render "shared/navbar/link", link_title: "Talks", path: talks_path %>
+      <%= render "shared/navbar/link", link_title: "Speakers", path: speakers_path %>
+      <% if Current.user&.admin? %>
+        <%= render "shared/navbar/link", link_title: "Events", path: events_path %>
+        <%= render "shared/navbar/link", link_title: "Suggestions", path: admin_suggestions_path %>
       <% end %>
-    </li>
-    <li><a href="https://github.com/adrienpoly/rubyvideo/blob/main/docs/contributing.md" role="button" target="_blank">Contribute</a></li>
-  </ul>
+      <li>
+        <%= link_to "https://github.com/adrienpoly/rubyvideo", target: "_blank", alt: "github repository for the Ruby video project" do %>
+          <%= icon "github", size: :lg %>
+        <% end %>
+      </li>
+      <li><a href="https://github.com/adrienpoly/rubyvideo/blob/main/docs/contributing.md" role="button" target="_blank">Contribute</a></li>
+    </ul>
+    <ul class="hidden md:hidden absolute top-full left-0 z-20 bg-brand bg-opacity-50  p-4 rounded shadow-md md:hidden w-full" id="mobile-menu">
+      <%= render "shared/navbar/link", link_title: "Talks", path: talks_path %> <br>
+      <%= render "shared/navbar/link", link_title: "Speakers", path: speakers_path %> <br>
+      <% if Current.user&.admin? %>
+        <%= render "shared/navbar/link", link_title: "Events", path: events_path %>
+        <%= render "shared/navbar/link", link_title: "Suggestions", path: admin_suggestions_path %>
+      <% end %>
+      <li class="block">
+        <%= link_to "https://github.com/adrienpoly/rubyvideo", target: "_blank", alt: "github repository for the Ruby video project" do %>
+          <%= icon "github", size: :lg %>
+        <% end %>
+        <br>
+      </li>
+      <li class="block"><a href="https://github.com/adrienpoly/rubyvideo/blob/main/docs/contributing.md" role="button" target="_blank">Contribute</a></li>
+    </ul>
+  </div>
 </nav>

From 38520387ae1edf644a08a33bd8d7a1f10d4eee16 Mon Sep 17 00:00:00 2001
From: Annie Walsh <annie@anyonething.co.uk>
Date: Thu, 3 Aug 2023 17:55:26 +0100
Subject: [PATCH 2/5] Adds navbar js controller to toggle menu open and close

---
 .../controllers/navbar_controller.js          | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 app/javascript/controllers/navbar_controller.js

diff --git a/app/javascript/controllers/navbar_controller.js b/app/javascript/controllers/navbar_controller.js
new file mode 100644
index 00000000..18c07d65
--- /dev/null
+++ b/app/javascript/controllers/navbar_controller.js
@@ -0,0 +1,26 @@
+document.addEventListener('turbo:load', function () {
+  const hamburger = document.getElementById('hamburger')
+  if (hamburger) {
+    hamburger.addEventListener('click', function () {
+      const mobileMenu = document.getElementById('mobile-menu')
+      const content = document.getElementById('main')
+      const openIcon = document.getElementById('menu-open-icon')
+      const closeIcon = document.getElementById('menu-close-icon')
+
+      if (
+        mobileMenu.style.display === 'none' ||
+        mobileMenu.style.display === ''
+      ) {
+        mobileMenu.style.display = 'block'
+        content.style.marginTop = '200px' // adjust the value as needed
+        openIcon.style.display = 'none'
+        closeIcon.style.display = 'block'
+      } else {
+        mobileMenu.style.display = 'none'
+        content.style.marginTop = '0'
+        openIcon.style.display = 'block'
+        closeIcon.style.display = 'none'
+      }
+    })
+  }
+})

From 4bee221263b21a3823846c265ac843fd44d25a56 Mon Sep 17 00:00:00 2001
From: Annie Walsh <annie@anyonething.co.uk>
Date: Thu, 3 Aug 2023 17:56:32 +0100
Subject: [PATCH 3/5] Adds id of main to application layout for drop-down menu
 formatting

---
 app/views/layouts/application.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 7c8aadb6..36346682 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -16,7 +16,7 @@
     <%= render "shared/top_banner" %>
     <%= render "shared/navbar" %>
     <%= render "shared/flashes" %>
-    <div class="min-h-screen">
+    <div class="min-h-screen" id="main">
       <%= yield %>
     </div>
   </body>

From 6a6d319f4d666e69b827cae5eda40ba896150ec0 Mon Sep 17 00:00:00 2001
From: Annie Walsh <annie@anyonething.co.uk>
Date: Thu, 3 Aug 2023 18:29:28 +0100
Subject: [PATCH 4/5] Updates webdrivers to pass failing linters test

---
 Gemfile      |  2 +-
 Gemfile.lock | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/Gemfile b/Gemfile
index 33ad7b2b..e65c0e7a 100644
--- a/Gemfile
+++ b/Gemfile
@@ -74,7 +74,7 @@ group :test do
   # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
   gem "capybara"
   gem "selenium-webdriver"
-  gem "webdrivers"
+  gem 'webdrivers', '~> 5.3'
   gem "vcr", "~> 6.1"
   gem "webmock"
 end
diff --git a/Gemfile.lock b/Gemfile.lock
index 6f8b3bc2..370a9e0a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -216,6 +216,8 @@ GEM
       racc (~> 1.4)
     nokogiri (1.15.3-arm64-darwin)
       racc (~> 1.4)
+    nokogiri (1.15.3-x86_64-darwin)
+      racc (~> 1.4)
     nokogiri (1.15.3-x86_64-linux)
       racc (~> 1.4)
     oj (3.15.0)
@@ -293,6 +295,7 @@ GEM
     sorbet-runtime (0.5.10888)
     sqlite3 (1.6.3-aarch64-linux)
     sqlite3 (1.6.3-arm64-darwin)
+    sqlite3 (1.6.3-x86_64-darwin)
     sqlite3 (1.6.3-x86_64-linux)
     standard (1.29.0)
       language_server-protocol (~> 3.17.0.2)
@@ -332,10 +335,10 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webdrivers (5.2.0)
+    webdrivers (5.3.1)
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
-      selenium-webdriver (~> 4.0)
+      selenium-webdriver (~> 4.0, < 4.11)
     webmock (3.18.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
@@ -352,6 +355,7 @@ GEM
 PLATFORMS
   aarch64-linux
   arm64-darwin-22
+  x86_64-darwin-22
   x86_64-linux
 
 DEPENDENCIES
@@ -389,7 +393,7 @@ DEPENDENCIES
   vcr (~> 6.1)
   vite_rails (~> 3.0)
   web-console
-  webdrivers
+  webdrivers (~> 5.3)
   webmock
 
 RUBY VERSION

From 36ca1da545368c2a1a5522af523ef5e6ba769c5c Mon Sep 17 00:00:00 2001
From: Annie Walsh <annie@anyonething.co.uk>
Date: Thu, 3 Aug 2023 18:32:21 +0100
Subject: [PATCH 5/5] Runs standardrb --fix to style gem file correctly

---
 Gemfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile b/Gemfile
index e65c0e7a..7b0b427e 100644
--- a/Gemfile
+++ b/Gemfile
@@ -74,7 +74,7 @@ group :test do
   # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
   gem "capybara"
   gem "selenium-webdriver"
-  gem 'webdrivers', '~> 5.3'
+  gem "webdrivers", "~> 5.3"
   gem "vcr", "~> 6.1"
   gem "webmock"
 end