mirrors/retrospring
1
0
Fork 0
mirror of https://github.com/Retrospring/retrospring.git synced 2025-01-31 09:59:07 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix dropdowns in mobile navigation

Browse source
This commit is contained in:
Andreas Nedbal 2023-01-04 22:57:45 +01:00 • committed by Andreas Nedbal
parent b7c7838b96
commit 61a9e39a3e
2 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/javascript/retrospring/initializers/bootstrap.ts
View file

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

4
app/views/navigation/_mobile.html.haml
View file

@ -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"