fix: opening lightbox or search modal causes navbar to move

Edge case caused by page having scrollbar and initial state of lightbox
or search modal not having a scrollbar.

Fix #1177

See https://github.com/fancyapps/fancybox/issues/360
See http://fancyapps.com/fancybox/3/docs/#faq

assets/js/academic.js

@@ -303,10 +303,27 @@
 
   function toggleSearchDialog() {
     if ($('body').hasClass('searching')) {
+      // Clear search query and hide search modal.
       $('[id=search-query]').blur();
-      $('body').removeClass('searching');
+      $('body').removeClass('searching compensate-for-scrollbar');
+
+      // Remove search query params from URL as user has finished searching.
       removeQueryParamsFromUrl();
+
+      // Prevent fixed positioned elements (e.g. navbar) moving due to scrollbars.
+      $('#fancybox-style-noscroll').remove();
     } else {
+      // Prevent fixed positioned elements (e.g. navbar) moving due to scrollbars.
+      if ( !$('#fancybox-style-noscroll').length && document.body.scrollHeight > window.innerHeight ) {
+        $('head').append(
+          '<style id="fancybox-style-noscroll">.compensate-for-scrollbar{margin-right:' +
+          (window.innerWidth - document.documentElement.clientWidth) +
+          'px;}</style>'
+        );
+        $('body').addClass('compensate-for-scrollbar');
+      }
+
+      // Show search modal.
       $('body').addClass('searching');
       $('.search-results').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 200);
       $('#search-query').focus();

layouts/partials/navbar.html

@@ -1,5 +1,5 @@
 {{ $current_page := . }}
-<nav class="navbar navbar-light fixed-top navbar-expand-lg py-0" id="navbar-main">
+<nav class="navbar navbar-light fixed-top navbar-expand-lg py-0 compensate-for-scrollbar" id="navbar-main">
   <div class="container">
 
     <!-- Brand and toggle get grouped for better mobile display -->