Use js to toggle bootstrap hamburger menu to avoid line wrapping the …

[ConnorStroomberg]

…menu items.

Static css width breakpoints as implemented in bootstrap-4 ( or 3) can not handle a dynamic number of menu items, number of items characters or run time applied style sheets.

As a way to avoid the the menu items being wrapped across multiple lines the navbar component sets up a event listener to trigger a function on window resize ( and startup).

If the menu height is larger then the expected menu height the bootstrap hamburger is shown by removing the bootstrap 'navbar-expand-*' class. The dynamically found breakpoint is then stored and used as threshold to remove the hamburger menu if the screen size increases beyond the calculated threshold.

• Calc menu height a startup ( use to watch for line wrapping).
• Custom ( to reduce bundle size) debounce function to avoid swapping the processor during resize.
• Toggle hamburger menu dynamicly based on line-wrapping and storing dynamic breakpoint.

Checklist

• [ ] Functionality works & meets specifications
• [ ] Code reviewed
• [ ] Code unit/integration/system tested
• [ ] User documentation updated
• [ ] Clean commits
• [ ] No warnings during install
• [ ] Updated flow typing
• [ ] Added Feature/Fix to release notes

[codecov[bot]]

Codecov Report

Merging #24 into master will increase coverage by 13.8%. The diff coverage is 89.5%.

@@            Coverage Diff            @@
##           master     #24      +/-   ##
=========================================
+ Coverage      70%   83.8%   +13.8%     
=========================================
  Files           4       7       +3     
  Lines          30      68      +38     
  Branches        7      11       +4     
=========================================
+ Hits           21      57      +36     
- Misses          9      11       +2

Flag	Coverage Δ
#unit	83.8% <89.5%> (+13.8%)	:arrow_up:

Impacted Files	Coverage Δ
src/exampleMenu.ts	100% <ø> (ø)	:arrow_up:
src/service/LanguageService.ts	100% <100%> (ø)
src/service/EventUtilService.ts	84.6% <84.6%> (ø)
src/repository/LanguageRepository.ts	85.7% <85.7%> (ø)
src/components/NavBar.vue	79.4% <92%> (+16.9%)	:arrow_up:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 2ae08d8...64f4acc. Read the comment docs.

[molgenis-jenkins]

Maybe add this to the changelog as well?

[molgenis-jenkins]

:tada: This PR is included in version 1.1.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: