Merge pull request #745 from adventistchurch/#634-primary-navigation-…

…menu-add-new-level

#634 primary navigation menu add new level

CHANGELOG.md

@@ -3,6 +3,10 @@ A record of the changes made to `ALPS for Wordpress`.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.15.1.8]
+### Update
+- Added Primary Navigation Menu supporting 3rd level.[#745](https://github.com/adventistchurch/alps-wordpress/pull/745);
+
 ## [3.15.1.7]
 ### Update
 - Added lodash.js dependency to carbon fields initialization (WP 6.4+)[#737](https://github.com/adventistchurch/alps-wordpress/pull/737);

app/local/source/css/_module.header.scss

@@ -447,6 +447,44 @@
         white-space: normal;
         color: $c-white;
       }
+
+      &__list-item.this-is-active {
+        .c-primary-nav__third-level {
+          opacity: 1;
+          display: block;
+          visibility: visible;
+          z-index: 9999;
+          padding: ($space / 4) 0;
+          height: auto;
+        }
+      }
+
+      //&__list-item.has-subnav a {
+      //  padding-right: $pad * 2;
+      //}
+    }
+
+    &__third-level {
+      position: relative;
+      opacity: 0;
+      height: 0;
+      display: none;
+      width: 100%;
+      top: 0;
+      left: 0;
+      z-index: 9999;
+
+      &__list-item {
+        border: 0;
+
+        @include media(">medium") {
+          background-color: $c-gray--light;
+        }
+      }
+
+      &__link {
+        white-space: normal;
+      }
     }
   }
 }
@@ -955,6 +993,36 @@
       height: 0;
       display: none;
       z-index: 9999;
+
+      &__list-item {
+        &.this-is-active {
+          .c-primary-nav__third-level {
+            opacity: 1;
+            height: auto;
+            visibility: visible;
+            display: block;
+          }
+        }
+      }
+
+      &__arrow {
+        top: 0;
+        right: 0;
+        transform: translateY(0);
+        padding: 0 $space-mobile;
+        width: rem(50);
+        height: rem(35);
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        cursor: pointer;
+        position: absolute;
+
+        &.this-is-active {
+          transform: rotate(180deg);
+          justify-content: flex-start;
+        }
+      }
     }
 
     &__list-item__toggle,
@@ -1124,6 +1192,16 @@
     }
   }
 
+  .c-primary-nav__third-level {
+    position: relative;
+    left: 0;
+    display: none;
+
+    &__list-item {
+      background-color: $c-white;
+    }
+  }
+
   &__nav,
   &__about {
     display: flex;

resources/views/patterns/01-molecules/navigation/primary-navigation.blade.php

@@ -50,6 +50,7 @@
                       @php
                         $parentID = $sub->ID;
                         $sub_subitems = array_filter($nav_items, function($item) use ($parentID) { return $item->menu_item_parent == $parentID; });
+                        $third_level_toggleId = 0;
                       @endphp
                       @foreach ($sub_subitems as $sub_subitem => $sub_item)
                         @php
@@ -60,9 +61,36 @@
                           $link_title = ($sub_item->attr_title ? ' title="'. $sub_item->attr_title . '"' : '');
                           $link_description = ($sub_item->description ? ' description="' . $sub_item->description . '"' : '');
                           $link_rel = ($sub_item->xfn ? ' rel="'. $sub_item->xfn . '"' : '');
+                          $show_3rd_level_subnav = '';
+                          $has_3rd_level_subnav = array_search($sub_item->ID, array_column($nav_items, 'menu_item_parent'));
+                          if ($has_3rd_level_subnav) $show_3rd_level_subnav = ' has_sub_subnav js-this';
+                          $third_toggled = 'third-toggled-' . $third_level_toggleId++;
                         @endphp
-                        <li class="c-primary-nav__subnav__subnav__list-item c-subnav__list-item u-theme--background-color--base">
+                        <li class="c-primary-nav__subnav__subnav__list-item c-subnav__list-item u-theme--background-color--base {{ $third_toggled }}{{ $show_3rd_level_subnav }}">
                           <a href="{{ $link_url }}" class="c-primary-nav__subnav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--lighter{{ $link_classes }}"{!! $link_target !!}{!! $link_title !!}{!! $link_description !!}{!! $link_rel !!}>{!! $link_text !!}</a>
+                          @if ($has_3rd_level_subnav)
+                            <span class="c-primary-nav__subnav__subnav__arrow c-subnav__arrow o-arrow--down u-path-fill--gray js-toggle" data-toggled="{{ $third_toggled }}" data-prefix="this"></span>
+                            <ul class="c-primary-nav__third-level">
+                              @php
+                                $parentID = $sub_item->ID;
+                                $last_level_subitems = array_filter($nav_items, function($item) use ($parentID) { return $item->menu_item_parent == $parentID; });
+                              @endphp
+                              @foreach ($last_level_subitems as $last_level_subitem => $last_item)
+                                @php
+                                  $link_url = $last_item->url;
+                                  $link_text = $last_item->title;
+                                  $link_classes = ($last_item->classes ? ' ' . implode(' ', $last_item->classes) : '');
+                                  $link_target = ($last_item->target ? ' target="'. $last_item->target . '"' : '');
+                                  $link_title = ($last_item->attr_title ? ' title="'. $last_item->attr_title . '"' : '');
+                                  $link_description = ($last_item->description ? ' description="' . $last_item->description . '"' : '');
+                                  $link_rel = ($last_item->xfn ? ' rel="'. $last_item->xfn . '"' : '');
+                                @endphp
+                                <li class="c-primary-nav__third-level__list-item c-subnav__list-item u-theme--background-color--base">
+                                  <a href="{{ $link_url }}" class="c-primary-nav__third-level__link c-subnav__link u-theme--link-hover--lighter{{ $link_classes }}"{!! $link_target !!}{!! $link_title !!}{!! $link_description !!}{!! $link_rel !!}>{!! $link_text !!}</a>
+                                </li>
+                            @endforeach
+                          </ul>
+                        @endif
                         </li>
                       @endforeach
                     </ul>