easy-elements / widgets / vertical-menu / vertical-menu-widget.php

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

1,660 lines 53.3 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	if ( ! defined( 'ABSPATH' ) ) exit;
4	use Elementor\Group_Control_Typography;
5	use Elementor\Controls_Manager;
6	use Elementor\Utils;
7	use Elementor\Widget_Base;
8	use Elementor\Plugin;
9
10	// Include the Menu_Walker class
11	require_once plugin_dir_path( __FILE__ ) . 'nav-walker.php';
12
13	/**
14	* Class Nav Menu.
15	*/
16	class Easyel_vertical_Menu_Widget extends \Elementor\Widget_Base {
17	protected $nav_menu_index = 1;
18	public function get_name() {
19	return 'eel-vertical-navigation';
20	}
21
22	public function get_title() {
23	return __( 'Vertical Menu', 'easy-elements' );
24	}
25
26	public function get_icon() {
27	return 'easyicon easyelIcon-navigation';
28	}
29
30	public function get_categories() {
31	return [ 'easyelements_header_footer_category' ];
32	}
33
34	public function get_style_depends() {
35	return [
36	'eel-vertical-navigation',
37	];
38	}
39
40	/**
41	* Retrieve the menu index.
42	*
43	* Used to get index of nav menu.
44	*
45	* @since 1.3.0
46	* @access protected
47	*
48	* @return string nav index.
49	*/
50	protected function get_nav_menu_index() {
51	return $this->nav_menu_index++;
52	}
53
54	/**
55	* Retrieve the list of available menus.
56	*
57	* Used to get the list of available menus.
58	*
59	* @since 1.3.0
60	* @access private
61	*
62	* @return array get WordPress menus list.
63	*/
64	private function get_available_menus() {
65
66	$menus = wp_get_nav_menus();
67
68	$options = [];
69
70	foreach ( $menus as $menu ) {
71	$options[ $menu->slug ] = $menu->name;
72	}
73
74	return $options;
75	}
76
77	/**
78	* Check if the Elementor is updated.
79	*
80	* @since 1.3.0
81	*
82	* @return boolean if Elementor updated.
83	*/
84	public static function is_elementor_updated() {
85	if ( class_exists( 'Elementor\Icons_Manager' ) ) {
86	return true;
87	} else {
88	return false;
89	}
90	}
91
92	/**
93	* Register Nav Menu controls.
94	*
95	* @since 1.5.7
96	* @access protected
97	*/
98	protected function register_controls() {
99	$this->register_general_content_controls();
100	$this->register_style_content_controls();
101	}
102
103	/**
104	* Register Nav Menu General Controls.
105	*
106	* @since 1.3.0
107	* @access protected
108	*/
109	protected function register_general_content_controls() {
110
111	$this->start_controls_section(
112	'section_menu',
113	[
114	'label' => __( 'Menu', 'easy-elements' ),
115	]
116	);
117
118	$menus = $this->get_available_menus();
119
120	if ( ! empty( $menus ) ) {
121	$this->add_control(
122	'menu',
123	[
124	'label' => __( 'Menu', 'easy-elements' ),
125	'type' => Controls_Manager::SELECT,
126	'options' => $menus,
127	'default' => array_keys( $menus )[0],
128	'save_default' => true,
129	/* translators: %s Nav menu URL */
130	'description' => sprintf( __( 'Go to the <a href="%s" target="_blank">Menus screen</a> to manage your menus.', 'easy-elements' ), admin_url( 'nav-menus.php' ) ),
131	]
132	);
133	} else {
134	$this->add_control(
135	'menu',
136	[
137	'type' => Controls_Manager::RAW_HTML,
138	/* translators: %s Nav menu URL */
139	'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' ) ),
140	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
141	]
142	);
143	}
144	$this->add_control(
145	'enable_menu_description',
146	[
147	'label' => __( 'Show Description', 'easy-elements' ),
148	'type' => Controls_Manager::SELECT,
149	'options' => [
150	'none' => __( 'No', 'easy-elements' ),
151	'inline-block' => __( 'Yes', 'easy-elements' ),
152	],
153	'default' => 'none',
154	'selectors' => [
155	'{{WRAPPER}} li.menu-item .menu-desc' => 'display: {{VALUE}};',
156	],
157	]
158	);
159
160	$this->add_control(
161	'menu_icon_position',
162	[
163	'label' => __( 'Item Icon Position', 'easy-elements' ),
164	'type' => Controls_Manager::SELECT,
165	'default' => 'none',
166	'options' => [
167	'none' => __( 'None', 'easy-elements' ),
168	'before' => __( 'Before Item', 'easy-elements' ),
169	'after' => __( 'After Item', 'easy-elements' ),
170	],
171	]
172	);
173
174	$this->add_control(
175	'menu_item_position_icon',
176	[
177	'label' => __( 'Item Icon', 'easy-elements' ),
178	'type' => Controls_Manager::ICONS,
179	'condition' => [
180	'menu_icon_position!' => 'none',
181	],
182	]
183	);
184
185	$this->add_control(
186	'menu_icon_show_on',
187	[
188	'label' => __( 'Show Icon On', 'easy-elements' ),
189	'type' => Controls_Manager::SELECT,
190	'default' => 'all',
191	'options' => [
192	'all' => __( 'All Items', 'easy-elements' ),
193	'active' => __( 'Active Item Only', 'easy-elements' ),
194	],
195	'prefix_class' => 'eel-icon-show-',
196	'condition' => [
197	'menu_icon_position!' => 'none',
198	],
199	]
200	);
201
202	$menutype = [
203	'eel_hover' => __( 'Hover', 'easy-elements' ),
204	];
205
206	if ( apply_filters( 'easyel/pro_enabled', false ) ) {
207	$menutype['eel_click'] = __( 'Click', 'easy-elements' );
208	}
209
210	$this->add_control(
211	'submenu_type',
212	[
213	'label' => __( 'Dropdown Type', 'easy-elements' ),
214	'type' => Controls_Manager::SELECT,
215	'default' => 'eel_hover',
216	'options' => $menutype,
217	]
218	);
219
220	$this->add_control('eel_position_fixed', [
221	'label' => __('Position Fixed', 'easy-elements'),
222	'type' => Controls_Manager::SWITCHER,
223	'label_on' => __('Yes', 'easy-elements'),
224	'label_off' => __('No', 'easy-elements'),
225	'default' => '',
226	'condition' => [
227	'submenu_type' => 'eel_click',
228	]
229	]);
230
231	$animationOptions = [
232	'eel_animation_slide_down' => __( 'Animation Down', 'easy-elements' ),
233	];
234
235	if ( apply_filters( 'easyel/pro_enabled', false ) ) {
236	$animationOptions['eel_animation_slide_up'] = __( 'Animation Up', 'easy-elements' );
237	$animationOptions['eel_animation_fade'] = __( 'Animation Fade', 'easy-elements' );
238	$animationOptions['eel_animation_right'] = __( 'Animation Right', 'easy-elements' );
239	$animationOptions['eel_animation_left'] = __( 'Animation Left', 'easy-elements' );
240	$animationOptions['eel_animation_zoom'] = __( 'Animation Zoom', 'easy-elements' );
241	}
242
243	$this->add_control(
244	'submenu_animation',
245	[
246	'label' => __( 'Dropdown Animation', 'easy-elements' ),
247	'type' => Controls_Manager::SELECT,
248	'default' => 'eel_animation_slide_down',
249	'options' => $animationOptions,
250	'condition' => [
251	'submenu_type' => 'eel_hover',
252	]
253	]
254	);
255
256	$this->add_control(
257	'mobile_menu_breakpoint',
258	[
259	'label' => __( 'Mobile Menu Breakpoint', 'easy-elements' ),
260	'type' => Controls_Manager::SELECT,
261	'default' => '992',
262	'options' => [
263	'' => __( 'None - Disable Mobile Menu', 'easy-elements' ),
264	'480' => __( '480px - Small devices', 'easy-elements' ),
265	'576' => __( '576px - Medium devices', 'easy-elements' ),
266	'768' => __( '768px - Tablets', 'easy-elements' ),
267	'992' => __( '992px - Desktop small', 'easy-elements' ),
268	],
269	'description' => __( 'Select the screen width at which the mobile menu will activate.', 'easy-elements' ),
270	'separator' => 'before',
271	]
272	);
273
274	$this->add_control(
275	'mobile_menu_open_position',
276	[
277	'label' => __( 'Mobile Menu Open Position', 'easy-elements' ),
278	'type' => Controls_Manager::SELECT,
279	'default' => 'right',
280	'options' => [
281	'top' => __( 'Top', 'easy-elements' ),
282	'right' => __( 'Right', 'easy-elements' ),
283	],
284	'condition' => [
285	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
286	],
287	]
288	);
289
290	$this->add_responsive_control(
291	'mobile_menu_sidebar_width',
292	[
293	'label' => __( 'Menu Sidebar Width', 'easy-elements' ),
294	'type' => \Elementor\Controls_Manager::SLIDER,
295	'size_units' => [ 'px', '%', 'vw' ],
296	'range' => [
297	'px' => [
298	'min' => 200,
299	'max' => 500,
300	],
301	'%' => [
302	'min' => 50,
303	'max' => 100,
304	],
305	'vw' => [
306	'min' => 20,
307	'max' => 100,
308	],
309	],
310	'selectors' => [
311	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav' => 'max-width: {{SIZE}}{{UNIT}} !important;',
312	],
313	'condition' => [
314	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
315	],
316	]
317	);
318
319	$this->add_control(
320	'mobile_hamburger_icon',
321	[
322	'label' => esc_html__( 'Choose Hamburger Icon', 'easy-elements' ),
323	'type' => \Elementor\Controls_Manager::ICONS,
324	'fa4compatibility' => 'icon',
325	'default' => [],
326	'condition' => [
327	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
328	]
329	]
330	);
331
332	$this->add_control(
333	'mobile_close_icon',
334	[
335	'label' => esc_html__( 'Choose Close Icon', 'easy-elements' ),
336	'type' => \Elementor\Controls_Manager::ICONS,
337	'fa4compatibility' => 'icon',
338	'default' => [],
339	'condition' => [
340	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
341	]
342	]
343	);
344	$this->end_controls_section();
345	}
346
347	/**
348	* Register Nav Menu General Controls.
349	*
350	* @since 1.3.0
351	* @access protected
352	*/
353	protected function register_style_content_controls() {
354
355	$this->start_controls_section(
356	'section_style_main-menu',
357	[
358	'label' => __( 'Main Menu', 'easy-elements' ),
359	'tab' => Controls_Manager::TAB_STYLE,
360	]
361	);
362
363	$this->start_controls_tabs( 'nav_color_tabs' );
364
365	$this->start_controls_tab(
366	'nav_color_normal',
367	[
368	'label' => esc_html__( 'Normal', 'easy-elements' ),
369	]
370	);
371
372	$this->add_control(
373	'nav_text_color',
374	[
375	'label' => esc_html__( 'Color', 'easy-elements' ),
376	'type' => Controls_Manager::COLOR,
377	'selectors' => [
378	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' => 'color: {{VALUE}};',
379	],
380	]
381	);
382	$this->add_control(
383	'nav_bg_color',
384	[
385	'label' => esc_html__( 'Background Color', 'easy-elements' ),
386	'type' => Controls_Manager::COLOR,
387	'selectors' => [
388	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' => 'background-color: {{VALUE}};',
389	],
390	]
391	);
392	$this->add_group_control(
393	Group_Control_Typography::get_type(),
394	[
395	'name' => 'nav_typography',
396	'label' => esc_html__( 'Typography', 'easy-elements' ),
397	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a',
398	]
399	);
400
401	$this->add_group_control(
402	\Elementor\Group_Control_Border::get_type(),
403	[
404	'name' => 'item__border',
405	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a',
406	]
407	);
408
409	$this->add_group_control(
410	\Elementor\Group_Control_Text_Shadow::get_type(),
411	[
412	'name' => 'nav_text_shadow',
413	'label' => esc_html__( 'Text Shadow', 'easy-elements' ),
414	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a',
415	]
416	);
417
418	$this->add_responsive_control(
419	'nav_padding',
420	[
421	'label' => esc_html__( 'Padding', 'easy-elements' ),
422	'type' => Controls_Manager::DIMENSIONS,
423	'size_units' => [ 'px', 'em', '%' ],
424	'selectors' => [
425	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
426	],
427	]
428	);
429
430	$this->add_responsive_control(
431	'nav_margin',
432	[
433	'label' => esc_html__( 'Margin', 'easy-elements' ),
434	'type' => Controls_Manager::DIMENSIONS,
435	'size_units' => [ 'px', 'em', '%' ],
436	'selectors' => [
437	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
438	],
439	]
440	);
441
442	$this->add_responsive_control(
443	'nav_menu_border_radius',
444	[
445	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
446	'type' => Controls_Manager::DIMENSIONS,
447	'size_units' => [ 'px', '%' ],
448	'selectors' => [
449	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' =>
450	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
451	],
452	]
453	);
454
455	$this->end_controls_tab();
456
457	$this->start_controls_tab(
458	'nav_color_hover',
459	[
460	'label' => esc_html__( 'Hover', 'easy-elements' ),
461	]
462	);
463
464	$this->add_control(
465	'nav_hover_color',
466	[
467	'label' => esc_html__( 'Color', 'easy-elements' ),
468	'type' => Controls_Manager::COLOR,
469	'selectors' => [
470	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item:hover > a' => 'color: {{VALUE}};',
471	],
472	]
473	);
474	$this->add_control(
475	'nav_bg_color_hover',
476	[
477	'label' => esc_html__( 'Background Color', 'easy-elements' ),
478	'type' => Controls_Manager::COLOR,
479	'selectors' => [
480	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item:hover > a' => 'background-color: {{VALUE}};',
481	],
482	]
483	);
484
485	$this->add_group_control(
486	\Elementor\Group_Control_Border::get_type(),
487	[
488	'name' => 'item__border_hover',
489	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item:hover > a',
490	]
491	);
492
493	$this->end_controls_tab();
494
495	/* Active */
496	$this->start_controls_tab(
497	'nav_color_active',
498	[
499	'label' => esc_html__( 'Active', 'easy-elements' ),
500	]
501	);
502
503	$this->add_control(
504	'nav_active_color',
505	[
506	'label' => esc_html__( 'Color', 'easy-elements' ),
507	'type' => Controls_Manager::COLOR,
508	'selectors' => [
509	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item.current-menu-item > a, {{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item.current_page_item > a, {{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item.current-menu-ancestor > a' => 'color: {{VALUE}};',
510	],
511	]
512	);
513
514	$this->add_control(
515	'nav_bg_color_active',
516	[
517	'label' => esc_html__( 'Background Color', 'easy-elements' ),
518	'type' => Controls_Manager::COLOR,
519	'selectors' => [
520	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item.current-menu-item > a, {{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item.current_page_item > a, {{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item.current-menu-ancestor > a' => 'background-color: {{VALUE}};',
521	],
522	]
523	);
524	$this->add_group_control(
525	\Elementor\Group_Control_Border::get_type(),
526	[
527	'name' => 'item__border_active',
528	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item.current-menu-item > a, {{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item.current_page_item > a',
529	]
530	);
531	$this->end_controls_tab();
532	$this->end_controls_tabs();
533	$this->end_controls_section();
534	do_action( 'easyel_vertical_after_submenu_fields_el', $this );
535
536	$this->start_controls_section(
537	'section_style_dropdown',
538	[
539	'label' => esc_html__( 'Dropdown Menu', 'easy-elements' ),
540	'tab' => Controls_Manager::TAB_STYLE,
541	]
542	);
543
544	$this->add_control(
545	'dropdown_bg_color',
546	[
547	'label' => esc_html__( 'Background Color', 'easy-elements' ),
548	'type' => Controls_Manager::COLOR,
549	'selectors' => [
550	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part), {{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel-vertical-menu-content-part)' => 'background-color: {{VALUE}};',
551	],
552	]
553	);
554
555	$this->add_group_control(
556	\Elementor\Group_Control_Border::get_type(),
557	[
558	'name' => 'dropdown_border',
559	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part), {{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel-vertical-menu-content-part)',
560	]
561	);
562
563	$this->add_responsive_control(
564	'dropdown_padding',
565	[
566	'label' => esc_html__( 'Padding', 'easy-elements' ),
567	'type' => Controls_Manager::DIMENSIONS,
568	'selectors' => [
569	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part), {{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel-vertical-menu-content-part)' =>
570	'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
571	],
572	]
573	);
574
575	$this->add_responsive_control(
576	'dropdown_border_radius',
577	[
578	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
579	'type' => Controls_Manager::DIMENSIONS,
580	'size_units' => [ 'px', '%' ],
581	'selectors' => [
582	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part),
583	{{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu
584	.menu-item-has-children .sub-menu:not(.eel-vertical-menu-content-part)' =>
585	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
586	],
587	]
588	);
589
590
591	$this->add_control(
592	'item_title',
593	[
594	'label' => esc_html__( 'Dropdown Item', 'easy-elements' ),
595	'type' => \Elementor\Controls_Manager::HEADING,
596	'separator' => 'before',
597	]
598	);
599
600	/* =========================
601	* Dropdown Item Tabs
602	* ========================= */
603	$this->start_controls_tabs( 'dropdown_item_tabs' );
604
605	/* Normal */
606	$this->start_controls_tab(
607	'dropdown_item_normal',
608	[
609	'label' => esc_html__( 'Normal', 'easy-elements' ),
610	]
611	);
612
613	$this->add_control(
614	'dropdown_item_color',
615	[
616	'label' => esc_html__( 'Color', 'easy-elements' ),
617	'type' => Controls_Manager::COLOR,
618	'selectors' => [
619	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a' => 'color: {{VALUE}};',
620	],
621	]
622	);
623
624	$this->add_control(
625	'dropdown_item_bg',
626	[
627	'label' => esc_html__( 'Background Color', 'easy-elements' ),
628	'type' => Controls_Manager::COLOR,
629	'selectors' => [
630	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a' => 'background-color: {{VALUE}};',
631	],
632	]
633	);
634
635	$this->add_group_control(
636	Group_Control_Typography::get_type(),
637	[
638	'name' => 'dropdown_typography',
639	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a',
640	]
641	);
642
643	$this->add_group_control(
644	\Elementor\Group_Control_Border::get_type(),
645	[
646	'name' => 'dropdown_item_border',
647	'selector' =>'{{WRAPPER}} .eel-vertical-menu-area ul.eel-vertical-verticalmenu ul.sub-menu:not(.eel-vertical-menu-content-part) li+li',
648	]
649	);
650
651	$this->add_responsive_control(
652	'dropdown_item_border_radius',
653	[
654	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
655	'type' => Controls_Manager::DIMENSIONS,
656	'size_units' => [ 'px', '%' ],
657	'selectors' => [
658	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a' =>
659	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
660	],
661	]
662	);
663
664	$this->add_responsive_control(
665	'per_item_padding',
666	[
667	'label' => esc_html__( 'Padding', 'easy-elements' ),
668	'type' => Controls_Manager::DIMENSIONS,
669	'selectors' => [
670	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a' =>'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
671	],
672	]
673	);
674
675	$this->add_responsive_control(
676	'width_dropdown_full',
677	[
678	'label' => __( 'Dropdown Width', 'easy-elements' ),
679	'type' => Controls_Manager::SLIDER,
680	'range' => [
681	'px' => [
682	'min' => 0,
683	'max' => 500,
684	],
685	],
686	'selectors' => [
687	'{{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .sub-menu:not(.eel-vertical-menu-content-part)'
688	=> 'width: {{SIZE}}{{UNIT}};',
689	],
690	]
691	);
692
693
694	$this->end_controls_tab();
695
696	/* Hover */
697	$this->start_controls_tab(
698	'dropdown_item_hover',
699	[
700	'label' => esc_html__( 'Hover', 'easy-elements' ),
701	]
702	);
703
704	$this->add_control(
705	'dropdown_item_hover_color',
706	[
707	'label' => esc_html__( 'Color', 'easy-elements' ),
708	'type' => Controls_Manager::COLOR,
709	'selectors' => [
710	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li:hover > a' => 'color: {{VALUE}};',
711	],
712	]
713	);
714
715	$this->add_control(
716	'dropdown_item_hover_bg',
717	[
718	'label' => esc_html__( 'Background Color', 'easy-elements' ),
719	'type' => Controls_Manager::COLOR,
720	'selectors' => [
721	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li:hover > a' => 'background-color: {{VALUE}};',
722	],
723	]
724	);
725
726	$this->add_control(
727	'dropdown_item_hover_border_color',
728	[
729	'label' => esc_html__( 'Border Color', 'easy-elements' ),
730	'type' => Controls_Manager::COLOR,
731	'selectors' => [
732	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li:hover > a' => 'border-color: {{VALUE}};',
733	],
734	]
735	);
736
737	$this->end_controls_tab();
738
739	/* Active */
740	$this->start_controls_tab(
741	'dropdown_item_active',
742	[
743	'label' => esc_html__( 'Active', 'easy-elements' ),
744	]
745	);
746
747	$this->add_control(
748	'dropdown_item_active_color',
749	[
750	'label' => esc_html__( 'Color', 'easy-elements' ),
751	'type' => Controls_Manager::COLOR,
752	'selectors' => [
753	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li.current-menu-item > a, {{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li.current_page_item > a, {{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li.current-menu-ancestor > a' => 'color: {{VALUE}};',
754	],
755	]
756	);
757
758	$this->add_control(
759	'dropdown_item_active_bg',
760	[
761	'label' => esc_html__( 'Background Color', 'easy-elements' ),
762	'type' => Controls_Manager::COLOR,
763	'selectors' => [
764	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li.current-menu-item > a, {{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li.current_page_item > a, {{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li.current-menu-ancestor > a' => 'background-color: {{VALUE}};',
765	],
766	]
767	);
768
769	$this->end_controls_tab();
770	$this->end_controls_tabs();
771	$this->end_controls_section();
772
773	$this->start_controls_section(
774	'section_style_menu_icon',
775	[
776	'label' => esc_html__( 'Menu Item Icon', 'easy-elements' ),
777	'tab' => Controls_Manager::TAB_STYLE,
778	]
779	);
780
781	$this->add_control(
782	'icon_item_text_colors',
783	[
784	'label' => esc_html__( 'Color', 'easy-elements' ),
785	'type' => Controls_Manager::COLOR,
786	'selectors' => [
787	'{{WRAPPER}} .eel-menu-text-inner>i' => 'color: {{VALUE}};',
788	],
789	]
790	);
791	$this->add_responsive_control(
792	'icon_item_space',
793	[
794	'label' => esc_html__( 'Spacing', 'easy-elements' ),
795	'type' => Controls_Manager::SLIDER,
796	'size_units' => [ 'px', '%' ],
797	'range' => [
798	'px' => [ 'min' => -20, 'max' => 20 ],
799	'%' => [ 'min' => -100, 'max' => 100 ],
800	],
801	'selectors' => [
802	'{{WRAPPER}} .eel-menu-text-inner>i' => 'margin-right: {{SIZE}}{{UNIT}};',
803	],
804	]
805	);
806
807	$this->add_responsive_control(
808	'icon_item_top',
809	[
810	'label' => esc_html__( 'Spacing Top/Bottom', 'easy-elements' ),
811	'type' => \Elementor\Controls_Manager::SLIDER,
812	'size_units' => [ 'px', '%' ],
813	'range' => [
814	'px' => [
815	'min' => -30,
816	'max' => 30,
817	],
818	'%' => [
819	'min' => -100,
820	'max' => 100,
821	],
822	],
823	'selectors' => [
824	'{{WRAPPER}} .eel-menu-text-inner>i' => 'top: {{SIZE}}{{UNIT}}; position: relative; bottom: auto;',
825	],
826	]
827	);
828
829	$this->end_controls_section();
830
831	$this->start_controls_section(
832	'section_style_before_after_icon',
833	[
834	'label' => esc_html__( 'Before / After Icon', 'easy-elements' ),
835	'tab' => Controls_Manager::TAB_STYLE,
836	]
837	);
838
839	$this->add_control(
840	'before_icon_heading',
841	[
842	'label' => esc_html__( 'Before Icon', 'easy-elements' ),
843	'type' => Controls_Manager::HEADING,
844	]
845	);
846
847	$this->start_controls_tabs( 'before_icon_tabs' );
848
849	$this->start_controls_tab( 'before_icon_normal_tab', [ 'label' => esc_html__( 'Normal', 'easy-elements' ) ] );
850	$this->add_control(
851	'before_icon_color',
852	[
853	'label' => esc_html__( 'Color', 'easy-elements' ),
854	'type' => Controls_Manager::COLOR,
855	'selectors' => [
856	'{{WRAPPER}} .eel-menu-before-icon' => 'color: {{VALUE}};',
857	'{{WRAPPER}} .eel-menu-before-icon svg' => 'fill: {{VALUE}};',
858	],
859	]
860	);
861	$this->end_controls_tab();
862
863	$this->start_controls_tab( 'before_icon_hover_tab', [ 'label' => esc_html__( 'Hover', 'easy-elements' ) ] );
864	$this->add_control(
865	'before_icon_color_hover',
866	[
867	'label' => esc_html__( 'Color', 'easy-elements' ),
868	'type' => Controls_Manager::COLOR,
869	'selectors' => [
870	'{{WRAPPER}} .menu-item:hover > a .eel-menu-before-icon' => 'color: {{VALUE}};',
871	'{{WRAPPER}} .menu-item:hover > a .eel-menu-before-icon svg' => 'fill: {{VALUE}};',
872	],
873	]
874	);
875	$this->end_controls_tab();
876
877	$this->start_controls_tab( 'before_icon_active_tab', [ 'label' => esc_html__( 'Active', 'easy-elements' ) ] );
878	$this->add_control(
879	'before_icon_color_active',
880	[
881	'label' => esc_html__( 'Color', 'easy-elements' ),
882	'type' => Controls_Manager::COLOR,
883	'selectors' => [
884	'{{WRAPPER}} .menu-item.current-menu-item > a .eel-menu-before-icon, {{WRAPPER}} .menu-item.current-menu-ancestor > a .eel-menu-before-icon' => 'color: {{VALUE}};',
885	'{{WRAPPER}} .menu-item.current-menu-item > a .eel-menu-before-icon svg, {{WRAPPER}} .menu-item.current-menu-ancestor > a .eel-menu-before-icon svg' => 'fill: {{VALUE}};',
886	],
887	]
888	);
889	$this->end_controls_tab();
890
891	$this->end_controls_tabs();
892
893	$this->add_responsive_control(
894	'before_icon_size',
895	[
896	'label' => esc_html__( 'Size', 'easy-elements' ),
897	'type' => Controls_Manager::SLIDER,
898	'size_units' => [ 'px', 'em', 'rem' ],
899	'range' => [
900	'px' => [ 'min' => 6, 'max' => 80 ],
901	'em' => [ 'min' => 0.2, 'max' => 5, 'step' => 0.1 ],
902	'rem' => [ 'min' => 0.2, 'max' => 5, 'step' => 0.1 ],
903	],
904	'selectors' => [
905	'{{WRAPPER}} .eel-menu-before-icon' => 'font-size: {{SIZE}}{{UNIT}};',
906	'{{WRAPPER}} .eel-menu-before-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
907	],
908	]
909	);
910
911	$this->add_responsive_control(
912	'before_icon_spacing',
913	[
914	'label' => esc_html__( 'Spacing (Right)', 'easy-elements' ),
915	'type' => Controls_Manager::SLIDER,
916	'size_units' => [ 'px', 'em', '%' ],
917	'range' => [
918	'px' => [ 'min' => 0, 'max' => 50 ],
919	'em' => [ 'min' => 0, 'max' => 5, 'step' => 0.1 ],
920	'%' => [ 'min' => 0, 'max' => 100 ],
921	],
922	'selectors' => [
923	'{{WRAPPER}} .eel-menu-before-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
924	],
925	]
926	);
927
928	$this->add_responsive_control(
929	'before_icon_offset_y',
930	[
931	'label' => esc_html__( 'Offset Top/Bottom', 'easy-elements' ),
932	'type' => Controls_Manager::SLIDER,
933	'size_units' => [ 'px' ],
934	'range' => [
935	'px' => [ 'min' => -30, 'max' => 30 ],
936	],
937	'selectors' => [
938	'{{WRAPPER}} .eel-menu-before-icon' => 'position: relative; top: {{SIZE}}{{UNIT}};',
939	],
940	]
941	);
942
943	$this->add_control(
944	'after_icon_heading',
945	[
946	'label' => esc_html__( 'After Icon', 'easy-elements' ),
947	'type' => Controls_Manager::HEADING,
948	'separator' => 'before',
949	]
950	);
951
952	$this->start_controls_tabs( 'after_icon_tabs' );
953
954	$this->start_controls_tab( 'after_icon_normal_tab', [ 'label' => esc_html__( 'Normal', 'easy-elements' ) ] );
955	$this->add_control(
956	'after_icon_color',
957	[
958	'label' => esc_html__( 'Color', 'easy-elements' ),
959	'type' => Controls_Manager::COLOR,
960	'selectors' => [
961	'{{WRAPPER}} .eel-menu-after-icon' => 'color: {{VALUE}};',
962	'{{WRAPPER}} .eel-menu-after-icon svg' => 'fill: {{VALUE}};',
963	],
964	]
965	);
966	$this->end_controls_tab();
967
968	$this->start_controls_tab( 'after_icon_hover_tab', [ 'label' => esc_html__( 'Hover', 'easy-elements' ) ] );
969	$this->add_control(
970	'after_icon_color_hover',
971	[
972	'label' => esc_html__( 'Color', 'easy-elements' ),
973	'type' => Controls_Manager::COLOR,
974	'selectors' => [
975	'{{WRAPPER}} .menu-item:hover > a .eel-menu-after-icon' => 'color: {{VALUE}};',
976	'{{WRAPPER}} .menu-item:hover > a .eel-menu-after-icon svg' => 'fill: {{VALUE}};',
977	],
978	]
979	);
980	$this->end_controls_tab();
981
982	$this->start_controls_tab( 'after_icon_active_tab', [ 'label' => esc_html__( 'Active', 'easy-elements' ) ] );
983	$this->add_control(
984	'after_icon_color_active',
985	[
986	'label' => esc_html__( 'Color', 'easy-elements' ),
987	'type' => Controls_Manager::COLOR,
988	'selectors' => [
989	'{{WRAPPER}} .menu-item.current-menu-item > a .eel-menu-after-icon, {{WRAPPER}} .menu-item.current-menu-ancestor > a .eel-menu-after-icon' => 'color: {{VALUE}};',
990	'{{WRAPPER}} .menu-item.current-menu-item > a .eel-menu-after-icon svg, {{WRAPPER}} .menu-item.current-menu-ancestor > a .eel-menu-after-icon svg' => 'fill: {{VALUE}};',
991	],
992	]
993	);
994	$this->end_controls_tab();
995
996	$this->end_controls_tabs();
997
998	$this->add_responsive_control(
999	'after_icon_size',
1000	[
1001	'label' => esc_html__( 'Size', 'easy-elements' ),
1002	'type' => Controls_Manager::SLIDER,
1003	'size_units' => [ 'px', 'em', 'rem' ],
1004	'range' => [
1005	'px' => [ 'min' => 6, 'max' => 80 ],
1006	'em' => [ 'min' => 0.2, 'max' => 5, 'step' => 0.1 ],
1007	'rem' => [ 'min' => 0.2, 'max' => 5, 'step' => 0.1 ],
1008	],
1009	'selectors' => [
1010	'{{WRAPPER}} .eel-menu-after-icon' => 'font-size: {{SIZE}}{{UNIT}};',
1011	'{{WRAPPER}} .eel-menu-after-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1012	],
1013	]
1014	);
1015
1016	$this->add_responsive_control(
1017	'after_icon_spacing',
1018	[
1019	'label' => esc_html__( 'Spacing (Left)', 'easy-elements' ),
1020	'type' => Controls_Manager::SLIDER,
1021	'size_units' => [ 'px', 'em', '%' ],
1022	'range' => [
1023	'px' => [ 'min' => 0, 'max' => 50 ],
1024	'em' => [ 'min' => 0, 'max' => 5, 'step' => 0.1 ],
1025	'%' => [ 'min' => 0, 'max' => 100 ],
1026	],
1027	'selectors' => [
1028	'{{WRAPPER}} .eel-menu-after-icon' => 'padding-left: {{SIZE}}{{UNIT}};',
1029	],
1030	]
1031	);
1032
1033	$this->add_responsive_control(
1034	'after_icon_offset_y',
1035	[
1036	'label' => esc_html__( 'Offset Top/Bottom', 'easy-elements' ),
1037	'type' => Controls_Manager::SLIDER,
1038	'size_units' => [ 'px' ],
1039	'range' => [
1040	'px' => [ 'min' => -30, 'max' => 30 ],
1041	],
1042	'selectors' => [
1043	'{{WRAPPER}} .eel-menu-after-icon' => 'position: relative; top: {{SIZE}}{{UNIT}};',
1044	],
1045	]
1046	);
1047
1048	$this->end_controls_section();
1049
1050	$this->start_controls_section(
1051	'section_style_menu_arrow_icon',
1052	[
1053	'label' => esc_html__( 'Dropdown Arrow', 'easy-elements' ),
1054	'tab' => Controls_Manager::TAB_STYLE,
1055	]
1056	);
1057
1058	$this->add_control(
1059	'icon_arrow_item_text_colors',
1060	[
1061	'label' => esc_html__( 'Color', 'easy-elements' ),
1062	'type' => Controls_Manager::COLOR,
1063	'selectors' => [
1064	'{{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .menu-link .submenu-parent-icon svg path' => 'fill: {{VALUE}};',
1065	],
1066	]
1067	);
1068	$this->add_responsive_control(
1069	'icon_arrow_item_space',
1070	[
1071	'label' => esc_html__( 'Spacing', 'easy-elements' ),
1072	'type' => Controls_Manager::SLIDER,
1073	'size_units' => [ 'px', '%' ],
1074	'range' => [
1075	'px' => [ 'min' => -20, 'max' => 20 ],
1076	'%' => [ 'min' => -100, 'max' => 100 ],
1077	],
1078	'selectors' => [
1079	'{{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .menu-link .submenu-parent-icon svg' => 'margin-left: {{SIZE}}{{UNIT}};',
1080	],
1081	]
1082	);
1083
1084	$this->add_responsive_control(
1085	'arrow_top',
1086	[
1087	'label' => esc_html__( 'Spacing Top/Bottom', 'easy-elements' ),
1088	'type' => \Elementor\Controls_Manager::SLIDER,
1089	'size_units' => [ 'px', '%' ],
1090	'range' => [
1091	'px' => [
1092	'min' => -30,
1093	'max' => 30,
1094	],
1095	'%' => [
1096	'min' => -100,
1097	'max' => 100,
1098	],
1099	],
1100	'selectors' => [
1101	'{{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu .menu-item-has-children .menu-link .submenu-parent-icon svg' => 'top: {{SIZE}}{{UNIT}}; position: relative; bottom: auto;',
1102	],
1103	]
1104	);
1105
1106	$this->end_controls_section();
1107
1108	$this->start_controls_section(
1109	'section_style_menu_badge',
1110	[
1111	'label' => esc_html__( 'Menu Item Badge', 'easy-elements' ),
1112	'tab' => Controls_Manager::TAB_STYLE,
1113	]
1114	);
1115
1116	$this->add_control(
1117	'badge_text_colors',
1118	[
1119	'label' => esc_html__( 'Color', 'easy-elements' ),
1120	'type' => Controls_Manager::COLOR,
1121	'selectors' => [
1122	'{{WRAPPER}} .eel-menu-badge' => 'color: {{VALUE}};',
1123	],
1124	]
1125	);
1126
1127	$this->add_control(
1128	'badge_bg_color',
1129	[
1130	'label' => esc_html__( 'Background Color', 'easy-elements' ),
1131	'type' => Controls_Manager::COLOR,
1132	'selectors' => [
1133	'{{WRAPPER}} .eel-menu-badge' => 'background-color: {{VALUE}};',
1134	],
1135	]
1136	);
1137
1138	$this->add_group_control(
1139	Group_Control_Typography::get_type(),
1140	[
1141	'name' => 'badge_typography',
1142	'selector' => '{{WRAPPER}} .eel-menu-badge',
1143	]
1144	);
1145
1146	$this->add_responsive_control(
1147	'badge_padding',
1148	[
1149	'label' => esc_html__( 'Padding', 'easy-elements' ),
1150	'type' => Controls_Manager::DIMENSIONS,
1151	'selectors' => [
1152	'{{WRAPPER}} .eel-menu-badge' =>
1153	'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1154	],
1155	]
1156	);
1157
1158	$this->add_group_control(
1159	\Elementor\Group_Control_Border::get_type(),
1160	[
1161	'name' => 'badge_border',
1162	'selector' => '{{WRAPPER}} .eel-menu-badge',
1163	]
1164	);
1165
1166	$this->add_control(
1167	'badge_radius',
1168	[
1169	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1170	'type' => Controls_Manager::DIMENSIONS,
1171	'selectors' => [
1172	'{{WRAPPER}} .eel-menu-badge' =>
1173	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1174	],
1175	]
1176	);
1177
1178	$this->add_responsive_control(
1179	'badge_top',
1180	[
1181	'label' => esc_html__( 'Top/Bottom', 'easy-elements' ),
1182	'type' => \Elementor\Controls_Manager::SLIDER,
1183	'size_units' => [ 'px', '%' ],
1184	'range' => [
1185	'px' => [
1186	'min' => -200,
1187	'max' => 200,
1188	],
1189	'%' => [
1190	'min' => -100,
1191	'max' => 100,
1192	],
1193	],
1194	'selectors' => [
1195	'{{WRAPPER}} .eel-menu-badge' => 'top: {{SIZE}}{{UNIT}}; bottom: auto;',
1196	],
1197	]
1198	);
1199
1200	$this->add_responsive_control(
1201	'badge_left',
1202	[
1203	'label' => esc_html__( 'Left/Right', 'easy-elements' ),
1204	'type' => \Elementor\Controls_Manager::SLIDER,
1205	'size_units' => [ 'px', '%' ],
1206	'range' => [
1207	'px' => [
1208	'min' => -200,
1209	'max' => 200,
1210	],
1211	'%' => [
1212	'min' => -100,
1213	'max' => 100,
1214	],
1215	],
1216	'selectors' => [
1217	'{{WRAPPER}} .eel-menu-badge' => 'right: {{SIZE}}{{UNIT}}; left: auto;',
1218	],
1219	]
1220	);
1221	$this->end_controls_section();
1222
1223	$this->start_controls_section(
1224	'section_mobile_menu',
1225	[
1226	'label' => __( 'Mobile Menu', 'easy-elements' ),
1227	'tab' => Controls_Manager::TAB_STYLE,
1228	'condition' => [
1229	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1230	],
1231	]
1232	);
1233
1234	$this->add_control(
1235	'bg_full_color_menu_item',
1236	[
1237	'label' => __( 'Background Color', 'easy-elements' ),
1238	'type' => Controls_Manager::COLOR,
1239	'default' => '',
1240	'selectors' => [
1241	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav' => 'background-color: {{VALUE}};',
1242	],
1243	]
1244	);
1245
1246	$this->add_control(
1247	'close_icon_color',
1248	[
1249	'label' => __( 'Close Icon Color', 'easy-elements' ),
1250	'type' => Controls_Manager::COLOR,
1251	'selectors' => [
1252	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close' => 'color: {{VALUE}};',
1253	],
1254	]
1255	);
1256
1257	$this->start_controls_tabs( 'tabs_menu_item_style_mobile' );
1258
1259	$this->start_controls_tab(
1260	'tab_menu_item_normal_m',
1261	[
1262	'label' => __( 'Normal', 'easy-elements' ),
1263	]
1264	);
1265
1266	$this->add_control(
1267	'color_menu_item_m',
1268	[
1269	'label' => __( 'Color', 'easy-elements' ),
1270	'type' => Controls_Manager::COLOR,
1271	'selectors' => [
1272	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li a' => 'color: {{VALUE}};',
1273	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu .submenu-parent-icon svg path' => 'fill: {{VALUE}};',
1274	],
1275	]
1276	);
1277	$this->add_group_control(
1278	\Elementor\Group_Control_Typography::get_type(),
1279	[
1280	'name' => 'color_menu_item_m_typography',
1281	'label' => esc_html__('Typography', 'easy-elements' ),
1282	'selector' => '{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li a',
1283	]
1284	);
1285
1286	// Padding (Responsive)
1287	$this->add_responsive_control(
1288	'mobile_padding',
1289	[
1290	'label' => esc_html__( 'Padding', 'easy-elements' ),
1291	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1292	'size_units' => [ 'px', '%', 'em', 'rem' ],
1293	'selectors' => [
1294	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu > li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1295	],
1296	'condition' => [
1297	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1298	],
1299	]
1300	);
1301
1302	$this->add_control(
1303	'mobile_humburger_icon_heading',
1304	[
1305	'label' => esc_html__( 'Hamburger Icon', 'easy-elements' ),
1306	'type' => \Elementor\Controls_Manager::HEADING,
1307	'separator' => 'before',
1308	'condition' => [
1309	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1310	],
1311	]
1312	);
1313
1314	// Hamburger Icon Color
1315	$this->add_control(
1316	'mobile_humburger_icon_color',
1317	[
1318	'label' => esc_html__( 'Icon Color', 'easy-elements' ),
1319	'type' => \Elementor\Controls_Manager::COLOR,
1320	'selectors' => [
1321	'{{WRAPPER}} .eel-vertical-menu-icon-mobile i' => 'color: {{VALUE}};',
1322	'{{WRAPPER}} .eel-vertical-menu-icon-mobile svg path' => 'fill: {{VALUE}};',
1323	],
1324	'condition' => [
1325	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1326	],
1327	]
1328	);
1329
1330	// Hamburger Icon Size (Responsive)
1331	$this->add_responsive_control(
1332	'mobile_humburger_icon_size',
1333	[
1334	'label' => esc_html__( 'Icon Size', 'easy-elements' ),
1335	'type' => \Elementor\Controls_Manager::SLIDER,
1336	'size_units' => [ 'px', 'em', 'rem' ],
1337	'range' => [
1338	'px' => [
1339	'min' => 10,
1340	'max' => 100,
1341	],
1342	],
1343	'selectors' => [
1344	'{{WRAPPER}} .eel-vertical-menu-icon-mobile i' => 'font-size: {{SIZE}}{{UNIT}};',
1345	'{{WRAPPER}} .eel-vertical-menu-icon-mobile svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1346	],
1347	'condition' => [
1348	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1349	],
1350	]
1351	);
1352
1353	$this->add_control(
1354	'mobile_close_icon_heading',
1355	[
1356	'label' => esc_html__( 'Close Icon', 'easy-elements' ),
1357	'type' => \Elementor\Controls_Manager::HEADING,
1358	'separator' => 'before',
1359	'condition' => [
1360	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1361	],
1362	]
1363	);
1364
1365	// Close Icon Color
1366	$this->add_control(
1367	'mobile_close_icon_color',
1368	[
1369	'label' => esc_html__( 'Color', 'easy-elements' ),
1370	'type' => \Elementor\Controls_Manager::COLOR,
1371	'selectors' => [
1372	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close, {{WRAPPER}} .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close svg path' => 'color: {{VALUE}}; fill: {{VALUE}};',
1373	],
1374	'condition' => [
1375	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1376	],
1377	]
1378	);
1379
1380	// Close Icon Border Control
1381	$this->add_group_control(
1382	\Elementor\Group_Control_Border::get_type(),
1383	[
1384	'name' => 'mobile_close_icon_border',
1385	'label' => esc_html__( 'Border', 'easy-elements' ),
1386	'selector' => '{{WRAPPER}} .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close',
1387	'condition' => [
1388	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1389	],
1390	]
1391	);
1392
1393	$this->add_responsive_control(
1394	'mobile_close_icon_radius',
1395	[
1396	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1397	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1398	'size_units' => [ 'px', '%', 'em' ],
1399	'selectors' => [
1400	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1401	],
1402	'condition' => [
1403	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1404	],
1405	]
1406	);
1407
1408	$this->end_controls_tab();
1409
1410	$this->start_controls_tab(
1411	'tab_menu_item_hover_m',
1412	[
1413	'label' => __( 'Hover', 'easy-elements' ),
1414	]
1415	);
1416
1417	$this->add_control(
1418	'color_menu_item_hover_m',
1419	[
1420	'label' => __( 'Color', 'easy-elements' ),
1421	'type' => Controls_Manager::COLOR,
1422	'selectors' => [
1423	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li > a:hover' => 'color: {{VALUE}};',
1424	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li > a:hover .submenu-parent-icon svg path' => 'fill: {{VALUE}};',
1425	],
1426	]
1427	);
1428
1429	$this->end_controls_tab();
1430
1431	$this->start_controls_tab(
1432	'tab_menu_item_active_m',
1433	[
1434	'label' => __( 'Active', 'easy-elements' ),
1435	]
1436	);
1437
1438	$this->add_control(
1439	'color_menu_item_active_m',
1440	[
1441	'label' => __( 'Color', 'easy-elements' ),
1442	'type' => Controls_Manager::COLOR,
1443	'selectors' => [
1444	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li.menu-item.current-menu-item > a' => 'color: {{VALUE}};',
1445	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li.menu-item.current-menu-item > .submenu-parent-icon svg path' => 'fill: {{VALUE}};',
1446	],
1447	]
1448	);
1449
1450	$this->end_controls_tab();
1451	$this->end_controls_tabs();
1452	$this->end_controls_section();
1453	}
1454
1455	/**
1456	* Render Nav Menu output on the frontend.
1457	*
1458	* Written in PHP and used to generate the final HTML.
1459	*
1460	* @since 1.3.0
1461	* @access protected
1462	*/
1463	protected function render() {
1464	$settings = $this->get_settings_for_display();
1465	$menus = $this->get_available_menus();
1466	if ( empty( $menus ) ) {
1467	return false;
1468	}
1469	$submenu_parent_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>';
1470
1471	$mobile_icon = '';
1472	// Check if custom mobile icon exists
1473	if ( ! empty( $settings['mobile_hamburger_icon']['value'] ) ) {
1474	ob_start();
1475	\Elementor\Icons_Manager::render_icon(
1476	$settings['mobile_hamburger_icon'],
1477	[ 'aria-hidden' => 'true' ]
1478	);
1479	$mobile_icon = ob_get_clean();
1480	} else {
1481	$mobile_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
1482	<path d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"></path>
1483	</svg>';
1484	}
1485
1486	// Desktop Menu
1487	$items_wrap = '<div class="eel-vertical-menu-wrap">
1488	<div class="eel-vertical-menu-icon-mobile">' . $mobile_icon . '</div>
1489	<ul id="%1$s" class="%2$s">%3$s</ul>
1490	</div>';
1491
1492	if ( !class_exists( 'Easy_Elements_Pro' ) ) {
1493	$submenu_animation = 'eel_animation_slide_down';
1494	$submenu_type = 'eel_hover';
1495	$position_fixed = '';
1496	} else {
1497	$submenu_animation = ! empty( $settings['submenu_animation'] ) ? $settings['submenu_animation'] : '';
1498	$submenu_type = ! empty( $settings['submenu_type'] ) ? $settings['submenu_type'] : 'eel_hover';
1499	$position_fixed = ! empty( $settings['eel_position_fixed'] ) ? 'eel_position_fixed' : '';
1500	}
1501
1502	$menu_before_icon_html = '';
1503	$menu_after_icon_html = '';
1504	$icon_position = isset( $settings['menu_icon_position'] ) ? $settings['menu_icon_position'] : 'none';
1505
1506	if ( 'none' !== $icon_position && ! empty( $settings['menu_item_position_icon']['value'] ) ) {
1507	ob_start();
1508	\Elementor\Icons_Manager::render_icon( $settings['menu_item_position_icon'], [ 'aria-hidden' => 'true' ] );
1509	$icon_markup = ob_get_clean();
1510
1511	$allowed_icon_tags = [
1512	'i' => [
1513	'class' => true,
1514	'aria-hidden' => true,
1515	],
1516	'span' => [
1517	'class' => true,
1518	'aria-hidden' => true,
1519	'style' => true,
1520	],
1521	'svg' => [
1522	'class' => true,
1523	'xmlns' => true,
1524	'xmlns:xlink' => true,
1525	'width' => true,
1526	'height' => true,
1527	'viewbox' => true,
1528	'aria-hidden' => true,
1529	'role' => true,
1530	'focusable' => true,
1531	'fill' => true,
1532	'preserveaspectratio' => true,
1533	'style' => true,
1534	],
1535	'path' => [
1536	'd' => true,
1537	'fill' => true,
1538	'stroke' => true,
1539	'stroke-width' => true,
1540	'stroke-linecap' => true,
1541	],
1542	'g' => [
1543	'fill' => true,
1544	'transform' => true,
1545	],
1546	'circle' => [
1547	'cx' => true,
1548	'cy' => true,
1549	'r' => true,
1550	'fill' => true,
1551	],
1552	'rect' => [
1553	'x' => true,
1554	'y' => true,
1555	'width' => true,
1556	'height' => true,
1557	'fill' => true,
1558	],
1559	'defs' => [],
1560	'symbol' => [
1561	'id' => true,
1562	'viewbox' => true,
1563	],
1564	'use' => [
1565	'href' => true,
1566	'xlink:href' => true,
1567	],
1568	'title' => [],
1569	];
1570	$icon_markup = wp_kses( $icon_markup, $allowed_icon_tags );
1571
1572	if ( 'before' === $icon_position ) {
1573	$menu_before_icon_html = '<span class="eel-menu-before-icon">' . $icon_markup . '</span>';
1574	} elseif ( 'after' === $icon_position ) {
1575	$menu_after_icon_html = '<span class="eel-menu-after-icon">' . $icon_markup . '</span>';
1576	}
1577	}
1578
1579	$args = [
1580	'echo' => false,
1581	'menu' => $settings['menu'],
1582	'fallback_cb' => '__return_empty_string',
1583	'menu_class' => 'menu desktop-menu eel-vertical-verticalmenu ' . $submenu_animation . ' ' . $submenu_type . ' ' . $position_fixed,
1584	'container_class' => 'eel-vertical-menu-elelmentor-widget menu-wrapper eel-vertical-menu-container eel-vertical-menu-area',
1585	'items_wrap' => $items_wrap,
1586	'submenu_parent_icon' => $submenu_parent_icon,
1587	'is_mobile_menu' => '',
1588	'walker' => new \Easyel_vertical_Menu_Nav_Walker(),
1589	'easyel_navigation_vertical_menu' => true,
1590	'submenu_type' => $submenu_type,
1591	'menu_before_icon' => $menu_before_icon_html,
1592	'menu_after_icon' => $menu_after_icon_html,
1593	];
1594	echo wp_nav_menu( $args );
1595
1596	// Mobile Menu — each widget renders its own sidebar
1597	$settings = $this->get_settings_for_display();
1598	$open_position = !empty( $settings['mobile_menu_open_position'] ) ? $settings['mobile_menu_open_position'] : 'right';
1599
1600	if ( ! empty( $settings['mobile_menu_breakpoint'] ) ) :
1601	$this->add_render_attribute( 'eel-vertical-menu-mobile', 'class', 'sidebar-on-mobile-vertical-nav eel-mobile-open-position-' . $open_position );
1602	$widget_instance = $this;
1603
1604	$submenu_parent_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>';
1605
1606	$mobile_args = [
1607	'echo' => false,
1608	'menu' => $settings['menu'],
1609	'fallback_cb' => '__return_empty_string',
1610	'menu_class' => 'menu mobile-menu eel-vertical-verticalmenu',
1611	'container' => false,
1612	'walker' => new \Easyel_vertical_Menu_Nav_Walker(),
1613	'easyel_navigation_vertical_menu' => true,
1614	'submenu_parent_icon' => $submenu_parent_icon,
1615	'menu_before_icon' => $menu_before_icon_html,
1616	'menu_after_icon' => $menu_after_icon_html,
1617	];
1618	?>
1619	<nav <?php $widget_instance->print_render_attribute_string( 'eel-vertical-menu-mobile' ); ?>>
1620	<span class="eel-vertical-menu-icon-close">
1621	<?php
1622	if ( ! empty( $settings['mobile_close_icon']['value'] ) ) {
1623	\Elementor\Icons_Manager::render_icon( $settings['mobile_close_icon'], [ 'aria-hidden' => 'true' ] );
1624	} else { ?>
1625	<i class="unicon-close"></i>
1626	<?php }
1627	?>
1628	</span>
1629	<?php echo wp_nav_menu( $mobile_args ); ?>
1630	</nav>
1631	<?php
1632	endif;
1633
1634	$settings = $this->get_settings_for_display();
1635
1636	if ( ! empty( $settings['mobile_menu_breakpoint'] ) ) :
1637	$mobile_breakpoint = absint( $settings['mobile_menu_breakpoint'] );
1638	$widget_selector = '.elementor-element-' . $this->get_id();
1639	?>
1640	<style>
1641	@media (max-width: <?php echo esc_attr( $mobile_breakpoint ); ?>px) {
1642	<?php echo esc_attr( $widget_selector ); ?> .eel-vertical-menu-wrap > ul {
1643	display: none !important;
1644	}
1645	<?php echo esc_attr( $widget_selector ); ?> .eel-vertical-menu-icon-mobile {
1646	display: block !important;
1647	}
1648	<?php echo esc_attr( $widget_selector ); ?> .eel-vertical-menu-content-part.sub-menu{
1649	width: 100% !important;
1650	}
1651	}
1652	@media (min-width: <?php echo esc_attr( $mobile_breakpoint + 1 ); ?>px) {
1653	<?php echo esc_attr( $widget_selector ); ?> .eel-vertical-menu-icon-mobile{
1654	display: none !important;
1655	}
1656	}
1657	</style>
1658	<?php endif;
1659	}
1660	}