navigating to a new page shows brief expansion of nav menu

[elstoc]

When clicking on a link to a new page, the left-hand navigation pane looks like it briefly expands before contracting again. This is distracting and looks like a glitch.

I can mitigate the issue to some extent by changing hugo-darktable-docs-theme/layouts/_default/baseof.html to make the opacity of the nav tag 0:

<nav class="navigation col-sm-12 order-sm-12 col-md-3 order-md-1" style="opacity: 0">

and then changing hugo-darktable-docs-theme/layouts/partials/javascript.html to put the opacity back to 1 once all the correct elements have been shown/hidden.

 $(document).ready(function(){
     $('.toggle').on('click', function (e) {
     e.stopPropagation();
     $(this).siblings('ul').slideToggle();

     if($(this).hasClass("fa-plus-square")) {
         $(this).addClass("fa-minus-square-o");
         $(this).removeClass("fa-plus-square");
     }
     else {
         $(this).addClass("fa-plus-square");
         $(this).removeClass("fa-minus-square-o");
     }
     });

     $('.parent ul').hide();
     $('.active').parents('ul').show();
     $('.active').siblings('ul').show();
     $('.navigation').css('opacity', '1.0');
     $('.active').children('i.toggle').removeClass("fa-plus-squre").addClass("fa-minus-square-o");
     $('.active').parents('li').children('.toggle').removeClass("fa-plus-square").addClass("fa-minus-square-o");
 });

The navigation pane still flickers briefly but it just looks like a page reload (which it is) rather than a UI issue.

[elstoc]

I have a better solution now...

Remove $('.parent ul').hide(); entirely from javascript.html above and all the opacity setting stuff.

Change nav.html as follows, to add style="display:none"

<ul style="display:none">

Hardly flickers at all.

Edit: maybe possibly better in combination with the opacity change above but not a great deal in it.

[paperdigits]

The problem with using CSS for the initial hiding of the menu, then javascript to unhide it, is that those with javascript disabled will never see the stuff hidden with CSS.

And you know we have those people ;)

[paperdigits]

According to the internet, putting this in the of the document should work, it doesn't change anything for me:

<!-- Prevent the side nav from flashing from the javascript -->
<script>
$('html').addClass('hidden');
$(document).ready(function() {   
  $('html').show(); 
}); 
</script>

[elstoc]

This needs some change to the structure if you want to handle it using pure js. The problem is that you load all of your js dependencies (jquery, bootstrap etc.) at the bottom of the page, whereas what you need to do is load it at the top and put the functionality at the bottom. I'll submit a PR to the theme.

[elstoc]

I've submitted a PR https://github.com/pixlsus/hugo-darktable-docs-theme/pull/1