easy-elements / widgets / navigation-menu / navigation-menu.php

navigation-menu.php in Easy Elements for Elementor – Addons & Website Templates 1.3.4, at widgets/navigation-menu/navigation-menu.php

1,578 lines 42.6 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	use Elementor\Controls_Manager;
4	use Elementor\Utils;
5	use Elementor\Group_Control_Typography;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8
9	if ( ! defined( 'ABSPATH' ) ) {
10	exit; // Exit if accessed directly.
11	}
12
13	// Include the Menu_Walker class
14	require_once plugin_dir_path( __FILE__ ) . 'menu-walker.php';
15
16	/**
17	* Class Nav Menu.
18	*/
19	class Easyel_Navigation_Menu_Widget extends \Elementor\Widget_Base {
20
21	protected $script_handles = [];
22	public function __construct( $data = [], $args = null ) {
23	parent::__construct( $data, $args );
24
25	$js_files = [
26	'widgets/navigation-menu/js/navigation-menu.min.js',
27	];
28
29	foreach ( $js_files as $js ) {
30
31	$path = EASYELEMENTS_DIR_PATH . $js;
32
33	if ( file_exists( $path ) ) {
34
35	$handle = 'easyel-' . md5( $js );
36
37	wp_register_script(
38	$handle,
39	EASYELEMENTS_DIR_URL . $js,
40	[ 'jquery' ],
41	filemtime( $path ),
42	true
43	);
44
45	$this->script_handles[] = $handle;
46	}
47	}
48	}
49
50	/**
51	* Menu index.
52	*
53	* @access protected
54	* @var int $nav_menu_index
55	*/
56	// phpcs:ignore
57	protected $nav_menu_index = 1;
58
59	/**
60	* Retrieve the widget name.
61	*
62	* @since 1.3.0
63	*
64	* @access public
65	*
66	* @return string Widget name.
67	*/
68
69	public function get_name() {
70	return 'eel-navigation-menu';
71	}
72
73	/**
74	* Retrieve the widget title.
75	*
76	* @since 1.3.0
77	*
78	* @access public
79	*
80	* @return string Widget title.
81	*/
82	public function get_title() {
83	return esc_html__( 'Navigation Menu', 'easy-elements' );
84	}
85
86	/**
87	* Retrieve the widget icon.
88	*
89	* @since 1.3.0
90	*
91	* @access public
92	*
93	* @return string Widget icon.
94	*/
95	public function get_icon() {
96	return 'easyicon easyelIcon-navigation';
97	}
98
99	/**
100	* Retrieve the widget categories.
101	*
102	* @since 1.3.0
103	*
104	* @access public
105	*
106	* @return array Widget categories.
107	*/
108	public function get_categories() {
109	return [ 'easyelements_header_footer_category' ];
110	}
111
112	public function get_style_depends() {
113	return [
114	'eel-navigation-menu',
115	];
116	}
117
118	public function get_script_depends() {
119	return $this->script_handles;
120	}
121
122	/**
123	* Retrieve the menu index.
124	*
125	* Used to get index of nav menu.
126	*
127	* @since 1.3.0
128	* @access protected
129	*
130	* @return int nav index.
131	*/
132	protected function get_nav_menu_index() {
133	return $this->nav_menu_index++;
134	}
135
136	/**
137	* Retrieve the list of available menus.
138	*
139	* Used to get the list of available menus.
140	*
141	* @since 1.3.0
142	* @access private
143	*
144	* @return array get WordPress menus list.
145	*/
146	private function get_available_menus() {
147
148	$menus = wp_get_nav_menus();
149
150	$options = [];
151
152	foreach ( $menus as $menu ) {
153	$options[ $menu->slug ] = $menu->name;
154	}
155
156	return $options;
157	}
158
159	/**
160	* Check if the Elementor is updated.
161	*
162	* @since 1.3.0
163	*
164	* @return boolean if Elementor updated.
165	*/
166	public static function is_elementor_updated() {
167	if ( class_exists( 'Elementor\Icons_Manager' ) ) {
168	return true;
169	} else {
170	return false;
171	}
172	}
173
174
175	/**
176	* Register Nav Menu controls.
177	*
178	* @since 1.5.7
179	* @access protected
180	* @return void
181	*/
182
183	public function get_keywords() {
184	return [ 'navigation', 'menu', 'nav', 'text' ];
185	}
186	protected function register_controls() {
187
188	$this->register_general_content_controls();
189	$this->register_style_content_controls();
190	$this->register_dropdown_content_controls();
191	}
192
193	/**
194	* Register Nav Menu General Controls.
195	*
196	* @since 1.3.0
197	* @access protected
198	* @return void
199	*/
200
201	protected function register_general_content_controls() {
202
203	$this->start_controls_section(
204	'section_menu',
205	[
206	'label' => __( 'Menu Settings', 'easy-elements' ),
207	]
208	);
209
210	$menus = $this->get_available_menus();
211
212	if ( ! empty( $menus ) ) {
213	$this->add_control(
214	'menu',
215	[
216	'label' => __( 'Menu', 'easy-elements' ),
217	'type' => Controls_Manager::SELECT,
218	'options' => $menus,
219	'default' => array_keys( $menus )[0],
220	'save_default' => true,
221	/* translators: %s Nav menu URL */
222	'description' => sprintf( __( 'Go to the <a href="%s" target="_blank">Menus screen</a> to manage your menus.', 'easy-elements' ), admin_url( 'nav-menus.php' ) ),
223	]
224	);
225	} else {
226	$this->add_control(
227	'menu',
228	[
229	'type' => Controls_Manager::RAW_HTML,
230	/* translators: %s Nav menu URL */
231	'raw' => sprintf( __( '<strong>There are no menus in your site.</strong><br>Go to the <a href="%s" target="_blank">Menus screen</a> to create one.', 'easy-elements' ), admin_url( 'nav-menus.php?action=edit&menu=0' ) ),
232	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
233	]
234	);
235	}
236
237	$this->add_control(
238	'enable_sticky_header',
239	[
240	'label' => __( 'Enable Sticky Header', 'easy-elements' ),
241	'type' => Controls_Manager::SWITCHER,
242	'label_on' => __( 'Yes', 'easy-elements' ),
243	'label_off' => __( 'No', 'easy-elements' ),
244	'frontend_available' => true,
245	'default' => 'no',
246	]
247	);
248
249	$this->add_control(
250	'fixed_top_sticky',
251	[
252	'label' => __( 'Fixed Top Sticky', 'easy-elements' ),
253	'type' => Controls_Manager::SWITCHER,
254	'label_on' => __( 'Yes', 'easy-elements' ),
255	'label_off' => __( 'No', 'easy-elements' ),
256	'frontend_available' => true,
257	'default' => 'no',
258	'condition' => [
259	'enable_sticky_header' => 'yes',
260	],
261	]
262	);
263
264	$this->start_controls_tabs(
265	'sticky_bg_color_tabs',
266	[
267	'condition' => [
268	'enable_sticky_header' => 'yes',
269	],
270	]
271	);
272
273	$this->start_controls_tab(
274	'sticky_bg_color_normal_tab',
275	[
276	'label' => __( 'Normal', 'easy-elements' ),
277	'condition' => [
278	'enable_sticky_header' => 'yes',
279	],
280	]
281	);
282
283	$this->add_control(
284	'bg_color_sticky_normal',
285	[
286	'label' => __( 'Background Color', 'easy-elements' ),
287	'type' => Controls_Manager::COLOR,
288	'default' => '',
289	'description' => __( 'Note: If you are using the Sticky Header background color, Do not set a background color from the Elementor container or section. Please use the Sticky option to set the normal background color to avoid conflicts.', 'easy-elements' ),
290	'selectors' => [
291	'header.eel-sticky-header-on' => 'background-color: {{VALUE}}',
292	],
293	'condition' => [
294	'enable_sticky_header' => 'yes',
295	],
296	]
297	);
298
299	$this->add_control(
300	'disable_top_padding',
301	[
302	'label' => __( 'Enable Top Padding', 'easy-elements' ),
303	'type' => Controls_Manager::SWITCHER,
304	'label_on' => __( 'Yes', 'easy-elements' ),
305	'label_off' => __( 'No', 'easy-elements' ),
306	'frontend_available' => true,
307	'default' => 'yes',
308	'condition' => [
309	'enable_sticky_header' => 'yes',
310	],
311	]
312	);
313
314	$this->add_responsive_control(
315	'dynamic_top_padding_value',
316	[
317	'label' => __( 'Custom Top Padding', 'easy-elements' ),
318	'type' => \Elementor\Controls_Manager::SLIDER,
319	'size_units' => [ 'px' ],
320	'range' => [
321	'px' => [
322	'min' => 0,
323	'max' => 300,
324	],
325	],
326	'condition' => [
327	'disable_top_padding' => '',
328	'enable_sticky_header' => 'yes',
329	],
330	'selectors' => [
331	'body #page' => 'padding-top: {{SIZE}}{{UNIT}};',
332	],
333	]
334	);
335
336	$this->end_controls_tab();
337
338	$this->start_controls_tab(
339	'sticky_bg_color_hover_tab',
340	[
341	'label' => __( 'Sticky', 'easy-elements' ),
342	'condition' => [
343	'enable_sticky_header' => 'yes',
344	],
345	]
346	);
347	$this->add_control(
348	'bg_color_sticky',
349	[
350	'label' => __( 'Background Color', 'easy-elements' ),
351	'type' => Controls_Manager::COLOR,
352	'default' => '',
353	'selectors' => [
354	'header.eel-sticky-header-on.eel-up-scroll, header.eel-sticky-header-on.eel--fixed-top-sticky' => 'background-color: {{VALUE}} !important',
355	],
356	'condition' => [
357	'enable_sticky_header' => 'yes',
358	],
359	]
360	);
361
362	$this->add_control(
363	'text_color_sticky',
364	[
365	'label' => __( 'Text Color', 'easy-elements' ),
366	'type' => Controls_Manager::COLOR,
367	'default' => '',
368	'selectors' => [
369	'header.eel-sticky-header-on.eel-up-scroll .eel-nav-menu a.eel-menu-item, header.eel-sticky-header-on.eel-up-scroll .eel-nav-menu a.eel-sub-menu-item, .header.eel-sticky-header-on.eel-up-scroll , header.eel-sticky-header-on.eel--fixed-top-sticky .eel-nav-menu a.eel-menu-item, header.eel-sticky-header-on.eel--fixed-top-sticky .eel-nav-menu a.eel-sub-menu-item, .header.eel-sticky-header-on.eel--fixed-top-sticky ' => 'color: {{VALUE}} !important',
370	],
371	'condition' => [
372	'enable_sticky_header' => 'yes',
373	],
374	]
375	);
376	$this->add_group_control(
377	\Elementor\Group_Control_Box_Shadow::get_type(),
378	[
379	'name' => 'box_shadow',
380	'selector' => 'body header.eel-sticky-header-on.eel-up-scroll, body header.eel-sticky-header-on.eel--fixed-top-sticky',
381	'condition' => [
382	'enable_sticky_header' => 'yes',
383	],
384	]
385	);
386
387	$current_theme = wp_get_theme();
388
389	if ( 'Twenty Twenty-One' === $current_theme->get( 'Name' ) ) {
390	$this->add_control(
391	'hide_theme_icons',
392	[
393	'label' => __( 'Hide + & - Sign', 'easy-elements' ),
394	'type' => Controls_Manager::SWITCHER,
395	'label_on' => __( 'Yes', 'easy-elements' ),
396	'label_off' => __( 'No', 'easy-elements' ),
397	'return_value' => 'yes',
398	'default' => 'no',
399	'prefix_class' => 'eel-nav-menu__theme-icon-',
400	]
401	);
402	}
403
404	$this->end_controls_tab();
405
406	$this->end_controls_tabs();
407
408	$this->end_controls_section();
409
410	$this->start_controls_section(
411	'section_layout',
412	[
413	'label' => __( 'Layout Settings', 'easy-elements' ),
414	]
415	);
416
417	$this->add_control(
418	'layout',
419	[
420	'label' => __( 'Layout', 'easy-elements' ),
421	'type' => Controls_Manager::SELECT,
422	'default' => 'horizontal',
423	'options' => [
424	'horizontal' => __( 'Horizontal', 'easy-elements' ),
425	'vertical' => __( 'Vertical', 'easy-elements' ),
426	],
427	]
428	);
429
430	$this->add_responsive_control(
431	'navmenu_align',
432	[
433	'label' => __( 'Alignment', 'easy-elements' ),
434	'type' => Controls_Manager::CHOOSE,
435	'options' => [
436	'left' => [
437	'title' => __( 'Left', 'easy-elements' ),
438	'icon' => 'eicon-h-align-left',
439	],
440	'center' => [
441	'title' => __( 'Center', 'easy-elements' ),
442	'icon' => 'eicon-h-align-center',
443	],
444	'right' => [
445	'title' => __( 'Right', 'easy-elements' ),
446	'icon' => 'eicon-h-align-right',
447	],
448	'justify' => [
449	'title' => __( 'Justify', 'easy-elements' ),
450	'icon' => 'eicon-h-align-stretch',
451	],
452	],
453	'default' => 'left',
454	'condition' => [
455	'layout' => 'horizontal',
456	],
457	'selectors' => [
458	'{{WRAPPER}} .eel-nav-menu__layout-horizontal, {{WRAPPER}} .eel-nav-menu__layout-horizontal .eel-nav-menu' => 'justify-content: {{VALUE}};',
459	],
460	]
461	);
462
463
464	$this->add_responsive_control(
465	'navmenu_align_text',
466	[
467	'label' => __( 'Menu Alignment', 'easy-elements' ),
468	'type' => \Elementor\Controls_Manager::CHOOSE,
469	'options' => [
470	'left' => [
471	'title' => __( 'Left', 'easy-elements' ),
472	'icon' => 'eicon-h-align-left',
473	],
474	'center' => [
475	'title' => __( 'Center', 'easy-elements' ),
476	'icon' => 'eicon-h-align-center',
477	],
478	'right' => [
479	'title' => __( 'Right', 'easy-elements' ),
480	'icon' => 'eicon-h-align-right',
481	],
482	'justify' => [
483	'title' => __( 'Justify', 'easy-elements' ),
484	'icon' => 'eicon-h-align-stretch',
485	],
486	],
487	'default' => '',
488	'condition' => [
489	'layout' => [ 'vertical' ],
490	],
491	'selectors' => [
492	'{{WRAPPER}} .eel-nav-menu li.menu-item' => 'text-align: {{VALUE}};',
493	'{{WRAPPER}} .eel-nav-menu li.menu-item a' => 'max-width: 100%; width: auto; display: block;',
494	],
495	]
496	);
497
498	$this->add_control(
499	'submenu_animation',
500	[
501	'label' => __( 'Dropdown Animation', 'easy-elements' ),
502	'type' => Controls_Manager::SELECT,
503	'default' => 'eel_animation_slide_down',
504	'options' => [
505	'eel_animation_slide_down' => __( 'Animation Down', 'easy-elements' ),
506	'eel_animation_slide_up' => __( 'Animation Up', 'easy-elements' ),
507	'eel_animation_fade' => __( 'Animation Fade', 'easy-elements' ),
508	'eel_animation_right' => __( 'Animation Right', 'easy-elements' ),
509	'eel_animation_left' => __( 'Animation Left', 'easy-elements' ),
510	'eel_animation_zoom' => __( 'Animation Zoom', 'easy-elements' ),
511	],
512	'condition' => [
513	'layout' => 'horizontal',
514	],
515	]
516	);
517
518	$this->add_control(
519	'menu_icon_vertical',
520	[
521	'label' => __('Icon', 'easy-elements'),
522	'type' => Controls_Manager::ICONS,
523	'condition' => [
524	'layout' => 'vertical',
525	],
526	]
527	);
528
529	$this->add_responsive_control(
530	'icon_alignment_vertical',
531	[
532	'label' => __( 'Alignment', 'easy-elements' ),
533	'type' => \Elementor\Controls_Manager::CHOOSE,
534	'options' => [
535	'align_left' => [
536	'title' => __( 'Left', 'easy-elements' ),
537	'icon' => 'eicon-h-align-left',
538	],
539	'align_right' => [
540	'title' => __( 'Right', 'easy-elements' ),
541	'icon' => 'eicon-h-align-right',
542	],
543	],
544	'default' => 'align_left',
545	'condition' => [
546	'layout' => 'vertical',
547	],
548	'selectors' => [
549	'{{WRAPPER}} .eel-layout-vertical .eel-nav-menu li>.eel-menu-item .eel-menu-dynamic-icon' => 'order: {{VALUE}};',
550	],
551	]
552	);
553
554	$this->add_responsive_control(
555	'icon_margin_vertical',
556	[
557	'label' => esc_html__( 'Margin', 'easy-elements' ),
558	'type' => \Elementor\Controls_Manager::DIMENSIONS,
559	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
560	'selectors' => [
561	'{{WRAPPER}} .eel-layout-vertical .eel-nav-menu li>.eel-menu-item .eel-menu-dynamic-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
562	],
563	'condition' => [
564	'layout' => 'vertical',
565	],
566	]
567	);
568
569	$this->add_control(
570	'heading_responsive',
571	[
572	'type' => Controls_Manager::HEADING,
573	'label' => __( 'Responsive Menu Settings', 'easy-elements' ),
574	'separator' => 'before',
575	'condition' => [
576	'layout' => [ 'horizontal' ],
577	],
578	]
579	);
580
581	$this->add_control(
582	'dropdown',
583	[
584	'label' => __( 'Breakpoint', 'easy-elements' ),
585	'type' => Controls_Manager::SELECT,
586	'default' => 'tablet',
587	'options' => [
588	'tablet' => __( 'Tablet (1025px >)', 'easy-elements' ),
589	'none' => __( 'None', 'easy-elements' ),
590	],
591	'prefix_class' => 'eel-nav-menu__breakpoint-',
592	'condition' => [
593	'layout' => [ 'horizontal' ],
594	],
595	'render_type' => 'template',
596	]
597	);
598
599	$this->add_control(
600	'mobile_menu_open_position',
601	[
602	'label' => __( 'Mobile Menu Open Position', 'easy-elements' ),
603	'type' => Controls_Manager::SELECT,
604	'default' => 'right',
605	'options' => [
606	'top' => __( 'Top', 'easy-elements' ),
607	'right' => __( 'Right', 'easy-elements' ),
608	],
609	'condition' => [
610	'layout' => [ 'horizontal' ],
611	],
612	]
613	);
614
615
616	$this->start_controls_tabs( 'tabs_menu_item_style_mobile' );
617
618	$this->start_controls_tab(
619	'tab_menu_item_normal_m',
620	[
621	'label' => __( 'Normal', 'easy-elements' ),
622	'condition' => [
623	'layout' => 'horizontal',
624	],
625	]
626	);
627
628	$this->add_control(
629	'color_menu_item_m',
630	[
631	'label' => __( 'Text Color', 'easy-elements' ),
632	'type' => Controls_Manager::COLOR,
633	'selectors' => [
634	'{{WRAPPER}} .eel-mobile .menu-item a.eel-menu-item, {{WRAPPER}} .sidebar-on-mobile li.menu-item a, {{WRAPPER}} .eel-mobile .sub-menu a.eel-sub-menu-item' => 'color: {{VALUE}} !important;',
635	],
636	'condition' => [
637	'layout' => [ 'horizontal' ],
638	],
639	]
640	);
641	$this->add_group_control(
642	\Elementor\Group_Control_Typography::get_type(),
643	[
644	'name' => 'color_menu_item_m_typography',
645	'label' => esc_html__('Typography', 'easy-elements' ),
646	'selector' => '{{WRAPPER}} .eel-mobile .menu-item a.eel-menu-item, {{WRAPPER}} .sidebar-on-mobile li.menu-item a',
647	'condition' => [
648	'layout' => [ 'horizontal' ],
649	],
650	]
651	);
652
653	$this->end_controls_tab();
654
655	$this->start_controls_tab(
656	'tab_menu_item_hover_m',
657	[
658	'label' => __( 'Hover', 'easy-elements' ),
659	'condition' => [
660	'layout' => [ 'horizontal' ],
661	],
662	]
663	);
664
665	$this->add_control(
666	'color_menu_item_hover_m',
667	[
668	'label' => __( 'Text Color', 'easy-elements' ),
669	'type' => Controls_Manager::COLOR,
670	'selectors' => [
671	'{{WRAPPER}} .eel-mobile .menu-item > a.eel-menu-item:hover, {{WRAPPER}} .sidebar-on-mobile li.menu-item > a:hover, {{WRAPPER}} .eel-mobile .sub-menu a.eel-sub-menu-item:hover, {{WRAPPER}} .eel-mobile .menu-item.current-menu-item > a.eel-menu-item, {{WRAPPER}} .eel-mobile .menu-item a.eel-menu-item.highlighted' => 'color: {{VALUE}} !important;',
672	],
673	'condition' => [
674	'layout' => [ 'horizontal' ],
675	],
676	]
677	);
678
679	$this->end_controls_tab();
680
681	$this->start_controls_tab(
682	'tab_menu_item_active_m',
683	[
684	'label' => __( 'Active', 'easy-elements' ),
685	'condition' => [
686	'layout' => [ 'horizontal' ],
687	],
688	]
689	);
690
691	$this->add_control(
692	'color_menu_item_active_m',
693	[
694	'label' => __( 'Text Color', 'easy-elements' ),
695	'type' => Controls_Manager::COLOR,
696	'selectors' => [
697	'{{WRAPPER}} .eel-mobile .menu-item.current-menu-item > a.eel-menu-item, {{WRAPPER}} .sidebar-on-mobile li.menu-item.current-menu-item > a, .sidebar-on-mobile li.menu-item a.eel-active,
698	{{WRAPPER}} .eel-mobile .menu-item.current-menu-ancestor > a.eel-menu-item' => 'color: {{VALUE}} !important;',
699	],
700	'condition' => [
701	'layout' => [ 'horizontal' ],
702	],
703	]
704	);
705
706
707	$this->end_controls_tab();
708
709	$this->end_controls_tabs();
710
711	$this->add_control(
712	'resp_align',
713	[
714	'label' => __( 'Hamburger Alignment', 'easy-elements' ),
715	'type' => Controls_Manager::CHOOSE,
716	'options' => [
717	'left' => [
718	'title' => __( 'Left', 'easy-elements' ),
719	'icon' => 'eicon-h-align-left',
720	],
721	'center' => [
722	'title' => __( 'Center', 'easy-elements' ),
723	'icon' => 'eicon-h-align-center',
724	],
725	'right' => [
726	'title' => __( 'Right', 'easy-elements' ),
727	'icon' => 'eicon-h-align-right',
728	],
729	],
730	'default' => 'right',
731	'description' => __( 'This is the alignement of menu icon on selected responsive breakpoints.', 'easy-elements' ),
732	'condition' => [
733	'layout' => [ 'horizontal' ],
734	'dropdown!' => 'none',
735	],
736	'selectors_dictionary' => [
737	'left' => 'margin-right: auto',
738	'center' => 'margin: 0 auto',
739	'right' => 'margin-left: auto',
740	],
741	'selectors' => [
742	'{{WRAPPER}} .eel-nav-menu__toggle' => '{{VALUE}}',
743	],
744	]
745	);
746
747
748	$this->add_control(
749	'dropdown_icon',
750	[
751	'label' => __( 'Hamburger Icon', 'easy-elements' ),
752	'type' => Controls_Manager::ICONS,
753	'label_block' => 'true',
754	'default' => [
755	'value' => 'fas fa-align-justify',
756	'library' => 'fa-solid',
757	],
758	'condition' => [
759	'layout' => [ 'horizontal' ],
760	'dropdown!' => 'none',
761	],
762	]
763	);
764
765	$this->end_controls_section();
766	}
767
768	/**
769	* Register Nav Menu General Controls.
770	*
771	* @since 1.3.0
772	* @access protected
773	* @return void
774	*/
775	protected function register_style_content_controls() {
776
777	$this->start_controls_section(
778	'section_style_main-menu',
779	[
780	'label' => __( 'Main Menu', 'easy-elements' ),
781	'tab' => Controls_Manager::TAB_STYLE,
782	]
783	);
784
785	$this->add_responsive_control(
786	'item_menu_padding',
787	[
788	'label' => esc_html__( 'Padding', 'easy-elements' ),
789	'type' => Controls_Manager::DIMENSIONS,
790	'selectors' => [
791	'{{WRAPPER}} .eel-nav-menu > .menu-item > a.eel-menu-item' =>
792	'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
793	],
794	]
795	);
796
797	$this->add_responsive_control(
798	'item_menu_margin',
799	[
800	'label' => esc_html__( 'Margin', 'easy-elements' ),
801	'type' => Controls_Manager::DIMENSIONS,
802	'selectors' => [
803	'{{WRAPPER}} .eel-nav-menu > .menu-item > a.eel-menu-item' =>
804	'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
805	],
806	]
807	);
808
809	$this->add_control(
810	'style_divider',
811	[
812	'type' => Controls_Manager::DIVIDER,
813	]
814	);
815
816	$this->add_group_control(
817	Group_Control_Typography::get_type(),
818	[
819	'name' => 'menu_typography',
820	'separator' => 'before',
821	'selector' => '{{WRAPPER}} a.eel-menu-item, {{WRAPPER}} a.eel-sub-menu-item',
822	]
823	);
824
825	$this->start_controls_tabs( 'tabs_menu_item_style' );
826
827	$this->start_controls_tab(
828	'tab_menu_item_normal',
829	[
830	'label' => __( 'Normal', 'easy-elements' ),
831	]
832	);
833
834	$this->add_control(
835	'color_menu_item',
836	[
837	'label' => __( 'Text Color', 'easy-elements' ),
838	'type' => Controls_Manager::COLOR,
839	'default' => '',
840	'selectors' => [
841	'{{WRAPPER}} .eel-nav-menu > .menu-item > a.eel-menu-item' => 'color: {{VALUE}}',
842	],
843	]
844	);
845
846	$this->add_control(
847	'bg_color_menu_item',
848	[
849	'label' => __( 'Background Color', 'easy-elements' ),
850	'type' => Controls_Manager::COLOR,
851	'default' => '',
852	'selectors' => [
853	'{{WRAPPER}} .eel-nav-menu > .menu-item > a.eel-menu-item' => 'background-color: {{VALUE}}',
854	],
855	]
856	);
857
858	$this->end_controls_tab();
859
860	$this->start_controls_tab(
861	'tab_menu_item_hover',
862	[
863	'label' => __( 'Hover', 'easy-elements' ),
864	]
865	);
866
867	$this->add_control(
868	'color_menu_item_hover',
869	[
870	'label' => __( 'Text Color', 'easy-elements' ),
871	'type' => Controls_Manager::COLOR,
872	'selectors' => [
873	'{{WRAPPER}} .eel-nav-menu > .menu-item:hover > a.eel-menu-item' => 'color: {{VALUE}}',
874	],
875	]
876	);
877
878	$this->add_control(
879	'bg_color_menu_item_hover',
880	[
881	'label' => __( 'Background Color', 'easy-elements' ),
882	'type' => Controls_Manager::COLOR,
883	'selectors' => [
884	'{{WRAPPER}} .eel-nav-menu > .menu-item:hover > a.eel-menu-item' => 'background-color: {{VALUE}}',
885	],
886	]
887	);
888
889	$this->end_controls_tab();
890
891	$this->start_controls_tab(
892	'tab_menu_item_active',
893	[
894	'label' => __( 'Active', 'easy-elements' ),
895	]
896	);
897
898	$this->add_control(
899	'color_menu_item_active',
900	[
901	'label' => __( 'Text Color', 'easy-elements' ),
902	'type' => Controls_Manager::COLOR,
903	'default' => '',
904	'selectors' => [
905	'{{WRAPPER}} .eel-nav-menu > .menu-item.current-menu-item > a.eel-menu-item, {{WRAPPER}} .eel-nav-menu > .menu-item.current_page_item > a.eel-menu-item, {{WRAPPER}} .eel-nav-menu > .menu-item.current-menu-ancestor > a.eel-menu-item' => 'color: {{VALUE}}',
906	],
907	]
908	);
909
910	$this->add_control(
911	'bg_color_menu_item_active',
912	[
913	'label' => __( 'Background Color', 'easy-elements' ),
914	'type' => Controls_Manager::COLOR,
915	'default' => '',
916	'selectors' => [
917	'{{WRAPPER}} .eel-nav-menu > .menu-item.current-menu-item > a.eel-menu-item, {{WRAPPER}} .eel-nav-menu > .menu-item.current_page_item > a.eel-menu-item, {{WRAPPER}} .eel-nav-menu > .menu-item.current-menu-ancestor > a.eel-menu-item' => 'background-color: {{VALUE}}',
918	],
919	]
920	);
921
922	$this->end_controls_tab();
923	$this->end_controls_tabs();
924	$this->end_controls_section();
925	}
926
927	/**
928	* Register Nav Menu General Controls.
929	*
930	* @since 1.3.0
931	* @access protected
932	* @return void
933	*/
934	protected function register_dropdown_content_controls() {
935	$this->start_controls_section(
936	'section_style_dropdown',
937	[
938	'label' => __( 'Dropdown', 'easy-elements' ),
939	'tab' => Controls_Manager::TAB_STYLE,
940	'condition' => [
941	'layout' => 'horizontal',
942	],
943	]
944	);
945
946	$this->add_control(
947	'dropdown_description',
948	[
949	'raw'=> __( '<b>Note:</b> On desktop, below style options will apply to the submenu. On mobile, this will apply to the entire menu.', 'easy-elements' ),
950	'type' => Controls_Manager::RAW_HTML,
951	'content_classes' => 'elementor-descriptor',
952	]
953	);
954
955	$this->start_controls_tabs( 'tabs_dropdown_item_style' );
956
957	$this->start_controls_tab(
958	'tab_dropdown_item_normal',
959	[
960	'label' => __( 'Normal', 'easy-elements' ),
961	]
962	);
963
964	$this->add_control(
965	'color_dropdown_item',
966	[
967	'label' => __( 'Text Color', 'easy-elements' ),
968	'type' => Controls_Manager::COLOR,
969	'default' => '',
970	'selectors' => [
971	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a' => 'color: {{VALUE}}',
972	],
973	]
974	);
975
976	$this->add_control(
977	'background_color_dropdown_item',
978	[
979	'label' => __( 'Background Color', 'easy-elements' ),
980	'type' => Controls_Manager::COLOR,
981	'default' => '#fff',
982	'selectors' => [
983	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a' => 'background-color: {{VALUE}}',
984	],
985	'separator' => 'after',
986	]
987	);
988
989	$this->end_controls_tab();
990
991	$this->start_controls_tab(
992	'tab_dropdown_item_hover',
993	[
994	'label' => __( 'Hover', 'easy-elements' ),
995	]
996	);
997
998	$this->add_control(
999	'color_dropdown_item_hover',
1000	[
1001	'label' => __( 'Text Color', 'easy-elements' ),
1002	'type' => Controls_Manager::COLOR,
1003	'default' => '',
1004	'selectors' => [
1005	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item:hover > a' => 'color: {{VALUE}}',
1006	],
1007	]
1008	);
1009
1010	$this->add_control(
1011	'background_color_dropdown_item_hover',
1012	[
1013	'label' => __( 'Background Color', 'easy-elements' ),
1014	'type' => Controls_Manager::COLOR,
1015	'default' => '',
1016	'selectors' => [
1017	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item:hover > a' => 'background-color: {{VALUE}}',
1018	],
1019	'separator' => 'after',
1020	]
1021	);
1022
1023	$this->end_controls_tab();
1024
1025	$this->start_controls_tab(
1026	'tab_dropdown_item_active',
1027	[
1028	'label' => __( 'Active', 'easy-elements' ),
1029	]
1030	);
1031
1032	$this->add_control(
1033	'color_dropdown_item_active',
1034	[
1035	'label' => __( 'Text Color', 'easy-elements' ),
1036	'type' => Controls_Manager::COLOR,
1037	'default' => '',
1038	'selectors' => [
1039	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item.current-menu-item > a, {{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item.current_page_item > a, {{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item.current-menu-ancestor > a
1040	' => 'color: {{VALUE}}',
1041
1042	],
1043	]
1044	);
1045
1046	$this->add_control(
1047	'background_color_dropdown_item_active',
1048	[
1049	'label' => __( 'Background Color', 'easy-elements' ),
1050	'type' => Controls_Manager::COLOR,
1051	'default' => '',
1052	'selectors' => [
1053	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item.current-menu-item > a, {{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item.current_page_item > a, {{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item.current-menu-ancestor > a' => 'background-color: {{VALUE}}',
1054	],
1055	'separator' => 'after',
1056
1057	]
1058	);
1059	$this->end_controls_tab();
1060	$this->end_controls_tabs();
1061
1062	$this->add_group_control(
1063	Group_Control_Typography::get_type(),
1064	[
1065	'name' => 'dropdown_typography',
1066	'separator' => 'before',
1067	'selector' => '
1068	{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a',
1069	'condition' => [
1070	'layout' => 'horizontal',
1071	],
1072	]
1073	);
1074
1075	$this->add_group_control(
1076	\Elementor\Group_Control_Border::get_type(),
1077	[
1078	'name' => 'dropdown_item_border',
1079	'selector' => '{{WRAPPER}} .eel-nav-menu ul.sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a',
1080	'condition' => [
1081	'layout' => 'horizontal',
1082	],
1083	]
1084	);
1085
1086	$this->add_group_control(
1087	Group_Control_Box_Shadow::get_type(),
1088	[
1089	'name' => 'dropdown_box_shadow',
1090	'selector' => '{{WRAPPER}} .eel-nav-menu .sub-menu:not(.easyel--elementor-template-mega-menu)',
1091	'separator' => 'after',
1092	'condition' => [
1093	'layout' => 'horizontal',
1094	],
1095	]
1096	);
1097
1098	$this->add_control(
1099	'dropdown_border_radius',
1100	[
1101	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1102	'type' => Controls_Manager::DIMENSIONS,
1103	'selectors' => [
1104	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu)' =>
1105	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1106	],
1107	'condition' => [
1108	'layout' => 'horizontal',
1109	],
1110	]
1111	);
1112
1113	$this->add_responsive_control(
1114	'ul__full_padding',
1115	[
1116	'label' => esc_html__( 'Full Padding', 'easy-elements' ),
1117	'type' => Controls_Manager::DIMENSIONS,
1118	'size_units' => [ 'px', 'em', '%' ],
1119	'selectors' => [
1120	'{{WRAPPER}} .eel-nav-menu ul.sub-menu:not(.easyel--elementor-template-mega-menu)' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1121	],
1122	'condition' => [
1123	'layout' => 'horizontal',
1124	],
1125	]
1126	);
1127
1128	$this->add_responsive_control(
1129	'item__full_padding',
1130	[
1131	'label' => esc_html__( 'Item Padding', 'easy-elements' ),
1132	'type' => Controls_Manager::DIMENSIONS,
1133	'size_units' => [ 'px', 'em', '%' ],
1134	'selectors' => [
1135	'{{WRAPPER}} .eel-nav-menu ul.sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1136	],
1137	'condition' => [
1138	'layout' => 'horizontal',
1139	],
1140	]
1141	);
1142
1143	$this->add_responsive_control(
1144	'width_dropdown_item',
1145	[
1146	'label' => __( 'Dropdown Width (px)', 'easy-elements' ),
1147	'type' => Controls_Manager::SLIDER,
1148	'range' => [
1149	'px' => [
1150	'min' => 0,
1151	'max' => 500,
1152	],
1153	],
1154	'default' => [
1155	'size' => '220',
1156	'unit' => 'px',
1157	],
1158	'selectors' => [
1159	'{{WRAPPER}} ul.sub-menu:not(.easyel--elementor-template-mega-menu)' => 'width: {{SIZE}}{{UNIT}}',
1160	],
1161	'condition' => [
1162	'layout' => 'horizontal',
1163	],
1164	'frontend_available' => true,
1165	]
1166	);
1167
1168
1169	$this->add_responsive_control(
1170	'icon_size',
1171	[
1172	'label' => __( 'Icon Size', 'easy-elements' ),
1173	'type' => Controls_Manager::SLIDER,
1174	'range' => [
1175	'px' => [
1176	'min' => 15,
1177	'max' => 25,
1178	],
1179	],
1180	'selectors' => [
1181	'{{WRAPPER}} .eel-nav-menu .menu-item-has-children a.eel-menu-item::before' => 'font-size: {{SIZE}}px;',
1182	],
1183	'condition' => [
1184	'layout' => [ 'horizontal' ],
1185	],
1186	'frontend_available' => true,
1187	]
1188	);
1189
1190	$this->add_responsive_control(
1191	'icon_distance_from_menu',
1192	[
1193	'label' => __( 'Icon Top Distance', 'easy-elements' ),
1194	'type' => Controls_Manager::SLIDER,
1195	'range' => [
1196	'px' => [
1197	'min' => -100,
1198	'max' => 100,
1199	],
1200	],
1201	'selectors' => [
1202	'{{WRAPPER}} .eel-nav-menu .menu-item-has-children a.eel-menu-item::before' => 'top: {{SIZE}}%;',
1203	],
1204	'condition' => [
1205	'layout' => [ 'horizontal' ],
1206	],
1207	'frontend_available' => true,
1208	]
1209	);
1210
1211
1212	$this->end_controls_section();
1213
1214	$this->start_controls_section(
1215	'style_toggle',
1216	[
1217	'label' => __( 'Menu Trigger & Close Icon', 'easy-elements' ),
1218	'tab' => Controls_Manager::TAB_STYLE,
1219	]
1220	);
1221
1222	$this->start_controls_tabs( 'tabs_toggle_style' );
1223
1224	$this->start_controls_tab(
1225	'toggle_style_normal',
1226	[
1227	'label' => __( 'Normal', 'easy-elements' ),
1228	]
1229	);
1230
1231	$this->add_control(
1232	'toggle_color',
1233	[
1234	'label' => __( 'Color', 'easy-elements' ),
1235	'type' => Controls_Manager::COLOR,
1236	'selectors' => [
1237	'{{WRAPPER}} div.eel-nav-menu-icon' => 'color: {{VALUE}}',
1238	'{{WRAPPER}} div.eel-nav-menu-icon svg' => 'fill: {{VALUE}}',
1239	],
1240	]
1241	);
1242
1243	$this->add_control(
1244	'toggle_background_color',
1245	[
1246	'label' => __( 'Background Color', 'easy-elements' ),
1247	'type' => Controls_Manager::COLOR,
1248	'selectors' => [
1249	'{{WRAPPER}} .eel-nav-menu-icon' => 'background-color: {{VALUE}}; padding: 0.35em;',
1250	],
1251	]
1252	);
1253
1254	$this->end_controls_tab();
1255
1256	$this->start_controls_tab(
1257	'toggle_hover',
1258	[
1259	'label' => __( 'Hover', 'easy-elements' ),
1260	]
1261	);
1262
1263	$this->add_control(
1264	'toggle_hover_color',
1265	[
1266	'label' => __( 'Color', 'easy-elements' ),
1267	'type' => Controls_Manager::COLOR,
1268	'selectors' => [
1269	'{{WRAPPER}} div.eel-nav-menu-icon:hover' => 'color: {{VALUE}}',
1270	'{{WRAPPER}} div.eel-nav-menu-icon:hover svg' => 'fill: {{VALUE}}',
1271
1272	],
1273	]
1274	);
1275
1276	$this->add_control(
1277	'toggle_hover_background_color',
1278	[
1279	'label' => __( 'Background Color', 'easy-elements' ),
1280	'type' => Controls_Manager::COLOR,
1281	'selectors' => [
1282	'{{WRAPPER}} .eel-nav-menu-icon:hover' => 'background-color: {{VALUE}}; padding: 0.35em;',
1283	],
1284	]
1285	);
1286
1287	$this->end_controls_tab();
1288
1289	$this->end_controls_tabs();
1290
1291	$this->add_responsive_control(
1292	'toggle_size',
1293	[
1294	'label' => __( 'Icon Size', 'easy-elements' ),
1295	'type' => Controls_Manager::SLIDER,
1296	'range' => [
1297	'px' => [
1298	'min' => 15,
1299	],
1300	],
1301	'selectors' => [
1302	'{{WRAPPER}} .eel-nav-menu-icon' => 'font-size: {{SIZE}}{{UNIT}}',
1303	'{{WRAPPER}} .eel-nav-menu-icon svg' => 'font-size: {{SIZE}}px;line-height: {{SIZE}}px;height: {{SIZE}}px;width: {{SIZE}}px;',
1304	],
1305	'frontend_available' => true,
1306	'separator' => 'before',
1307	]
1308	);
1309
1310	$this->add_responsive_control(
1311	'toggle_border_width',
1312	[
1313	'label' => __( 'Border Width', 'easy-elements' ),
1314	'type' => Controls_Manager::SLIDER,
1315	'range' => [
1316	'px' => [
1317	'max' => 10,
1318	],
1319	],
1320	'selectors' => [
1321	'{{WRAPPER}} .eel-nav-menu-icon' => 'border-width: {{SIZE}}{{UNIT}}; padding: 0.35em;',
1322	],
1323	'frontend_available' => true,
1324	]
1325	);
1326
1327	$this->add_responsive_control(
1328	'toggle_border_radius',
1329	[
1330	'label' => __( 'Border Radius', 'easy-elements' ),
1331	'type' => Controls_Manager::SLIDER,
1332	'size_units' => [ 'px', '%' ],
1333	'selectors' => [
1334	'{{WRAPPER}} .eel-nav-menu-icon' => 'border-radius: {{SIZE}}{{UNIT}}',
1335	],
1336	'frontend_available' => true,
1337	]
1338	);
1339
1340	$this->end_controls_section();
1341	}
1342
1343	/**
1344	* Add itemprop for Navigation Schema.
1345	*
1346	* @since 1.5.2
1347	* @param string $atts link attributes.
1348	* @access public
1349	* @return string
1350	*/
1351	public function handle_link_attrs( $atts ) {
1352
1353	$atts .= ' itemprop="url"';
1354	return $atts;
1355	}
1356
1357	/**
1358	* Add itemprop to the li tag of Navigation Schema.
1359	*
1360	* @since 1.6.0
1361	* @param string $value link attributes.
1362	* @access public
1363	* @return string
1364	*/
1365	public function handle_li_values( $value ) {
1366
1367	$value .= ' itemprop="name"';
1368	return $value;
1369	}
1370
1371
1372	/**
1373	* Get the menu and close icon HTML.
1374	*
1375	* @since 1.5.2
1376	* @param array $settings Widget settings array.
1377	* @access public
1378	* @return array
1379	*/
1380	public function get_menu_close_icon( $settings ) {
1381	$menu_icon = '';
1382	$close_icon = '';
1383	$icons = [];
1384	$icon_settings = [
1385	$settings['dropdown_icon'],
1386	//$settings['dropdown_close_icon'],
1387	];
1388
1389	foreach ( $icon_settings as $icon ) {
1390	if ( $this->is_elementor_updated() ) {
1391	ob_start();
1392	\Elementor\Icons_Manager::render_icon(
1393	$icon,
1394	[
1395	'aria-hidden' => 'true',
1396	'tabindex' => '0',
1397	]
1398	);
1399	$menu_icon = ob_get_clean();
1400	} else {
1401	$menu_icon = '<i class="' . esc_attr( $icon ) . '" aria-hidden="true" tabindex="0"></i>';
1402	}
1403
1404	array_push( $icons, $menu_icon );
1405	}
1406
1407	return $icons;
1408	}
1409
1410	/**
1411	* Render Nav Menu output on the frontend.
1412	*
1413	* Written in PHP and used to generate the final HTML.
1414	*
1415	* @since 1.3.0
1416	* @access protected
1417	* @return (void \| false)
1418	*/
1419	protected function render() {
1420
1421	$menus = $this->get_available_menus();
1422
1423	if ( empty( $menus ) ) {
1424	return;
1425	}
1426
1427	$settings = $this->get_settings_for_display();
1428
1429	$menu_close_icons = [];
1430	$menu_close_icons = $this->get_menu_close_icon( $settings );
1431
1432	$enableSticky = isset($settings['enable_sticky_header']) && 'yes' === $settings['enable_sticky_header'];
1433	$enablePadding = isset($settings['disable_top_padding']) && 'yes' === $settings['disable_top_padding'];
1434
1435	if ( isset( $settings['enable_sticky_header'] ) && 'yes' === $settings['enable_sticky_header'] ) {
1436	$GLOBALS['eel_force_sticky_header'] = true;
1437	wp_enqueue_script(
1438	'eel-sticky-header',
1439	plugin_dir_url( dirname( dirname( __FILE__ ) ) ) . 'widgets/navigation-menu/js/eel-sticky-header.js',
1440	[ 'jquery' ],
1441	EASYELEMENTS_VER,
1442	true
1443	);
1444
1445	wp_localize_script('eel-sticky-header', 'eelStickyHeaderSettings', [
1446	'enableSticky' => $enableSticky,
1447	'enablePadding' => $enablePadding
1448	]);
1449	}
1450
1451	$args = [
1452	'echo' => false,
1453	'menu' => $settings['menu'],
1454	'menu_class' => 'eel-nav-menu',
1455	'menu_id' => 'menu-' . $this->get_nav_menu_index() . '-' . $this->get_id(),
1456	'fallback_cb' => '__return_empty_string',
1457	'walker' => new \Easyel_Menu_Walker(),
1458	];
1459
1460	$mobile_args = [
1461	'echo' => false,
1462	'menu' => $settings['menu'],
1463	'menu_class' => 'eel-nav-menu eel-nav-menu-mobile',
1464	'fallback_cb' => '__return_empty_string',
1465	'walker' => new \Easyel_Menu_Walker(),
1466	'is_mobile_menu' => true,
1467	];
1468
1469	$this->add_render_attribute(
1470	'eel-main-menu',
1471	'class',
1472	[
1473	'eel-nav-menu',
1474	'eel-layout-' . $settings['layout'],
1475	]
1476	);
1477
1478	$this->add_render_attribute( 'eel-main-menu', 'class', 'eel-nav-menu-layout' );
1479
1480	$this->add_render_attribute( 'eel-main-menu', 'class', $settings['layout'] );
1481
1482	$this->add_render_attribute( 'eel-main-menu', 'data-layout', $settings['layout'] );
1483
1484	if ( 'yes' === $settings['fixed_top_sticky'] ) {
1485	$this->add_render_attribute( 'eel-main-menu', 'class', 'eel-fixed-top-sticky' );
1486
1487	$inline_js = "
1488	document.addEventListener('DOMContentLoaded', function() {
1489	var header = document.querySelector('header.easy-site-header');
1490	if (header) {
1491	header.classList.add('eel-fixed-top-sticky');
1492	}
1493	});
1494	";
1495
1496	wp_add_inline_script( 'eel-sticky-header', $inline_js );
1497	}
1498
1499	$this->add_render_attribute(
1500	'eel-nav-menu',
1501	'class',
1502	[
1503	'eel-nav-menu__layout-' . $settings['layout'],
1504	]
1505	);
1506
1507	$icon_alignment = $settings['icon_alignment_vertical'] ?? 'align_left';
1508	$this->add_render_attribute(
1509	'eel-main-menu',
1510	'class',
1511	'icon-' . $icon_alignment
1512	);
1513
1514	if ( 'vertical' === $settings['layout'] && !empty($settings['menu_icon_vertical']['value']) ) {
1515	$this->add_render_attribute('eel-nav-menu', 'data-vertical-icon', $settings['menu_icon_vertical']['value']);
1516	}
1517
1518	$animation_class = !empty($settings['submenu_animation']) ? $settings['submenu_animation'] : 'eel_animation_slide_down';
1519	if ( 'horizontal' === $settings['layout'] ) {
1520	$this->add_render_attribute('eel-nav-menu', 'class', $animation_class);
1521	}
1522	?>
1523
1524	<div <?php $this->print_render_attribute_string( 'eel-main-menu' ); ?>>
1525	<div role="button" class="eel-nav-menu__toggle elementor-clickable">
1526	<span class="screen-reader-text"><?php esc_html_e( 'Menu', 'easy-elements' ); ?></span>
1527	<div class="eel-nav-menu-icon">
1528	<?php
1529	if ( isset( $menu_close_icons[0] ) ) {
1530	$menu_close_icon = str_replace( 'tabindex="0"', '', $menu_close_icons[0] );
1531	$allowed_svg = [
1532	'svg' => [
1533	'class' => true,
1534	'xmlns' => true,
1535	'width' => true,
1536	'height' => true,
1537	'viewbox' => true,
1538	'aria-hidden' => true,
1539	'role' => true,
1540	'focusable' => true,
1541	],
1542	'path' => [
1543	'd' => true,
1544	'fill' => true,
1545	],
1546	'g' => [ 'fill' => true ],
1547	'title' => [],
1548	];
1549	echo wp_kses( $menu_close_icon, $allowed_svg );
1550	}
1551	?>
1552	</div>
1553	</div>
1554
1555	<?php
1556	static $mobile_menu_rendered = false;
1557	if ( ! $mobile_menu_rendered ) {
1558	$mobile_menu_rendered = true;
1559	$settings = $this->get_settings_for_display();
1560	$open_position = !empty( $settings['mobile_menu_open_position'] ) ? $settings['mobile_menu_open_position'] : 'right';
1561	?>
1562	<nav class="sidebar-on-mobile eel-mobile-open-position-<?php echo esc_attr( $open_position ); ?>">
1563	<span class="eel-nav-menu-icon eel-mobile-menu-icon-<?php echo esc_attr( $open_position ); ?>">
1564	<i class="unicon-close"></i>
1565	</span>
1566	<?php echo wp_nav_menu( $mobile_args ); ?>
1567	</nav>
1568	<?php
1569	}
1570	?>
1571
1572	<nav <?php $this->print_render_attribute_string( 'eel-nav-menu' ); ?>>
1573	<?php echo wp_nav_menu( $args ); ?>
1574	</nav>
1575	</div>
1576	<?php
1577	}
1578	}