[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Displays the menu icon and modal
   4   *
   5   * @package WordPress
   6   * @subpackage Twenty_Twenty
   7   * @since Twenty Twenty 1.0
   8   */
   9  
  10  ?>
  11  
  12  <div class="menu-modal cover-modal header-footer-group" data-modal-target-string=".menu-modal">
  13  
  14      <div class="menu-modal-inner modal-inner">
  15  
  16          <div class="menu-wrapper section-inner">
  17  
  18              <div class="menu-top">
  19  
  20                  <button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" data-set-focus=".menu-modal">
  21                      <span class="toggle-text"><?php _e( 'Close Menu', 'twentytwenty' ); ?></span>
  22                      <?php twentytwenty_the_theme_svg( 'cross' ); ?>
  23                  </button><!-- .nav-toggle -->
  24  
  25                  <?php
  26  
  27                  $mobile_menu_location = '';
  28  
  29                  // If the mobile menu location is not set, use the primary and expanded locations as fallbacks, in that order.
  30                  if ( has_nav_menu( 'mobile' ) ) {
  31                      $mobile_menu_location = 'mobile';
  32                  } elseif ( has_nav_menu( 'primary' ) ) {
  33                      $mobile_menu_location = 'primary';
  34                  } elseif ( has_nav_menu( 'expanded' ) ) {
  35                      $mobile_menu_location = 'expanded';
  36                  }
  37  
  38                  if ( has_nav_menu( 'expanded' ) ) {
  39  
  40                      $expanded_nav_classes = '';
  41  
  42                      if ( 'expanded' === $mobile_menu_location ) {
  43                          $expanded_nav_classes .= ' mobile-menu';
  44                      }
  45  
  46                      ?>
  47  
  48                      <nav class="expanded-menu<?php echo esc_attr( $expanded_nav_classes ); ?>" aria-label="<?php echo esc_attr_x( 'Expanded', 'menu', 'twentytwenty' ); ?>">
  49  
  50                          <ul class="modal-menu reset-list-style">
  51                              <?php
  52                              if ( has_nav_menu( 'expanded' ) ) {
  53                                  wp_nav_menu(
  54                                      array(
  55                                          'container'      => '',
  56                                          'items_wrap'     => '%3$s',
  57                                          'show_toggles'   => true,
  58                                          'theme_location' => 'expanded',
  59                                      )
  60                                  );
  61                              }
  62                              ?>
  63                          </ul>
  64  
  65                      </nav>
  66  
  67                      <?php
  68                  }
  69  
  70                  if ( 'expanded' !== $mobile_menu_location ) {
  71                      ?>
  72  
  73                      <nav class="mobile-menu" aria-label="<?php echo esc_attr_x( 'Mobile', 'menu', 'twentytwenty' ); ?>">
  74  
  75                          <ul class="modal-menu reset-list-style">
  76  
  77                          <?php
  78                          if ( $mobile_menu_location ) {
  79  
  80                              wp_nav_menu(
  81                                  array(
  82                                      'container'      => '',
  83                                      'items_wrap'     => '%3$s',
  84                                      'show_toggles'   => true,
  85                                      'theme_location' => $mobile_menu_location,
  86                                  )
  87                              );
  88  
  89                          } else {
  90  
  91                              wp_list_pages(
  92                                  array(
  93                                      'match_menu_classes' => true,
  94                                      'show_toggles'       => true,
  95                                      'title_li'           => false,
  96                                      'walker'             => new TwentyTwenty_Walker_Page(),
  97                                  )
  98                              );
  99  
 100                          }
 101                          ?>
 102  
 103                          </ul>
 104  
 105                      </nav>
 106  
 107                      <?php
 108                  }
 109                  ?>
 110  
 111              </div><!-- .menu-top -->
 112  
 113              <div class="menu-bottom">
 114  
 115                  <?php if ( has_nav_menu( 'social' ) ) { ?>
 116  
 117                      <nav aria-label="<?php esc_attr_e( 'Expanded Social links', 'twentytwenty' ); ?>">
 118                          <ul class="social-menu reset-list-style social-icons fill-children-current-color">
 119  
 120                              <?php
 121                              wp_nav_menu(
 122                                  array(
 123                                      'theme_location'  => 'social',
 124                                      'container'       => '',
 125                                      'container_class' => '',
 126                                      'items_wrap'      => '%3$s',
 127                                      'menu_id'         => '',
 128                                      'menu_class'      => '',
 129                                      'depth'           => 1,
 130                                      'link_before'     => '<span class="screen-reader-text">',
 131                                      'link_after'      => '</span>',
 132                                      'fallback_cb'     => '',
 133                                  )
 134                              );
 135                              ?>
 136  
 137                          </ul>
 138                      </nav><!-- .social-menu -->
 139  
 140                  <?php } ?>
 141  
 142              </div><!-- .menu-bottom -->
 143  
 144          </div><!-- .menu-wrapper -->
 145  
 146      </div><!-- .menu-modal-inner -->
 147  
 148  </div><!-- .menu-modal -->