modal-menu.php 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  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. <div class="menu-modal cover-modal header-footer-group" data-modal-target-string=".menu-modal">
  11. <div class="menu-modal-inner modal-inner">
  12. <div class="menu-wrapper section-inner">
  13. <div class="menu-top">
  14. <button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".menu-modal">
  15. <span class="toggle-text"><?php _e( 'Close Menu', 'twentytwenty' ); ?></span>
  16. <?php twentytwenty_the_theme_svg( 'cross' ); ?>
  17. </button><!-- .nav-toggle -->
  18. <?php
  19. $mobile_menu_location = '';
  20. // If the mobile menu location is not set, use the primary and expanded locations as fallbacks, in that order.
  21. if ( has_nav_menu( 'mobile' ) ) {
  22. $mobile_menu_location = 'mobile';
  23. } elseif ( has_nav_menu( 'primary' ) ) {
  24. $mobile_menu_location = 'primary';
  25. } elseif ( has_nav_menu( 'expanded' ) ) {
  26. $mobile_menu_location = 'expanded';
  27. }
  28. if ( has_nav_menu( 'expanded' ) ) {
  29. $expanded_nav_classes = '';
  30. if ( 'expanded' === $mobile_menu_location ) {
  31. $expanded_nav_classes .= ' mobile-menu';
  32. }
  33. ?>
  34. <nav class="expanded-menu<?php echo esc_attr( $expanded_nav_classes ); ?>" aria-label="<?php esc_attr_e( 'Expanded', 'twentytwenty' ); ?>" role="navigation">
  35. <ul class="modal-menu reset-list-style">
  36. <?php
  37. if ( has_nav_menu( 'expanded' ) ) {
  38. wp_nav_menu(
  39. array(
  40. 'container' => '',
  41. 'items_wrap' => '%3$s',
  42. 'show_toggles' => true,
  43. 'theme_location' => 'expanded',
  44. )
  45. );
  46. }
  47. ?>
  48. </ul>
  49. </nav>
  50. <?php
  51. }
  52. if ( 'expanded' !== $mobile_menu_location ) {
  53. ?>
  54. <nav class="mobile-menu" aria-label="<?php esc_attr_e( 'Mobile', 'twentytwenty' ); ?>" role="navigation">
  55. <ul class="modal-menu reset-list-style">
  56. <?php
  57. if ( $mobile_menu_location ) {
  58. wp_nav_menu(
  59. array(
  60. 'container' => '',
  61. 'items_wrap' => '%3$s',
  62. 'show_toggles' => true,
  63. 'theme_location' => $mobile_menu_location,
  64. )
  65. );
  66. } else {
  67. wp_list_pages(
  68. array(
  69. 'match_menu_classes' => true,
  70. 'show_toggles' => true,
  71. 'title_li' => false,
  72. 'walker' => new TwentyTwenty_Walker_Page(),
  73. )
  74. );
  75. }
  76. ?>
  77. </ul>
  78. </nav>
  79. <?php
  80. }
  81. ?>
  82. </div><!-- .menu-top -->
  83. <div class="menu-bottom">
  84. <?php if ( has_nav_menu( 'social' ) ) { ?>
  85. <nav aria-label="<?php esc_attr_e( 'Expanded Social links', 'twentytwenty' ); ?>" role="navigation">
  86. <ul class="social-menu reset-list-style social-icons fill-children-current-color">
  87. <?php
  88. wp_nav_menu(
  89. array(
  90. 'theme_location' => 'social',
  91. 'container' => '',
  92. 'container_class' => '',
  93. 'items_wrap' => '%3$s',
  94. 'menu_id' => '',
  95. 'menu_class' => '',
  96. 'depth' => 1,
  97. 'link_before' => '<span class="screen-reader-text">',
  98. 'link_after' => '</span>',
  99. 'fallback_cb' => '',
  100. )
  101. );
  102. ?>
  103. </ul>
  104. </nav><!-- .social-menu -->
  105. <?php } ?>
  106. </div><!-- .menu-bottom -->
  107. </div><!-- .menu-wrapper -->
  108. </div><!-- .menu-modal-inner -->
  109. </div><!-- .menu-modal -->