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

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

1,796 lines 49.2 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_dictionary' => [
458	'left' => 'flex-start',
459	'center' => 'center',
460	'right' => 'flex-end',
461	'justify' => 'space-between',
462	],
463	'selectors' => [
464	'{{WRAPPER}} .eel-nav-menu__layout-horizontal, {{WRAPPER}} .eel-nav-menu__layout-horizontal .eel-nav-menu' => 'justify-content: {{VALUE}};',
465	],
466	]
467	);
468
469
470	$this->add_responsive_control(
471	'navmenu_align_text',
472	[
473	'label' => __( 'Menu Alignment', 'easy-elements' ),
474	'type' => \Elementor\Controls_Manager::CHOOSE,
475	'options' => [
476	'left' => [
477	'title' => __( 'Left', 'easy-elements' ),
478	'icon' => 'eicon-h-align-left',
479	],
480	'center' => [
481	'title' => __( 'Center', 'easy-elements' ),
482	'icon' => 'eicon-h-align-center',
483	],
484	'right' => [
485	'title' => __( 'Right', 'easy-elements' ),
486	'icon' => 'eicon-h-align-right',
487	],
488	'justify' => [
489	'title' => __( 'Justify', 'easy-elements' ),
490	'icon' => 'eicon-h-align-stretch',
491	],
492	],
493	'default' => '',
494	'condition' => [
495	'layout' => [ 'vertical' ],
496	],
497	'selectors' => [
498	'{{WRAPPER}} .eel-nav-menu li.menu-item' => 'text-align: {{VALUE}};',
499	'{{WRAPPER}} .eel-nav-menu li.menu-item a' => 'max-width: 100%; width: auto; display: block;',
500	],
501	]
502	);
503
504	$this->add_control(
505	'submenu_animation',
506	[
507	'label' => __( 'Dropdown Animation', 'easy-elements' ),
508	'type' => Controls_Manager::SELECT,
509	'default' => 'eel_animation_slide_down',
510	'options' => [
511	'eel_animation_slide_down' => __( 'Animation Down', 'easy-elements' ),
512	'eel_animation_slide_up' => __( 'Animation Up', 'easy-elements' ),
513	'eel_animation_fade' => __( 'Animation Fade', 'easy-elements' ),
514	'eel_animation_right' => __( 'Animation Right', 'easy-elements' ),
515	'eel_animation_left' => __( 'Animation Left', 'easy-elements' ),
516	'eel_animation_zoom' => __( 'Animation Zoom', 'easy-elements' ),
517	],
518	'condition' => [
519	'layout' => 'horizontal',
520	],
521	]
522	);
523
524	$this->add_control(
525	'menu_icon_vertical',
526	[
527	'label' => __('Icon', 'easy-elements'),
528	'type' => Controls_Manager::ICONS,
529	'condition' => [
530	'layout' => 'vertical',
531	],
532	]
533	);
534
535	$this->add_responsive_control(
536	'icon_alignment_vertical',
537	[
538	'label' => __( 'Alignment', 'easy-elements' ),
539	'type' => \Elementor\Controls_Manager::CHOOSE,
540	'options' => [
541	'align_left' => [
542	'title' => __( 'Left', 'easy-elements' ),
543	'icon' => 'eicon-h-align-left',
544	],
545	'align_right' => [
546	'title' => __( 'Right', 'easy-elements' ),
547	'icon' => 'eicon-h-align-right',
548	],
549	],
550	'default' => 'align_left',
551	'condition' => [
552	'layout' => 'vertical',
553	],
554	'selectors_dictionary' => [
555	'align_left' => '-1',
556	'align_right' => '1',
557	],
558	'selectors' => [
559	'{{WRAPPER}} .eel-layout-vertical .eel-nav-menu li>.eel-menu-item .eel-menu-dynamic-icon' => 'order: {{VALUE}};',
560	],
561	]
562	);
563
564	$this->add_responsive_control(
565	'icon_margin_vertical',
566	[
567	'label' => esc_html__( 'Margin', 'easy-elements' ),
568	'type' => \Elementor\Controls_Manager::DIMENSIONS,
569	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
570	'selectors' => [
571	'{{WRAPPER}} .eel-layout-vertical .eel-nav-menu li>.eel-menu-item .eel-menu-dynamic-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
572	],
573	'condition' => [
574	'layout' => 'vertical',
575	],
576	]
577	);
578
579	$this->add_control(
580	'heading_responsive',
581	[
582	'type' => Controls_Manager::HEADING,
583	'label' => __( 'Responsive Menu Settings', 'easy-elements' ),
584	'separator' => 'before',
585	'condition' => [
586	'layout' => [ 'horizontal' ],
587	],
588	]
589	);
590
591	$this->add_control(
592	'dropdown',
593	[
594	'label' => __( 'Breakpoint', 'easy-elements' ),
595	'type' => Controls_Manager::SELECT,
596	'default' => 'tablet',
597	'options' => [
598	'tablet' => __( 'Tablet (1025px >)', 'easy-elements' ),
599	'none' => __( 'None', 'easy-elements' ),
600	],
601	'prefix_class' => 'eel-nav-menu__breakpoint-',
602	'condition' => [
603	'layout' => [ 'horizontal' ],
604	],
605	'render_type' => 'template',
606	]
607	);
608
609	$this->add_control(
610	'mobile_menu_open_position',
611	[
612	'label' => __( 'Mobile Menu Open Position', 'easy-elements' ),
613	'type' => Controls_Manager::SELECT,
614	'default' => 'right',
615	'options' => [
616	'top' => __( 'Top', 'easy-elements' ),
617	'right' => __( 'Right', 'easy-elements' ),
618	],
619	'condition' => [
620	'layout' => [ 'horizontal' ],
621	],
622	]
623	);
624
625	$this->add_responsive_control(
626	'mobile_nav_sidebar_width',
627	[
628	'label' => __( 'Menu Sidebar Width', 'easy-elements' ),
629	'type' => \Elementor\Controls_Manager::SLIDER,
630	'size_units' => [ 'px', '%', 'vw' ],
631	'range' => [
632	'px' => [
633	'min' => 200,
634	'max' => 500,
635	],
636	'%' => [
637	'min' => 50,
638	'max' => 100,
639	],
640	'vw' => [
641	'min' => 20,
642	'max' => 100,
643	],
644	],
645	'selectors' => [
646	'.sidebar-on-mobile[data-nav-id="{{ID}}"]' => 'max-width: {{SIZE}}{{UNIT}} !important;',
647	],
648	]
649	);
650
651
652	$this->start_controls_tabs( 'tabs_menu_item_style_mobile' );
653
654	$this->start_controls_tab(
655	'tab_menu_item_normal_m',
656	[
657	'label' => __( 'Normal', 'easy-elements' ),
658	'condition' => [
659	'layout' => [ 'horizontal' ],
660	],
661	]
662	);
663
664	$this->add_control(
665	'color_menu_item_m',
666	[
667	'label' => __( 'Text Color', 'easy-elements' ),
668	'type' => Controls_Manager::COLOR,
669	'selectors' => [
670	'.sidebar-on-mobile[data-nav-id="{{ID}}"] li.menu-item a' => 'color: {{VALUE}} !important;',
671	],
672	'condition' => [
673	'layout' => [ 'horizontal' ],
674	],
675	]
676	);
677
678	$this->add_control(
679	'bg_color_full',
680	[
681	'label' => esc_html__( 'Background Color (Full Sidebar)', 'easy-elements' ),
682	'type' => Controls_Manager::COLOR,
683	'selectors' => [
684	'.sidebar-on-mobile[data-nav-id="{{ID}}"]' => 'background-color: {{VALUE}};',
685	],
686	]
687	);
688
689	$this->add_control(
690	'dropdown_item_bg',
691	[
692	'label' => esc_html__( 'Background Color', 'easy-elements' ),
693	'type' => Controls_Manager::COLOR,
694	'selectors' => [
695	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .sub-menu:not(.easyel--elementor-template-mega-menu) li > a' => 'background-color: {{VALUE}};',
696	],
697	]
698	);
699
700	$this->add_group_control(
701	\Elementor\Group_Control_Typography::get_type(),
702	[
703	'name' => 'color_menu_item_m_typography',
704	'label' => esc_html__('Typography', 'easy-elements' ),
705	'selector' => '.sidebar-on-mobile[data-nav-id="{{ID}}"] li.menu-item a',
706	'condition' => [
707	'layout' => [ 'horizontal' ],
708	],
709	]
710	);
711
712	$this->end_controls_tab();
713
714	$this->start_controls_tab(
715	'tab_menu_item_hover_m',
716	[
717	'label' => __( 'Hover', 'easy-elements' ),
718	'condition' => [
719	'layout' => [ 'horizontal' ],
720	],
721	]
722	);
723
724	$this->add_control(
725	'color_menu_item_hover_m',
726	[
727	'label' => __( 'Text Color', 'easy-elements' ),
728	'type' => Controls_Manager::COLOR,
729	'selectors' => [
730	'.sidebar-on-mobile[data-nav-id="{{ID}}"] li.menu-item a:hover, .sidebar-on-mobile[data-nav-id="{{ID}}"] li.menu-item a.highlighted' => 'color: {{VALUE}} !important;',
731	],
732	'condition' => [
733	'layout' => [ 'horizontal' ],
734	],
735	]
736	);
737
738	$this->add_control(
739	'dropdown_item_bg_hover',
740	[
741	'label' => esc_html__( 'Background Color', 'easy-elements' ),
742	'type' => Controls_Manager::COLOR,
743	'selectors' => [
744	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .sub-menu:not(.easyel--elementor-template-mega-menu) li > a:hover' => 'background-color: {{VALUE}};',
745	],
746	]
747	);
748
749	$this->end_controls_tab();
750
751	$this->start_controls_tab(
752	'tab_menu_item_active_m',
753	[
754	'label' => __( 'Active', 'easy-elements' ),
755	'condition' => [
756	'layout' => [ 'horizontal' ],
757	],
758	]
759	);
760
761	$this->add_control(
762	'color_menu_item_active_m',
763	[
764	'label' => __( 'Text Color', 'easy-elements' ),
765	'type' => Controls_Manager::COLOR,
766	'selectors' => [
767	'.sidebar-on-mobile[data-nav-id="{{ID}}"] li.menu-item.current-menu-item a, .sidebar-on-mobile[data-nav-id="{{ID}}"] li.menu-item.current-menu-ancestor a, .sidebar-on-mobile[data-nav-id="{{ID}}"] li.menu-item a.eel-active' => 'color: {{VALUE}} !important;',
768	],
769	'condition' => [
770	'layout' => [ 'horizontal' ],
771	],
772	]
773	);
774
775	$this->add_control(
776	'dropdown_item_bg_active',
777	[
778	'label' => esc_html__( 'Background Color', 'easy-elements' ),
779	'type' => Controls_Manager::COLOR,
780	'selectors' => [
781	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .sub-menu:not(.easyel--elementor-template-mega-menu) li.current-menu-item > a' => 'background-color: {{VALUE}};',
782	],
783	]
784	);
785
786
787	$this->end_controls_tab();
788
789	$this->end_controls_tabs();
790
791	$this->add_responsive_control(
792	'resp_align',
793	[
794	'label' => __( 'Hamburger Alignment', 'easy-elements' ),
795	'type' => Controls_Manager::CHOOSE,
796	'options' => [
797	'left' => [
798	'title' => __( 'Left', 'easy-elements' ),
799	'icon' => 'eicon-h-align-left',
800	],
801	'center' => [
802	'title' => __( 'Center', 'easy-elements' ),
803	'icon' => 'eicon-h-align-center',
804	],
805	'right' => [
806	'title' => __( 'Right', 'easy-elements' ),
807	'icon' => 'eicon-h-align-right',
808	],
809	],
810	'default' => 'right',
811	'description' => __( 'This is the alignment of menu icon on selected responsive breakpoints.', 'easy-elements' ),
812	'condition' => [
813	'layout' => [ 'horizontal' ],
814	'dropdown!' => 'none',
815	],
816	'selectors_dictionary' => [
817	'left' => 'margin-right: auto',
818	'center' => 'margin: 0 auto',
819	'right' => 'margin-left: auto',
820	],
821	'selectors' => [
822	'{{WRAPPER}} .eel-nav-menu__toggle' => '{{VALUE}}',
823	],
824	]
825	);
826
827
828	$this->add_control(
829	'dropdown_icon',
830	[
831	'label' => __( 'Choose Hamburger Icon', 'easy-elements' ),
832	'type' => Controls_Manager::ICONS,
833	'label_block' => 'true',
834	'default' => [
835	'value' => 'fas fa-align-justify',
836	'library' => 'fa-solid',
837	],
838	'condition' => [
839	'layout' => [ 'horizontal' ],
840	'dropdown!' => 'none',
841	],
842	]
843	);
844
845	$this->add_control(
846	'mobile_close_icon',
847	[
848	'label' => esc_html__( 'Choose Close Icon', 'easy-elements' ),
849	'type' => \Elementor\Controls_Manager::ICONS,
850	'fa4compatibility' => 'icon',
851	'default' => [],
852	'condition' => [
853	'layout' => [ 'horizontal' ],
854	'dropdown!' => 'none',
855	]
856	]
857	);
858
859	$this->end_controls_section();
860	}
861
862	/**
863	* Register Nav Menu General Controls.
864	*
865	* @since 1.3.0
866	* @access protected
867	* @return void
868	*/
869	protected function register_style_content_controls() {
870
871	$this->start_controls_section(
872	'section_style_main-menu',
873	[
874	'label' => __( 'Main Menu', 'easy-elements' ),
875	'tab' => Controls_Manager::TAB_STYLE,
876	]
877	);
878
879	$this->add_responsive_control(
880	'item_menu_padding',
881	[
882	'label' => esc_html__( 'Padding', 'easy-elements' ),
883	'type' => Controls_Manager::DIMENSIONS,
884	'selectors' => [
885	'{{WRAPPER}} .eel-nav-menu > .menu-item > a.eel-menu-item' =>
886	'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
887	],
888	]
889	);
890
891	$this->add_responsive_control(
892	'item_menu_margin',
893	[
894	'label' => esc_html__( 'Margin', 'easy-elements' ),
895	'type' => Controls_Manager::DIMENSIONS,
896	'selectors' => [
897	'{{WRAPPER}} .eel-nav-menu > .menu-item > a.eel-menu-item' =>
898	'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
899	],
900	]
901	);
902
903	$this->add_control(
904	'style_divider',
905	[
906	'type' => Controls_Manager::DIVIDER,
907	]
908	);
909
910	$this->add_group_control(
911	Group_Control_Typography::get_type(),
912	[
913	'name' => 'menu_typography',
914	'separator' => 'before',
915	'selector' => '{{WRAPPER}} a.eel-menu-item, {{WRAPPER}} a.eel-sub-menu-item',
916	]
917	);
918
919	$this->start_controls_tabs( 'tabs_menu_item_style' );
920
921	$this->start_controls_tab(
922	'tab_menu_item_normal',
923	[
924	'label' => __( 'Normal', 'easy-elements' ),
925	]
926	);
927
928	$this->add_control(
929	'color_menu_item',
930	[
931	'label' => __( 'Text Color', 'easy-elements' ),
932	'type' => Controls_Manager::COLOR,
933	'default' => '',
934	'selectors' => [
935	'{{WRAPPER}} .eel-nav-menu > .menu-item > a.eel-menu-item' => 'color: {{VALUE}}',
936	],
937	]
938	);
939
940	$this->add_control(
941	'bg_color_menu_item',
942	[
943	'label' => __( 'Background Color', 'easy-elements' ),
944	'type' => Controls_Manager::COLOR,
945	'default' => '',
946	'selectors' => [
947	'{{WRAPPER}} .eel-nav-menu > .menu-item > a.eel-menu-item' => 'background-color: {{VALUE}}',
948	],
949	]
950	);
951
952	$this->end_controls_tab();
953
954	$this->start_controls_tab(
955	'tab_menu_item_hover',
956	[
957	'label' => __( 'Hover', 'easy-elements' ),
958	]
959	);
960
961	$this->add_control(
962	'color_menu_item_hover',
963	[
964	'label' => __( 'Text Color', 'easy-elements' ),
965	'type' => Controls_Manager::COLOR,
966	'selectors' => [
967	'{{WRAPPER}} .eel-nav-menu > .menu-item:hover > a.eel-menu-item' => 'color: {{VALUE}}',
968	],
969	]
970	);
971
972	$this->add_control(
973	'bg_color_menu_item_hover',
974	[
975	'label' => __( 'Background Color', 'easy-elements' ),
976	'type' => Controls_Manager::COLOR,
977	'selectors' => [
978	'{{WRAPPER}} .eel-nav-menu > .menu-item:hover > a.eel-menu-item' => 'background-color: {{VALUE}}',
979	],
980	]
981	);
982
983	$this->end_controls_tab();
984
985	$this->start_controls_tab(
986	'tab_menu_item_active',
987	[
988	'label' => __( 'Active', 'easy-elements' ),
989	]
990	);
991
992	$this->add_control(
993	'color_menu_item_active',
994	[
995	'label' => __( 'Text Color', 'easy-elements' ),
996	'type' => Controls_Manager::COLOR,
997	'default' => '',
998	'selectors' => [
999	'{{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}}',
1000	],
1001	]
1002	);
1003
1004	$this->add_control(
1005	'bg_color_menu_item_active',
1006	[
1007	'label' => __( 'Background Color', 'easy-elements' ),
1008	'type' => Controls_Manager::COLOR,
1009	'default' => '',
1010	'selectors' => [
1011	'{{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}}',
1012	],
1013	]
1014	);
1015
1016	$this->end_controls_tab();
1017	$this->end_controls_tabs();
1018	$this->end_controls_section();
1019	}
1020
1021	/**
1022	* Register Nav Menu General Controls.
1023	*
1024	* @since 1.3.0
1025	* @access protected
1026	* @return void
1027	*/
1028	protected function register_dropdown_content_controls() {
1029	$this->start_controls_section(
1030	'section_style_dropdown',
1031	[
1032	'label' => __( 'Dropdown', 'easy-elements' ),
1033	'tab' => Controls_Manager::TAB_STYLE,
1034	'condition' => [
1035	'layout' => ['horizontal'],
1036	],
1037	]
1038	);
1039
1040	$this->add_control(
1041	'dropdown_description',
1042	[
1043	'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' ),
1044	'type' => Controls_Manager::RAW_HTML,
1045	'content_classes' => 'elementor-descriptor',
1046	]
1047	);
1048
1049	$this->start_controls_tabs( 'tabs_dropdown_item_style' );
1050
1051	$this->start_controls_tab(
1052	'tab_dropdown_item_normal',
1053	[
1054	'label' => __( 'Normal', 'easy-elements' ),
1055	]
1056	);
1057
1058	$this->add_control(
1059	'color_dropdown_item',
1060	[
1061	'label' => __( 'Text Color', 'easy-elements' ),
1062	'type' => Controls_Manager::COLOR,
1063	'default' => '',
1064	'selectors' => [
1065	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a' => 'color: {{VALUE}}',
1066	],
1067	]
1068	);
1069
1070	$this->add_control(
1071	'background_color_dropdown_item',
1072	[
1073	'label' => __( 'Background Color', 'easy-elements' ),
1074	'type' => Controls_Manager::COLOR,
1075	'default' => '#fff',
1076	'selectors' => [
1077	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a' => 'background-color: {{VALUE}}',
1078	],
1079	'separator' => 'after',
1080	]
1081	);
1082
1083	$this->end_controls_tab();
1084
1085	$this->start_controls_tab(
1086	'tab_dropdown_item_hover',
1087	[
1088	'label' => __( 'Hover', 'easy-elements' ),
1089	]
1090	);
1091
1092	$this->add_control(
1093	'color_dropdown_item_hover',
1094	[
1095	'label' => __( 'Text Color', 'easy-elements' ),
1096	'type' => Controls_Manager::COLOR,
1097	'default' => '',
1098	'selectors' => [
1099	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item:hover > a' => 'color: {{VALUE}}',
1100	],
1101	]
1102	);
1103
1104	$this->add_control(
1105	'background_color_dropdown_item_hover',
1106	[
1107	'label' => __( 'Background Color', 'easy-elements' ),
1108	'type' => Controls_Manager::COLOR,
1109	'default' => '',
1110	'selectors' => [
1111	'{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item:hover > a' => 'background-color: {{VALUE}}',
1112	],
1113	'separator' => 'after',
1114	]
1115	);
1116
1117	$this->end_controls_tab();
1118
1119	$this->start_controls_tab(
1120	'tab_dropdown_item_active',
1121	[
1122	'label' => __( 'Active', 'easy-elements' ),
1123	]
1124	);
1125
1126	$this->add_control(
1127	'color_dropdown_item_active',
1128	[
1129	'label' => __( 'Text Color', 'easy-elements' ),
1130	'type' => Controls_Manager::COLOR,
1131	'default' => '',
1132	'selectors' => [
1133	'{{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
1134	' => 'color: {{VALUE}}',
1135
1136	],
1137	]
1138	);
1139
1140	$this->add_control(
1141	'background_color_dropdown_item_active',
1142	[
1143	'label' => __( 'Background Color', 'easy-elements' ),
1144	'type' => Controls_Manager::COLOR,
1145	'default' => '',
1146	'selectors' => [
1147	'{{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}}',
1148	],
1149	'separator' => 'after',
1150
1151	]
1152	);
1153	$this->end_controls_tab();
1154	$this->end_controls_tabs();
1155
1156	$this->add_group_control(
1157	Group_Control_Typography::get_type(),
1158	[
1159	'name' => 'dropdown_typography',
1160	'separator' => 'before',
1161	'selector' => '
1162	{{WRAPPER}} .sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a',
1163	'condition' => [
1164	'layout' => 'horizontal',
1165	],
1166	]
1167	);
1168
1169	$this->add_group_control(
1170	\Elementor\Group_Control_Border::get_type(),
1171	[
1172	'name' => 'dropdown_item_border',
1173	'selector' => '{{WRAPPER}} .eel-nav-menu ul.sub-menu:not(.easyel--elementor-template-mega-menu) .menu-item > a',
1174	'condition' => [
1175	'layout' => 'horizontal',
1176	],
1177	]
1178	);
1179
1180	$this->add_responsive_control(
1181	'item__full_padding',
1182	[
1183	'label' => esc_html__( 'Padding', 'easy-elements' ),
1184	'type' => Controls_Manager::DIMENSIONS,
1185	'size_units' => [ 'px', 'em', '%' ],
1186	'selectors' => [
1187	'{{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}};',
1188	],
1189	'condition' => [
1190	'layout' => 'horizontal',
1191	],
1192	]
1193	);
1194
1195	$this->add_responsive_control(
1196	'width_dropdown_item',
1197	[
1198	'label' => __( 'Dropdown Width (px)', 'easy-elements' ),
1199	'type' => Controls_Manager::SLIDER,
1200	'range' => [
1201	'px' => [
1202	'min' => 0,
1203	'max' => 500,
1204	],
1205	],
1206	'default' => [
1207	'size' => '220',
1208	'unit' => 'px',
1209	],
1210	'selectors' => [
1211	'{{WRAPPER}} ul.sub-menu:not(.easyel--elementor-template-mega-menu)' => 'width: {{SIZE}}{{UNIT}}',
1212	],
1213	'condition' => [
1214	'layout' => 'horizontal',
1215	],
1216	'frontend_available' => true,
1217	]
1218	);
1219
1220	$this->add_responsive_control(
1221	'icon_size',
1222	[
1223	'label' => __( 'Icon Size', 'easy-elements' ),
1224	'type' => Controls_Manager::SLIDER,
1225	'range' => [
1226	'px' => [
1227	'min' => 15,
1228	'max' => 25,
1229	],
1230	],
1231	'selectors' => [
1232	'{{WRAPPER}} .eel-nav-menu .menu-item-has-children a.eel-menu-item::before' => 'font-size: {{SIZE}}px;',
1233	],
1234	'condition' => [
1235	'layout' => [ 'horizontal' ],
1236	],
1237	'frontend_available' => true,
1238	]
1239	);
1240
1241	$this->add_responsive_control(
1242	'icon_distance_from_menu',
1243	[
1244	'label' => __( 'Icon Top Distance', 'easy-elements' ),
1245	'type' => Controls_Manager::SLIDER,
1246	'range' => [
1247	'px' => [
1248	'min' => -100,
1249	'max' => 100,
1250	],
1251	],
1252	'selectors' => [
1253	'{{WRAPPER}} .eel-nav-menu .menu-item-has-children a.eel-menu-item::before' => 'top: {{SIZE}}%;',
1254	],
1255	'condition' => [
1256	'layout' => [ 'horizontal' ],
1257	],
1258	'frontend_available' => true,
1259	]
1260	);
1261
1262	$this->add_responsive_control(
1263	'icon_left_right_from_menu',
1264	[
1265	'label' => __( 'Icon Right Distance', 'easy-elements' ),
1266	'type' => Controls_Manager::SLIDER,
1267	'range' => [
1268	'px' => [
1269	'min' => -100,
1270	'max' => 100,
1271	],
1272	],
1273	'selectors' => [
1274	'{{WRAPPER}} .eel-nav-menu .menu-item-has-children>a:before' => 'right: {{SIZE}}px;',
1275	],
1276	'condition' => [
1277	'layout' => [ 'horizontal' ],
1278	],
1279	'frontend_available' => true,
1280	]
1281	);
1282
1283	$this->add_control(
1284	'full_heading',
1285	[
1286	'label' => esc_html__( 'Dropdown Wrapper', 'easy-elements' ),
1287	'type' => \Elementor\Controls_Manager::HEADING,
1288	'separator' => 'after',
1289	]
1290	);
1291
1292	$this->add_control(
1293	'background_color_wrapper',
1294	[
1295	'label' => __( 'Background Color', 'easy-elements' ),
1296	'type' => Controls_Manager::COLOR,
1297	'description' => __( 'Note: If you use a background color on individual items, It will not be visible on the wrapper.', 'easy-elements' ),
1298	'selectors' => [
1299	'{{WRAPPER}} .eel-nav-menu ul.sub-menu:not(.easyel--elementor-template-mega-menu)' => 'background-color: {{VALUE}}',
1300	],
1301	]
1302	);
1303
1304	$this->add_control(
1305	'dropdown_border_radius',
1306	[
1307	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1308	'type' => Controls_Manager::DIMENSIONS,
1309	'selectors' => [
1310	'{{WRAPPER}} .eel-nav-menu ul.sub-menu:not(.easyel--elementor-template-mega-menu), {{WRAPPER}} .eel-nav-menu .sub-menu li.menu-item' =>
1311	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1312	],
1313	'description' => esc_html__( 'Note: Border radius will only be visible if you apply a background color to the wrapper.', 'easy-elements' ),
1314	'condition' => [
1315	'layout' => 'horizontal',
1316	],
1317	]
1318	);
1319
1320	$this->add_responsive_control(
1321	'ul__full_padding',
1322	[
1323	'label' => esc_html__( 'Padding', 'easy-elements' ),
1324	'type' => Controls_Manager::DIMENSIONS,
1325	'size_units' => [ 'px', 'em', '%' ],
1326	'selectors' => [
1327	'{{WRAPPER}} .eel-nav-menu ul.sub-menu:not(.easyel--elementor-template-mega-menu)' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1328	],
1329	'condition' => [
1330	'layout' => 'horizontal',
1331	],
1332	]
1333	);
1334
1335	$this->add_group_control(
1336	Group_Control_Box_Shadow::get_type(),
1337	[
1338	'name' => 'dropdown_box_shadow',
1339	'selector' => '{{WRAPPER}} .eel-nav-menu .sub-menu:not(.easyel--elementor-template-mega-menu)',
1340	'separator' => 'after',
1341	'condition' => [
1342	'layout' => 'horizontal',
1343	],
1344	]
1345	);
1346
1347	$this->end_controls_section();
1348
1349	$this->start_controls_section(
1350	'style_toggle',
1351	[
1352	'label' => __( 'Menu Trigger', 'easy-elements' ),
1353	'tab' => Controls_Manager::TAB_STYLE,
1354	]
1355	);
1356
1357	$this->start_controls_tabs( 'tabs_toggle_style' );
1358
1359	$this->start_controls_tab(
1360	'toggle_style_normal',
1361	[
1362	'label' => __( 'Normal', 'easy-elements' ),
1363	]
1364	);
1365
1366	$this->add_control(
1367	'toggle_color',
1368	[
1369	'label' => __( 'Color', 'easy-elements' ),
1370	'type' => Controls_Manager::COLOR,
1371	'selectors' => [
1372	'{{WRAPPER}} div.eel-nav-menu-icon' => 'color: {{VALUE}}',
1373	'{{WRAPPER}} div.eel-nav-menu-icon svg' => 'fill: {{VALUE}}',
1374	],
1375	]
1376	);
1377
1378	$this->add_control(
1379	'toggle_background_color',
1380	[
1381	'label' => __( 'Background Color', 'easy-elements' ),
1382	'type' => Controls_Manager::COLOR,
1383	'selectors' => [
1384	'{{WRAPPER}} .eel-nav-menu-icon' => 'background-color: {{VALUE}}; padding: 0.35em;',
1385	],
1386	]
1387	);
1388
1389	$this->end_controls_tab();
1390
1391	$this->start_controls_tab(
1392	'toggle_hover',
1393	[
1394	'label' => __( 'Hover', 'easy-elements' ),
1395	]
1396	);
1397
1398	$this->add_control(
1399	'toggle_hover_color',
1400	[
1401	'label' => __( 'Color', 'easy-elements' ),
1402	'type' => Controls_Manager::COLOR,
1403	'selectors' => [
1404	'{{WRAPPER}} div.eel-nav-menu-icon:hover' => 'color: {{VALUE}}',
1405	'{{WRAPPER}} div.eel-nav-menu-icon:hover svg' => 'fill: {{VALUE}}',
1406
1407	],
1408	]
1409	);
1410
1411	$this->add_control(
1412	'toggle_hover_background_color',
1413	[
1414	'label' => __( 'Background Color', 'easy-elements' ),
1415	'type' => Controls_Manager::COLOR,
1416	'selectors' => [
1417	'{{WRAPPER}} .eel-nav-menu-icon:hover' => 'background-color: {{VALUE}}; padding: 0.35em;',
1418	],
1419	]
1420	);
1421
1422	$this->end_controls_tab();
1423
1424	$this->end_controls_tabs();
1425
1426	$this->add_responsive_control(
1427	'toggle_size',
1428	[
1429	'label' => __( 'Icon Size', 'easy-elements' ),
1430	'type' => Controls_Manager::SLIDER,
1431	'range' => [
1432	'px' => [
1433	'min' => 15,
1434	],
1435	],
1436	'selectors' => [
1437	'{{WRAPPER}} .eel-nav-menu-icon' => 'font-size: {{SIZE}}{{UNIT}}',
1438	'{{WRAPPER}} .eel-nav-menu-icon svg' => 'font-size: {{SIZE}}px;line-height: {{SIZE}}px;height: {{SIZE}}px;width: {{SIZE}}px;',
1439	],
1440	'frontend_available' => true,
1441	'separator' => 'before',
1442	]
1443	);
1444
1445	$this->add_responsive_control(
1446	'toggle_border_width',
1447	[
1448	'label' => __( 'Border Width', 'easy-elements' ),
1449	'type' => Controls_Manager::SLIDER,
1450	'range' => [
1451	'px' => [
1452	'max' => 10,
1453	],
1454	],
1455	'selectors' => [
1456	'{{WRAPPER}} .eel-nav-menu-icon' => 'border-width: {{SIZE}}{{UNIT}}; padding: 0.35em;',
1457	],
1458	'frontend_available' => true,
1459	]
1460	);
1461
1462	$this->add_responsive_control(
1463	'toggle_border_radius',
1464	[
1465	'label' => __( 'Border Radius', 'easy-elements' ),
1466	'type' => Controls_Manager::SLIDER,
1467	'size_units' => [ 'px', '%' ],
1468	'selectors' => [
1469	'{{WRAPPER}} .eel-nav-menu-icon' => 'border-radius: {{SIZE}}{{UNIT}}',
1470	],
1471	'frontend_available' => true,
1472	]
1473	);
1474
1475	$this->end_controls_section();
1476
1477	$this->start_controls_section(
1478	'style_toggle_close',
1479	[
1480	'label' => __( 'Menu Close', 'easy-elements' ),
1481	'tab' => Controls_Manager::TAB_STYLE,
1482	]
1483	);
1484
1485	$this->add_control(
1486	'toggle_color_close',
1487	[
1488	'label' => __( 'Color', 'easy-elements' ),
1489	'type' => Controls_Manager::COLOR,
1490	'selectors' => [
1491	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .eel-nav-menu-icon' => 'color: {{VALUE}}',
1492	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .eel-nav-menu-icon svg' => 'fill: {{VALUE}}',
1493	],
1494	]
1495	);
1496
1497	$this->add_control(
1498	'toggle_background_color_close',
1499	[
1500	'label' => __( 'Background Color', 'easy-elements' ),
1501	'type' => Controls_Manager::COLOR,
1502	'selectors' => [
1503	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .eel-nav-menu-icon' => 'background-color: {{VALUE}}; padding: 0.35em;',
1504	],
1505	]
1506	);
1507
1508	$this->add_group_control(
1509	\Elementor\Group_Control_Border::get_type(),
1510	[
1511	'name' => 'toggle_border_close',
1512	'label' => __( 'Border', 'easy-elements' ),
1513	'selector' => '.sidebar-on-mobile[data-nav-id="{{ID}}"] .eel-nav-menu-icon',
1514	]
1515	);
1516
1517	$this->add_responsive_control(
1518	'toggle_size_close',
1519	[
1520	'label' => __( 'Icon Size', 'easy-elements' ),
1521	'type' => Controls_Manager::SLIDER,
1522	'range' => [
1523	'px' => [
1524	'min' => 15,
1525	],
1526	],
1527	'selectors' => [
1528	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .eel-nav-menu-icon' => 'font-size: {{SIZE}}{{UNIT}}',
1529	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .eel-nav-menu-icon svg' => 'font-size: {{SIZE}}px;line-height: {{SIZE}}px;height: {{SIZE}}px;width: {{SIZE}}px;',
1530	],
1531	'frontend_available' => true,
1532	'separator' => 'before',
1533	]
1534	);
1535
1536	$this->add_responsive_control(
1537	'toggle_border_radius_close',
1538	[
1539	'label' => __( 'Border Radius', 'easy-elements' ),
1540	'type' => Controls_Manager::SLIDER,
1541	'size_units' => [ 'px', '%' ],
1542	'selectors' => [
1543	'.sidebar-on-mobile[data-nav-id="{{ID}}"] .eel-nav-menu-icon' => 'border-radius: {{SIZE}}{{UNIT}}',
1544	],
1545	'frontend_available' => true,
1546	]
1547	);
1548
1549	$this->end_controls_section();
1550	}
1551
1552	/**
1553	* Add itemprop for Navigation Schema.
1554	*
1555	* @since 1.5.2
1556	* @param string $atts link attributes.
1557	* @access public
1558	* @return string
1559	*/
1560	public function handle_link_attrs( $atts ) {
1561
1562	$atts .= ' itemprop="url"';
1563	return $atts;
1564	}
1565
1566	/**
1567	* Add itemprop to the li tag of Navigation Schema.
1568	*
1569	* @since 1.6.0
1570	* @param string $value link attributes.
1571	* @access public
1572	* @return string
1573	*/
1574	public function handle_li_values( $value ) {
1575
1576	$value .= ' itemprop="name"';
1577	return $value;
1578	}
1579
1580
1581	/**
1582	* Get the menu and close icon HTML.
1583	*
1584	* @since 1.5.2
1585	* @param array $settings Widget settings array.
1586	* @access public
1587	* @return array
1588	*/
1589	public function get_menu_close_icon( $settings ) {
1590	$menu_icon = '';
1591	$close_icon = '';
1592	$icons = [];
1593	$icon_settings = [
1594	$settings['dropdown_icon'],
1595	//$settings['dropdown_close_icon'],
1596	];
1597
1598	foreach ( $icon_settings as $icon ) {
1599	if ( $this->is_elementor_updated() ) {
1600	ob_start();
1601	\Elementor\Icons_Manager::render_icon(
1602	$icon,
1603	[
1604	'aria-hidden' => 'true',
1605	'tabindex' => '0',
1606	]
1607	);
1608	$menu_icon = ob_get_clean();
1609	} else {
1610	$menu_icon = '<i class="' . esc_attr( $icon ) . '" aria-hidden="true" tabindex="0"></i>';
1611	}
1612
1613	array_push( $icons, $menu_icon );
1614	}
1615
1616	return $icons;
1617	}
1618
1619	/**
1620	* Render Nav Menu output on the frontend.
1621	*
1622	* Written in PHP and used to generate the final HTML.
1623	*
1624	* @since 1.3.0
1625	* @access protected
1626	* @return (void \| false)
1627	*/
1628	protected function render() {
1629
1630	$menus = $this->get_available_menus();
1631
1632	if ( empty( $menus ) ) {
1633	return;
1634	}
1635
1636	$settings = $this->get_settings_for_display();
1637
1638	$menu_close_icons = [];
1639	$menu_close_icons = $this->get_menu_close_icon( $settings );
1640
1641	$enableSticky = isset($settings['enable_sticky_header']) && 'yes' === $settings['enable_sticky_header'];
1642	$enablePadding = isset($settings['disable_top_padding']) && 'yes' === $settings['disable_top_padding'];
1643
1644	if ( isset( $settings['enable_sticky_header'] ) && 'yes' === $settings['enable_sticky_header'] ) {
1645	// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
1646	$GLOBALS['eel_force_sticky_header'] = true; // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
1647	wp_enqueue_script(
1648	'eel-sticky-header',
1649	plugin_dir_url( dirname( dirname( __FILE__ ) ) ) . 'widgets/navigation-menu/js/eel-sticky-header.js',
1650	[ 'jquery' ],
1651	EASYELEMENTS_VER,
1652	true
1653	);
1654
1655	wp_localize_script('eel-sticky-header', 'eelStickyHeaderSettings', [
1656	'enableSticky' => $enableSticky,
1657	'enablePadding' => $enablePadding
1658	]);
1659
1660	if ( 'yes' === $settings['fixed_top_sticky'] ) {
1661	$this->add_render_attribute( 'eel-main-menu', 'class', 'eel-fixed-top-sticky' );
1662
1663	$inline_js = "
1664	document.addEventListener('DOMContentLoaded', function() {
1665	var header = document.querySelector('header.easy-site-header');
1666	if (header) {
1667	header.classList.add('eel-fixed-top-sticky');
1668	}
1669	});
1670	";
1671
1672	wp_add_inline_script( 'eel-sticky-header', $inline_js );
1673	}
1674	}
1675
1676	$args = [
1677	'echo' => false,
1678	'menu' => $settings['menu'],
1679	'menu_class' => 'eel-nav-menu',
1680	'menu_id' => 'menu-' . $this->get_nav_menu_index() . '-' . $this->get_id(),
1681	'fallback_cb' => '__return_empty_string',
1682	'walker' => new \Easyel_Menu_Walker(),
1683	];
1684
1685	$mobile_args = [
1686	'echo' => false,
1687	'menu' => $settings['menu'],
1688	'menu_class' => 'eel-nav-menu eel-nav-menu-mobile',
1689	'fallback_cb' => '__return_empty_string',
1690	'walker' => new \Easyel_Menu_Walker(),
1691	'is_mobile_menu' => true,
1692	];
1693
1694	$this->add_render_attribute(
1695	'eel-main-menu',
1696	'class',
1697	[
1698	'eel-nav-menu',
1699	'eel-layout-' . $settings['layout'],
1700	]
1701	);
1702
1703	$this->add_render_attribute( 'eel-main-menu', 'class', 'eel-nav-menu-layout' );
1704
1705	$this->add_render_attribute( 'eel-main-menu', 'class', $settings['layout'] );
1706
1707	$this->add_render_attribute( 'eel-main-menu', 'data-layout', $settings['layout'] );
1708
1709	$this->add_render_attribute(
1710	'eel-nav-menu',
1711	'class',
1712	[
1713	'eel-nav-menu__layout-' . $settings['layout'],
1714	]
1715	);
1716
1717	$icon_alignment = $settings['icon_alignment_vertical'] ?? 'align_left';
1718	$this->add_render_attribute(
1719	'eel-main-menu',
1720	'class',
1721	'icon-' . $icon_alignment
1722	);
1723
1724	if ( 'vertical' === $settings['layout'] && !empty($settings['menu_icon_vertical']['value']) ) {
1725	$this->add_render_attribute('eel-nav-menu', 'data-vertical-icon', $settings['menu_icon_vertical']['value']);
1726	}
1727
1728	$animation_class = !empty($settings['submenu_animation']) ? $settings['submenu_animation'] : 'eel_animation_slide_down';
1729	if ( 'horizontal' === $settings['layout'] ) {
1730	$this->add_render_attribute('eel-nav-menu', 'class', $animation_class);
1731	}
1732	?>
1733
1734	<div <?php $this->print_render_attribute_string( 'eel-main-menu' ); ?>>
1735	<?php if ( isset( $settings['layout'] ) && 'horizontal' === $settings['layout'] ) : ?>
1736	<div role="button" class="eel-nav-menu__toggle elementor-clickable">
1737	<span class="screen-reader-text"><?php esc_html_e( 'Menu', 'easy-elements' ); ?></span>
1738	<div class="eel-nav-menu-icon" data-nav-target="<?php echo esc_attr( $this->get_id() ); ?>">
1739	<?php
1740	if ( isset( $menu_close_icons[0] ) ) {
1741	$menu_close_icon = str_replace( 'tabindex="0"', '', $menu_close_icons[0] );
1742	$allowed_svg = [
1743	'svg' => [
1744	'class' => true,
1745	'xmlns' => true,
1746	'width' => true,
1747	'height' => true,
1748	'viewbox' => true,
1749	'aria-hidden' => true,
1750	'role' => true,
1751	'focusable' => true,
1752	],
1753	'path' => [
1754	'd' => true,
1755	'fill' => true,
1756	],
1757	'g' => [ 'fill' => true ],
1758	'title' => [],
1759	];
1760	echo wp_kses( $menu_close_icon, $allowed_svg );
1761	}
1762	?>
1763	</div>
1764	</div>
1765	<?php endif; ?>
1766
1767
1768	<?php
1769	$settings = $this->get_settings_for_display();
1770	$nav_widget_id = $this->get_id();
1771	if ( isset( $settings['layout'] ) && 'horizontal' === $settings['layout'] ) {
1772	$open_position = !empty( $settings['mobile_menu_open_position'] ) ? $settings['mobile_menu_open_position'] : 'right';
1773	?>
1774	<nav class="sidebar-on-mobile eel-mobile-open-position-<?php echo esc_attr( $open_position ); ?>" data-nav-id="<?php echo esc_attr( $nav_widget_id ); ?>">
1775	<span class="eel-nav-menu-icon eel-mobile-menu-icon-<?php echo esc_attr( $open_position ); ?>">
1776	<?php
1777	if ( ! empty( $settings['mobile_close_icon']['value'] ) ) {
1778	\Elementor\Icons_Manager::render_icon( $settings['mobile_close_icon'], [ 'aria-hidden' => 'true' ] );
1779	} else { ?>
1780	<i class="unicon-close"></i>
1781	<?php }
1782	?>
1783	</span>
1784	<?php echo wp_nav_menu( $mobile_args ); ?>
1785	</nav>
1786	<?php
1787	}
1788	?>
1789
1790	<nav <?php $this->print_render_attribute_string( 'eel-nav-menu' ); ?>>
1791	<?php echo wp_nav_menu( $args ); ?>
1792	</nav>
1793	</div>
1794	<?php
1795	}
1796	}