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