From 61a9e39a3ee94c8b525c46239f979990bd642faa Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <git@pixelde.su>
Date: Wed, 4 Jan 2023 22:57:45 +0100
Subject: [PATCH] Fix dropdowns in mobile navigation

---
 .../retrospring/initializers/bootstrap.ts     | 24 +++++++++++++++++++
 app/views/navigation/_mobile.html.haml        |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/app/javascript/retrospring/initializers/bootstrap.ts b/app/javascript/retrospring/initializers/bootstrap.ts
index 4a760128..277f8c15 100644
--- a/app/javascript/retrospring/initializers/bootstrap.ts
+++ b/app/javascript/retrospring/initializers/bootstrap.ts
@@ -13,5 +13,29 @@ export default function (): void {
 
     const dropdownElementList = document.querySelectorAll('.dropdown-toggle');
     [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl));
+
+    // HACK/BUG?: Bootstrap disables dropdowns in navbars, here we re-enable and "kinda" fix it
+    // By the time Bootstrap 6 releases this probably won't be needed anymore
+    const navigationElementList = document.querySelectorAll('#rs-mobile-nav .nav-link[data-bs-toggle="dropdown"]');
+    [...navigationElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl, {
+      popperConfig(defaultPopperConfig) {
+        return {
+          ...defaultPopperConfig,
+          strategy: 'fixed',
+          modifiers: [
+            {
+              name: 'applyStyles',
+              enabled: true
+            },
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: document.querySelector('body')
+              }
+            },
+          ]
+        }
+      }
+    }));
   });
 }
diff --git a/app/views/navigation/_mobile.html.haml b/app/views/navigation/_mobile.html.haml
index 2582a43a..13d749ea 100644
--- a/app/views/navigation/_mobile.html.haml
+++ b/app/views/navigation/_mobile.html.haml
@@ -1,5 +1,3 @@
-= render 'navigation/dropdown/profile', size: "mobile"
-= render 'navigation/dropdown/notifications', notifications: notifications, size: "mobile"
 - notifications_icon = notification_count.nil? ? 'bell-o' : 'bell'
 %nav.navbar.navbar-themed.bg-primary.fixed-bottom.d-lg-none.d-block.d-print-none#rs-mobile-nav{ role: :navigation }
   .container
@@ -15,6 +13,8 @@
           %i.fa{ class: "fa-#{notifications_icon}" }
           %span.visually-hidden= t("navigation.notifications")
           %span.badge.badge-pill.badge-primary= notification_count
+        = render 'navigation/dropdown/notifications', notifications: notifications, size: "mobile"
       %li.nav-item.profile--image-dropdown
         %a.nav-link{ href: '#', data: { bs_toggle: 'dropdown', bs_target: '#rs-mobile-nav-profile' }, aria: { controls: 'rs-mobile-nav-profile', expanded: 'false' } }
           %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) }
+        = render 'navigation/dropdown/profile', size: "mobile"