Merge pull request #3616 from codeeu/fix/mobile-menu-parent-links

Fix mobile menu parent link navigation

Author: bernardhanna

public/js/ext/functions.js

@@ -1,5 +1,24 @@
 var $ = jQuery.noConflict();
 
+function codeweekMobileMenuLinkClick(e) {
+    var $link = $(this);
+    var $submenu = $link.parent().children('ul');
+
+    if (!$submenu.length) {
+        return;
+    }
+
+    var href = $link.attr('href') || '';
+    var isVoidHref = !href || href === '#' || href.indexOf('javascript:') === 0;
+    var clickedArrow = $(e.target).closest('.arrow-icon').length > 0;
+
+    if (clickedArrow || isVoidHref) {
+        e.preventDefault();
+        $submenu.toggleClass('show');
+        return false;
+    }
+}
+
 $.fn.inlineStyle = function (prop) {
     return this.prop("style")[$.camelCase(prop)];
 };
@@ -879,9 +898,7 @@ var SEMICOLON = SEMICOLON || {};
             if ( $().superfish ) {
                 var menuSelector = '#primary-menu > ul';
                 $(menuSelector).superfish('destroy');
-                $('#primary-menu ul li a').click(function() {
-                    $(this.parentNode).children('ul').toggleClass('show')
-                });
+                $('#primary-menu ul li a').click(codeweekMobileMenuLinkClick);
             }
         },
 
@@ -2427,9 +2444,7 @@ var SEMICOLON = SEMICOLON || {};
             });
             if( SEMICOLON.isMobile.any() || !$body.hasClass('device-lg')){
                 $body.addClass('device-touch');
-                $('#primary-menu ul li a').click(function() {
-                    $(this.parentNode).children('ul').toggleClass('show')
-                })
+                $('#primary-menu ul li a').click(codeweekMobileMenuLinkClick);
             }
 
             /*DROPDOWN MENUS*/

resources/views/layout/menu.blade.php

@@ -90,19 +90,22 @@ class="cookweek-link hover-underline !text-[#1C4DA1] !text-[16px]"
               {{-- resources --}}
               <li class="main-menu-item">
                   <a
-                      class="cookweek-link hover-underline !text-[#1C4DA1] !text-[16px] cursor-pointer"
-                      onclick="document.body.clientWidth > 1280 && (window.location.href='{{ route('educational-resources') }}')"
+                      class="cookweek-link hover-underline !text-[#1C4DA1] !text-[16px]"
+                      href="{{ route('educational-resources') }}"
                   >
                       @lang('menu.resources')
                       <img class="arrow-icon" src="/images/chevron-down-icon.svg" alt="">
                   </a>
                   <ul class="sub-menu">
                       <li class="menu-title max-xl:!hidden">
-                          <a class="flex gap-2 items-center"  href="{{route('educational-resources')}}">
+                          <a class="flex gap-2 items-center" href="{{route('educational-resources')}}">
                               @lang('menu.resources')
                               <img src="/images/arrow-right-icon.svg" class="menu-title-icon" />
                           </a>
                       </li>
+                      <li class="xl:hidden">
+                          <a class="cookweek-link hover-underline" href="{{ route('educational-resources') }}">@lang('menu.resources')</a>
+                      </li>
                       <li class="flex flex-col gap-16 xl:flex-row">
                           @php
                               $resourcesDropdownSections = $resourcesDropdownSections ?? collect();
@@ -231,13 +234,14 @@ class="absolute top-0 left-0 w-full h-full"
               {{-- community --}}
               <li class="main-menu-item">
                   <a
-                      class="cookweek-link hover-underline !text-[#1C4DA1] !text-[16px] cursor-pointer"
-                      onclick="document.body.clientWidth > 1280 && (window.location.href='{{ route('community') }}')"
+                      class="cookweek-link hover-underline !text-[#1C4DA1] !text-[16px]"
+                      href="{{ route('community') }}"
                   >
                       @lang('community.titles.0')
                       <img class="arrow-icon" src="/images/chevron-down-icon.svg" alt="">
                   </a>
                   <ul class="sub-menu">
+                      <li class="xl:hidden"><a class="cookweek-link hover-underline" href="{{ route('community') }}">@lang('community.titles.0')</a></li>
                       <li><a class="cookweek-link hover-underline" href="{{ route('grassroots-grants') }}">@lang('menu.grassroots_grants')</a></li>
                   </ul>
               </li>
@@ -290,13 +294,14 @@ class="cookweek-link hover-underline !text-[#1C4DA1] !text-[16px]"
               {{-- blog --}}
               <li class="main-menu-item">
                   <a
-                      class="cookweek-link hover-underline !text-[#1C4DA1] !text-[16px] cursor-pointer"
-                      onclick="document.body.clientWidth > 1280 && (window.location.href='https://codeweek.eu/blog/')"
+                      class="cookweek-link hover-underline !text-[#1C4DA1] !text-[16px]"
+                      href="https://codeweek.eu/blog/"
                   >
                       @lang('menu.blog')
                       <img class="arrow-icon" src="/images/chevron-down-icon.svg" alt="">
                   </a>
                   <ul class="sub-menu">
+                      <li class="xl:hidden"><a class="cookweek-link hover-underline" href="https://codeweek.eu/blog/">@lang('menu.blog')</a></li>
                       <li><a class="cookweek-link hover-underline" href="https://forms.office.com/Pages/ResponsePage.aspx?id=18F13DIal06vkB3AGRHqbCnyIKB_vXdLsUgagfjd7DRUN1dZTVYxSkJNQ1VWSlVZNlpBOFAyN0g4UC4u&amp;embed=true" target="_blank" rel="noopener">@lang('menu.share_your_stories')</a></li>
                   </ul>
               </li>