Fix dropdowns in mobile navigation

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')
+              }
+            },
+          ]
+        }
+      }
+    }));
   });
 }

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"