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"