Making Nice Menus Responsive In Drupal 8

PROBLEM
I highly recommend Nice Menus for Drupal. I’ve been using it for years and it makes things pretty simple. It’s easy to style over to what you need plus it’s keyboard accessible (which is the huge one)!

Anyway, as far as mobile-friendly/responsive goes, Nice Menus is not. It lacks in that department.

So how do we style it? How do we make it a hamburger menu?

SOLUTION
Turn off nice menus! It kinda sucks, but you need to do it in order to put things into your menu template and create mobile-friendly design.

First, to turn off nice menus, put something like this in a JS file (which DOES use JQuery so be careful; that’s another post for another day):

// we only need to do stuff if it's on mobile
if ($(window).width() < 770) {
	// let's remove the nice menus on resolutions that are 768 and lower
	$("ul.office_main_top_level").removeClass("nice-menu");
	$("ul.office_main_top_level").removeClass("nice-menu-acf-main-navigation");
	$("ul.office_main_top_level").removeClass("nice-menu-down");
	$("ul.office_main_top_level").removeClass("sf-js-enabled");
	$("ul.office_main_top_level").removeClass("sf-arrows");
	$("ul.office_main_top_level").removeClass("nice-menus-processed");
}

Removing those classes will turn off the JavaScript that’s happening with Nice Menus for keyboard accessibility, styles, etc.

Now add something like this to your template at the top (but outside the first ul):

<a href="javascript: void(0);" id="office_main_nav_hamburger"><i class="fa fa-bars"></i><span class="hide">Expand</span></a>

(I’m using Font Awesome for icons.)

Add this after the links in the lis (only if they have children):

<a href="javascript: void(0);" class="expand_link"><i class="fa fa-angle-down"></i><span class="hide">Expand</span></a>

Add some more stuff to your JS file (I did it inside the if window statement above):

$("#office_main_nav_hamburger", context).click(function() {
	$("ul.office_main_top_level").toggle();
	$("#office_main_nav_hamburger i").toggleClass("fa-times fa-bars");
});

$(".expand_link", context).click(function() {
	$(this).closest("li").children("ul.office_main_sub_level").toggleClass("expand_sub_level_mobile");
	$(this).children("i").toggleClass("fa-angle-down fa-angle-up");
});

I won’t walk you through all the CSS but at least now you may have a understanding of how to make Nice Menu’s responsive.

Empty Region Displaying In Drupal 8

PROBLEM
This is a strange one but one that’s been talked about many, many times in Drupal 8. In Drupal 8, if you check to see if a region is empty, it isn’t empty. You need to do a few things to adequately determine if a region is truly empty.

See these:

https://www.drupal.org/node/953034
https://www.drupal.org/forum/support/module-development-and-code-questions/2016-04-07/drupal-8-regions-with-and-empty
https://drupal.stackexchange.com/questions/175389/how-do-i-properly-detect-if-region-is-empty

So, I would like to determine if a block is empty before I display it so I can put a Bootstrap wrapper around it. However, just using:

{% if page.left_sidebar %}
	<div class="left_sidebar">{{ page.left_sidebar }}</div>
{% endif %}

won’t work. To give some background, the region on most pages has a secondary menu (a left navigation). However, on pages where this doesn’t display, it would display an empty region even though there was no menu there.

SOLUTION
At first I did:

{% if page.left_sidebar|render|striptags|trim %}
	<div class="left_sidebar">{{ page.left_sidebar }}</div>
{% endif %}

and this seemed to work! However, today, when I got to putting a webform in a region, it didn’t work. Striptags for some reason took out everything. Come to find out Webforms use some sort of “lazyBuilding” or something I don’t give a shit about. #stupidShit

Anyway, now my code above doesn’t work. But buried deep in one of those links above is this gem:

{% if page.left_sidebar|render|striptags("<drupal-render-placeholder>")|trim %}
	<div class="left_sidebar">{{ page.left_sidebar }}</div>
{% endif %}

This seems to work for the moment. If this turns out to not work later (which it might not for other needs… or in like 10 minutes when I find another issue), I will re-evaluate.