Introducing Main Dropdown navigation for mobile

src/scripts/tutti/0_navbar.js

@@ -110,3 +110,74 @@ function loadingBarShow(){
 function loadingBarHide(){
 	$('.loading-bar').removeClass('active');
 }
+
+
+$(document).ready(function() {
+
+	/* Mobile check. */
+	var isMobileScreen = window.matchMedia("only screen and (max-width: 760px)");
+
+	function isMobile(){
+		return isMobileScreen.matches;
+	}
+
+	// Every element that is a tab.
+	$dropdownTabs = $('[data-dropdown-tab]');
+	// Every menu element that toggles a tab.
+	$dropdownTabsToggle = $('[data-toggle="dropdown-tab"]');
+
+	function dropdownTabHideAll(){
+		$dropdownTabs.removeClass('show');
+	}
+
+	function dropdownTabShow(tab){
+		dropdownTabHideAll(); // First hide them all.
+		$('[data-dropdown-tab="' + tab + '"]').addClass('show'); // Show the one we want.
+	}
+
+	// Mobile adjustments
+	if (isMobile()) {
+		// Add a class to the body for site-wide styling.
+		document.body.className += ' ' + 'is-mobile';
+
+		// Main dropdown menu stuff.
+		// Click on a first level link.
+		$dropdownTabsToggle.on('click', function(e){
+			e.preventDefault(); // Don't go to the link (we'll show a menu instead)
+			e.stopPropagation(); // Don't hide the menu (it'd trigger 'hide.bs.dropdown' event from bootstrap)
+
+			let tab = $(this).data('tab-target');
+
+			// Then display the corresponding sub-menu.
+			dropdownTabShow(tab);
+		});
+
+	} else {
+		// If we're not on mobile, then we use hover on the menu items to trigger.
+		$dropdownTabsToggle.hover(function(){
+			let tab = $(this).data('tab-target');
+
+			// On mouse hover the tab names, style it the 'active' class.
+			$dropdownTabsToggle.removeClass('active'); // First make them all inactive.
+			$(this).addClass('active'); // Make active the one we want.
+
+			// Then display the corresponding sub-menu.
+			dropdownTabShow(tab);
+		});
+	}
+
+	// When toggling the main dropdown, also hide the tabs.
+	// Otherwise they'll be already open the next time we toggle the main dropdown.
+	$('.dropdown').on('hidden.bs.dropdown', function (e) {
+		dropdownTabHideAll();
+	});
+
+	// Make it so clicking anywhere in the empty space in first level dropdown
+	// also hides the tabs, that way we can 'go back' to browse the first level back and forth.
+	$('.nav-main ul.nav:first').on('click', function (e) {
+		if ($(this).parent().hasClass('show')){
+			e.stopPropagation();
+		}
+		dropdownTabHideAll();
+	});
+});

src/styles/components/_dropdown.sass

@@ -19,14 +19,15 @@ ul.dropdown-menu
 		border-bottom-left-radius: $border-radius
 		border-bottom-right-radius: $border-radius
 
-// Open dropdown on mouse hover dropdowns in the navbar.
+// When not in mobile, open menus on mouse hover .dropdown in the navbar.
-nav .dropdown:hover
+body:not(.is-mobile)
-	ul.dropdown-menu
+	nav .dropdown:hover
-		display: block
+		ul.dropdown-menu
+			display: block
 
-nav .dropdown.large:hover
+	nav .dropdown.large:hover
-	.dropdown-menu
+		.dropdown-menu
-		@extend .d-flex
+			@extend .d-flex
 
 .dropdown.large.show
 	@extend .d-flex

src/styles/components/_navbar.sass

@@ -215,6 +215,39 @@ $nav-secondary-bar-size: -2px
 				i, span
 					+active-gradient
 
+body.is-mobile
+	.nav-main, .dropdown-menu-tab
+		@extend .position-fixed
+		@extend .w-100
+		bottom: 0
+		font-size: 1.05rem
+		left: 0
+		overflow-y: auto
+		right: 0
+		top: 40px
+		width: 100%
+		z-index: 9999
+		transition: all 150ms ease-in-out
+
+		.nav
+			@extend .w-100
+
+		.nav-link
+			@extend .py-3
+
+			i
+				@extend .pl-2
+				@extend .pr-5
+
+	.dropdown-menu-tab
+		@extend .bg-white
+		@extend .w-100
+
+		&.show
+			box-shadow: 0 0 25px rgba(black, .3)
+			left: 75px
+
+
 .navbar-overlay
 	+media-lg
 		display: block