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

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

1,335 lines 42.9 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	$menutype = [
161	'eel_click' => __( 'Click', 'easy-elements' ),
162	'eel_hover' => __( 'Hover', 'easy-elements' ),
163	];
164
165	if ( ! apply_filters('easyel/pro_enabled', false) ) {
166	$menutype['eel_click'] = __('Click (Pro)', 'easy-elements');
167	}
168
169	$this->add_control(
170	'submenu_type',
171	[
172	'label' => __( 'Dropdown Type', 'easy-elements' ),
173	'type' => Controls_Manager::SELECT,
174	'default' => 'eel_hover',
175	'options' => $menutype,
176	]
177	);
178
179	$animationOptions = [
180	'eel_animation_slide_down' => __( 'Animation Down', 'easy-elements' ),
181	'eel_animation_slide_up' => __( 'Animation Up', 'easy-elements' ),
182	'eel_animation_fade' => __( 'Animation Fade', 'easy-elements' ),
183	'eel_animation_right' => __( 'Animation Right', 'easy-elements' ),
184	'eel_animation_left' => __( 'Animation Left', 'easy-elements' ),
185	'eel_animation_zoom' => __( 'Animation Zoom', 'easy-elements' ),
186	];
187
188	if ( ! apply_filters('easyel/pro_enabled', false) ) {
189	$animationOptions['eel_animation_slide_up'] = __('Animation Up (Pro)', 'easy-elements');
190	$animationOptions['eel_animation_fade'] = __('Animation Fade (Pro)', 'easy-elements');
191	$animationOptions['eel_animation_right'] = __('Animation Right (Pro)', 'easy-elements');
192	$animationOptions['eel_animation_left'] = __('Animation Left (Pro)', 'easy-elements');
193	$animationOptions['eel_animation_zoom'] = __('Animation Zoom (Pro)', 'easy-elements');
194	}
195
196	$this->add_control(
197	'submenu_animation',
198	[
199	'label' => __( 'Dropdown Animation', 'easy-elements' ),
200	'type' => Controls_Manager::SELECT,
201	'default' => 'eel_animation_slide_down',
202	'options' => $animationOptions,
203	'condition' => [
204	'submenu_type' => 'eel_hover',
205	]
206	]
207	);
208
209	$this->add_control(
210	'mobile_menu_breakpoint',
211	[
212	'label' => __( 'Mobile Menu Breakpoint', 'easy-elements' ),
213	'type' => Controls_Manager::SELECT,
214	'default' => '992',
215	'options' => [
216	'480' => __( '480px - Small devices', 'easy-elements' ),
217	'576' => __( '576px - Medium devices', 'easy-elements' ),
218	'768' => __( '768px - Tablets', 'easy-elements' ),
219	'992' => __( '992px - Desktop small', 'easy-elements' ),
220	],
221	'description' => __( 'Select the screen width at which the mobile menu will activate.', 'easy-elements' ),
222	'separator' => 'before',
223	]
224	);
225
226	$this->add_control(
227	'mobile_menu_open_position',
228	[
229	'label' => __( 'Mobile Menu Open Position', 'easy-elements' ),
230	'type' => Controls_Manager::SELECT,
231	'default' => 'right',
232	'options' => [
233	'top' => __( 'Top', 'easy-elements' ),
234	'right' => __( 'Right', 'easy-elements' ),
235	],
236	]
237	);
238
239	$this->add_responsive_control(
240	'mobile_menu_sidebar_width',
241	[
242	'label' => __( 'Menu Sidebar Width', 'easy-elements' ),
243	'type' => \Elementor\Controls_Manager::SLIDER,
244	'size_units' => [ 'px', '%', 'vw' ],
245	'range' => [
246	'px' => [
247	'min' => 200,
248	'max' => 500,
249	],
250	'%' => [
251	'min' => 50,
252	'max' => 100,
253	],
254	'vw' => [
255	'min' => 20,
256	'max' => 100,
257	],
258	],
259	'selectors' => [
260	'.sidebar-on-mobile-vertical-nav' => 'max-width: {{SIZE}}{{UNIT}} !important;',
261	],
262	]
263	);
264
265	$this->add_control(
266	'mobile_hamburger_icon',
267	[
268	'label' => esc_html__( 'Choose Hamburger Icon', 'easy-elements' ),
269	'type' => \Elementor\Controls_Manager::ICONS,
270	'fa4compatibility' => 'icon',
271	'default' => [],
272	'condition' => [
273	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
274	]
275	]
276	);
277
278	$this->add_control(
279	'mobile_close_icon',
280	[
281	'label' => esc_html__( 'Choose Close Icon', 'easy-elements' ),
282	'type' => \Elementor\Controls_Manager::ICONS,
283	'fa4compatibility' => 'icon',
284	'default' => [],
285	'condition' => [
286	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
287	]
288	]
289	);
290	$this->end_controls_section();
291	}
292
293	/**
294	* Register Nav Menu General Controls.
295	*
296	* @since 1.3.0
297	* @access protected
298	*/
299	protected function register_style_content_controls() {
300
301	$this->start_controls_section(
302	'section_style_main-menu',
303	[
304	'label' => __( 'Main Menu', 'easy-elements' ),
305	'tab' => Controls_Manager::TAB_STYLE,
306	]
307	);
308
309	$this->start_controls_tabs( 'nav_color_tabs' );
310
311	$this->start_controls_tab(
312	'nav_color_normal',
313	[
314	'label' => esc_html__( 'Normal', 'easy-elements' ),
315	]
316	);
317
318	$this->add_control(
319	'nav_text_color',
320	[
321	'label' => esc_html__( 'Color', 'easy-elements' ),
322	'type' => Controls_Manager::COLOR,
323	'selectors' => [
324	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' => 'color: {{VALUE}};',
325	],
326	]
327	);
328	$this->add_control(
329	'nav_bg_color',
330	[
331	'label' => esc_html__( 'Background Color', 'easy-elements' ),
332	'type' => Controls_Manager::COLOR,
333	'selectors' => [
334	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' => 'background-color: {{VALUE}};',
335	],
336	]
337	);
338	$this->add_group_control(
339	Group_Control_Typography::get_type(),
340	[
341	'name' => 'nav_typography',
342	'label' => esc_html__( 'Typography', 'easy-elements' ),
343	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a',
344	]
345	);
346
347	$this->add_group_control(
348	\Elementor\Group_Control_Border::get_type(),
349	[
350	'name' => 'item__border',
351	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a',
352	]
353	);
354
355	$this->add_group_control(
356	\Elementor\Group_Control_Text_Shadow::get_type(),
357	[
358	'name' => 'nav_text_shadow',
359	'label' => esc_html__( 'Text Shadow', 'easy-elements' ),
360	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a',
361	]
362	);
363
364	$this->add_responsive_control(
365	'nav_padding',
366	[
367	'label' => esc_html__( 'Padding', 'easy-elements' ),
368	'type' => Controls_Manager::DIMENSIONS,
369	'size_units' => [ 'px', 'em', '%' ],
370	'selectors' => [
371	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
372	],
373	]
374	);
375
376	$this->add_responsive_control(
377	'nav_margin',
378	[
379	'label' => esc_html__( 'Margin', 'easy-elements' ),
380	'type' => Controls_Manager::DIMENSIONS,
381	'size_units' => [ 'px', 'em', '%' ],
382	'selectors' => [
383	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
384	],
385	]
386	);
387
388	$this->add_responsive_control(
389	'nav_menu_border_radius',
390	[
391	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
392	'type' => Controls_Manager::DIMENSIONS,
393	'size_units' => [ 'px', '%' ],
394	'selectors' => [
395	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item > a' =>
396	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
397	],
398	]
399	);
400
401	$this->end_controls_tab();
402
403	$this->start_controls_tab(
404	'nav_color_hover',
405	[
406	'label' => esc_html__( 'Hover', 'easy-elements' ),
407	]
408	);
409
410	$this->add_control(
411	'nav_hover_color',
412	[
413	'label' => esc_html__( 'Color', 'easy-elements' ),
414	'type' => Controls_Manager::COLOR,
415	'selectors' => [
416	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item:hover > a' => 'color: {{VALUE}};',
417	],
418	]
419	);
420	$this->add_control(
421	'nav_bg_color_hover',
422	[
423	'label' => esc_html__( 'Background Color', 'easy-elements' ),
424	'type' => Controls_Manager::COLOR,
425	'selectors' => [
426	'{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item:hover > a' => 'background-color: {{VALUE}};',
427	],
428	]
429	);
430
431	$this->add_group_control(
432	\Elementor\Group_Control_Border::get_type(),
433	[
434	'name' => 'item__border_hover',
435	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .menu > .menu-item:hover > a',
436	]
437	);
438
439	$this->end_controls_tab();
440
441	/* Active */
442	$this->start_controls_tab(
443	'nav_color_active',
444	[
445	'label' => esc_html__( 'Active', 'easy-elements' ),
446	]
447	);
448
449	$this->add_control(
450	'nav_active_color',
451	[
452	'label' => esc_html__( 'Color', 'easy-elements' ),
453	'type' => Controls_Manager::COLOR,
454	'selectors' => [
455	'{{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}};',
456	],
457	]
458	);
459
460	$this->add_control(
461	'nav_bg_color_active',
462	[
463	'label' => esc_html__( 'Background Color', 'easy-elements' ),
464	'type' => Controls_Manager::COLOR,
465	'selectors' => [
466	'{{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}};',
467	],
468	]
469	);
470	$this->add_group_control(
471	\Elementor\Group_Control_Border::get_type(),
472	[
473	'name' => 'item__border_active',
474	'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',
475	]
476	);
477	$this->end_controls_tab();
478	$this->end_controls_tabs();
479	$this->end_controls_section();
480	do_action( 'easyel_vertical_after_submenu_fields_el', $this );
481
482	$this->start_controls_section(
483	'section_style_dropdown',
484	[
485	'label' => esc_html__( 'Dropdown Menu', 'easy-elements' ),
486	'tab' => Controls_Manager::TAB_STYLE,
487	]
488	);
489
490	$this->add_control(
491	'dropdown_bg_color',
492	[
493	'label' => esc_html__( 'Background Color', 'easy-elements' ),
494	'type' => Controls_Manager::COLOR,
495	'selectors' => [
496	'{{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}};',
497	],
498	]
499	);
500
501	$this->add_group_control(
502	\Elementor\Group_Control_Border::get_type(),
503	[
504	'name' => 'dropdown_border',
505	'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)',
506	]
507	);
508
509	$this->add_responsive_control(
510	'dropdown_padding',
511	[
512	'label' => esc_html__( 'Padding', 'easy-elements' ),
513	'type' => Controls_Manager::DIMENSIONS,
514	'selectors' => [
515	'{{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)' =>
516	'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
517	],
518	]
519	);
520
521	$this->add_responsive_control(
522	'dropdown_border_radius',
523	[
524	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
525	'type' => Controls_Manager::DIMENSIONS,
526	'size_units' => [ 'px', '%' ],
527	'selectors' => [
528	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part),
529	{{WRAPPER}} .eel-vertical-menu-area .eel-vertical-menu-wrap ul.eel-vertical-verticalmenu
530	.menu-item-has-children .sub-menu:not(.eel-vertical-menu-content-part)' =>
531	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
532	],
533	]
534	);
535
536
537	$this->add_control(
538	'item_title',
539	[
540	'label' => esc_html__( 'Dropdown Item', 'easy-elements' ),
541	'type' => \Elementor\Controls_Manager::HEADING,
542	'separator' => 'before',
543	]
544	);
545
546	/* =========================
547	* Dropdown Item Tabs
548	* ========================= */
549	$this->start_controls_tabs( 'dropdown_item_tabs' );
550
551	/* Normal */
552	$this->start_controls_tab(
553	'dropdown_item_normal',
554	[
555	'label' => esc_html__( 'Normal', 'easy-elements' ),
556	]
557	);
558
559	$this->add_control(
560	'dropdown_item_color',
561	[
562	'label' => esc_html__( 'Color', 'easy-elements' ),
563	'type' => Controls_Manager::COLOR,
564	'selectors' => [
565	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a' => 'color: {{VALUE}};',
566	],
567	]
568	);
569
570	$this->add_control(
571	'dropdown_item_bg',
572	[
573	'label' => esc_html__( 'Background Color', 'easy-elements' ),
574	'type' => Controls_Manager::COLOR,
575	'selectors' => [
576	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a' => 'background-color: {{VALUE}};',
577	],
578	]
579	);
580
581	$this->add_group_control(
582	Group_Control_Typography::get_type(),
583	[
584	'name' => 'dropdown_typography',
585	'selector' => '{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a',
586	]
587	);
588
589	$this->add_group_control(
590	\Elementor\Group_Control_Border::get_type(),
591	[
592	'name' => 'dropdown_item_border',
593	'selector' =>'{{WRAPPER}} .eel-vertical-menu-area ul.eel-vertical-verticalmenu ul.sub-menu:not(.eel-vertical-menu-content-part) li+li',
594	]
595	);
596
597	$this->add_responsive_control(
598	'dropdown_item_border_radius',
599	[
600	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
601	'type' => Controls_Manager::DIMENSIONS,
602	'size_units' => [ 'px', '%' ],
603	'selectors' => [
604	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a' =>
605	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
606	],
607	]
608	);
609
610	$this->add_responsive_control(
611	'per_item_padding',
612	[
613	'label' => esc_html__( 'Padding', 'easy-elements' ),
614	'type' => Controls_Manager::DIMENSIONS,
615	'selectors' => [
616	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li > a' =>'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
617	],
618	]
619	);
620
621	$this->add_responsive_control(
622	'width_dropdown_full',
623	[
624	'label' => __( 'Dropdown Width', 'easy-elements' ),
625	'type' => Controls_Manager::SLIDER,
626	'range' => [
627	'px' => [
628	'min' => 0,
629	'max' => 500,
630	],
631	],
632	'selectors' => [
633	'{{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)'
634	=> 'width: {{SIZE}}{{UNIT}};',
635	],
636	]
637	);
638
639
640	$this->end_controls_tab();
641
642	/* Hover */
643	$this->start_controls_tab(
644	'dropdown_item_hover',
645	[
646	'label' => esc_html__( 'Hover', 'easy-elements' ),
647	]
648	);
649
650	$this->add_control(
651	'dropdown_item_hover_color',
652	[
653	'label' => esc_html__( 'Color', 'easy-elements' ),
654	'type' => Controls_Manager::COLOR,
655	'selectors' => [
656	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li:hover > a' => 'color: {{VALUE}};',
657	],
658	]
659	);
660
661	$this->add_control(
662	'dropdown_item_hover_bg',
663	[
664	'label' => esc_html__( 'Background Color', 'easy-elements' ),
665	'type' => Controls_Manager::COLOR,
666	'selectors' => [
667	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li:hover > a' => 'background-color: {{VALUE}};',
668	],
669	]
670	);
671
672	$this->add_control(
673	'dropdown_item_hover_border_color',
674	[
675	'label' => esc_html__( 'Border Color', 'easy-elements' ),
676	'type' => Controls_Manager::COLOR,
677	'selectors' => [
678	'{{WRAPPER}} .eel-vertical-menu-wrap .sub-menu:not(.eel-vertical-menu-content-part) li:hover > a' => 'border-color: {{VALUE}};',
679	],
680	]
681	);
682
683	$this->end_controls_tab();
684
685	/* Active */
686	$this->start_controls_tab(
687	'dropdown_item_active',
688	[
689	'label' => esc_html__( 'Active', 'easy-elements' ),
690	]
691	);
692
693	$this->add_control(
694	'dropdown_item_active_color',
695	[
696	'label' => esc_html__( 'Color', 'easy-elements' ),
697	'type' => Controls_Manager::COLOR,
698	'selectors' => [
699	'{{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}};',
700	],
701	]
702	);
703
704	$this->add_control(
705	'dropdown_item_active_bg',
706	[
707	'label' => esc_html__( 'Background 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.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}};',
711	],
712	]
713	);
714
715	$this->end_controls_tab();
716	$this->end_controls_tabs();
717	$this->end_controls_section();
718
719	$this->start_controls_section(
720	'section_style_menu_icon',
721	[
722	'label' => esc_html__( 'Menu Item Icon', 'easy-elements' ),
723	'tab' => Controls_Manager::TAB_STYLE,
724	]
725	);
726
727	$this->add_control(
728	'icon_item_text_colors',
729	[
730	'label' => esc_html__( 'Color', 'easy-elements' ),
731	'type' => Controls_Manager::COLOR,
732	'selectors' => [
733	'{{WRAPPER}} .eel-menu-text-inner>i' => 'color: {{VALUE}};',
734	],
735	]
736	);
737	$this->add_responsive_control(
738	'icon_item_space',
739	[
740	'label' => esc_html__( 'Spacing', 'easy-elements' ),
741	'type' => Controls_Manager::SLIDER,
742	'size_units' => [ 'px', '%' ],
743	'range' => [
744	'px' => [ 'min' => -20, 'max' => 20 ],
745	'%' => [ 'min' => -100, 'max' => 100 ],
746	],
747	'selectors' => [
748	'{{WRAPPER}} .eel-menu-text-inner>i' => 'margin-right: {{SIZE}}{{UNIT}};',
749	],
750	]
751	);
752
753	$this->add_responsive_control(
754	'icon_item_top',
755	[
756	'label' => esc_html__( 'Spacing Top/Bottom', 'easy-elements' ),
757	'type' => \Elementor\Controls_Manager::SLIDER,
758	'size_units' => [ 'px', '%' ],
759	'range' => [
760	'px' => [
761	'min' => -30,
762	'max' => 30,
763	],
764	'%' => [
765	'min' => -100,
766	'max' => 100,
767	],
768	],
769	'selectors' => [
770	'{{WRAPPER}} .eel-menu-text-inner>i' => 'top: {{SIZE}}{{UNIT}}; position: relative; bottom: auto;',
771	],
772	]
773	);
774
775	$this->end_controls_section();
776
777	$this->start_controls_section(
778	'section_style_menu_arrow_icon',
779	[
780	'label' => esc_html__( 'Dropdown Arrow', 'easy-elements' ),
781	'tab' => Controls_Manager::TAB_STYLE,
782	]
783	);
784
785	$this->add_control(
786	'icon_arrow_item_text_colors',
787	[
788	'label' => esc_html__( 'Color', 'easy-elements' ),
789	'type' => Controls_Manager::COLOR,
790	'selectors' => [
791	'{{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}};',
792	],
793	]
794	);
795	$this->add_responsive_control(
796	'icon_arrow_item_space',
797	[
798	'label' => esc_html__( 'Spacing', 'easy-elements' ),
799	'type' => Controls_Manager::SLIDER,
800	'size_units' => [ 'px', '%' ],
801	'range' => [
802	'px' => [ 'min' => -20, 'max' => 20 ],
803	'%' => [ 'min' => -100, 'max' => 100 ],
804	],
805	'selectors' => [
806	'{{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}};',
807	],
808	]
809	);
810
811	$this->add_responsive_control(
812	'arrow_top',
813	[
814	'label' => esc_html__( 'Spacing Top/Bottom', 'easy-elements' ),
815	'type' => \Elementor\Controls_Manager::SLIDER,
816	'size_units' => [ 'px', '%' ],
817	'range' => [
818	'px' => [
819	'min' => -30,
820	'max' => 30,
821	],
822	'%' => [
823	'min' => -100,
824	'max' => 100,
825	],
826	],
827	'selectors' => [
828	'{{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;',
829	],
830	]
831	);
832
833	$this->end_controls_section();
834
835	$this->start_controls_section(
836	'section_style_menu_badge',
837	[
838	'label' => esc_html__( 'Menu Item Badge', 'easy-elements' ),
839	'tab' => Controls_Manager::TAB_STYLE,
840	]
841	);
842
843	$this->add_control(
844	'badge_text_colors',
845	[
846	'label' => esc_html__( 'Color', 'easy-elements' ),
847	'type' => Controls_Manager::COLOR,
848	'selectors' => [
849	'{{WRAPPER}} .eel-menu-badge' => 'color: {{VALUE}};',
850	],
851	]
852	);
853
854	$this->add_control(
855	'badge_bg_color',
856	[
857	'label' => esc_html__( 'Background Color', 'easy-elements' ),
858	'type' => Controls_Manager::COLOR,
859	'selectors' => [
860	'{{WRAPPER}} .eel-menu-badge' => 'background-color: {{VALUE}};',
861	],
862	]
863	);
864
865	$this->add_group_control(
866	Group_Control_Typography::get_type(),
867	[
868	'name' => 'badge_typography',
869	'selector' => '{{WRAPPER}} .eel-menu-badge',
870	]
871	);
872
873	$this->add_responsive_control(
874	'badge_padding',
875	[
876	'label' => esc_html__( 'Padding', 'easy-elements' ),
877	'type' => Controls_Manager::DIMENSIONS,
878	'selectors' => [
879	'{{WRAPPER}} .eel-menu-badge' =>
880	'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
881	],
882	]
883	);
884
885	$this->add_group_control(
886	\Elementor\Group_Control_Border::get_type(),
887	[
888	'name' => 'badge_border',
889	'selector' => '{{WRAPPER}} .eel-menu-badge',
890	]
891	);
892
893	$this->add_control(
894	'badge_radius',
895	[
896	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
897	'type' => Controls_Manager::DIMENSIONS,
898	'selectors' => [
899	'{{WRAPPER}} .eel-menu-badge' =>
900	'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
901	],
902	]
903	);
904
905	$this->add_responsive_control(
906	'badge_top',
907	[
908	'label' => esc_html__( 'Top/Bottom', 'easy-elements' ),
909	'type' => \Elementor\Controls_Manager::SLIDER,
910	'size_units' => [ 'px', '%' ],
911	'range' => [
912	'px' => [
913	'min' => -200,
914	'max' => 200,
915	],
916	'%' => [
917	'min' => -100,
918	'max' => 100,
919	],
920	],
921	'selectors' => [
922	'{{WRAPPER}} .eel-menu-badge' => 'top: {{SIZE}}{{UNIT}}; bottom: auto;',
923	],
924	]
925	);
926
927	$this->add_responsive_control(
928	'badge_left',
929	[
930	'label' => esc_html__( 'Left/Right', 'easy-elements' ),
931	'type' => \Elementor\Controls_Manager::SLIDER,
932	'size_units' => [ 'px', '%' ],
933	'range' => [
934	'px' => [
935	'min' => -200,
936	'max' => 200,
937	],
938	'%' => [
939	'min' => -100,
940	'max' => 100,
941	],
942	],
943	'selectors' => [
944	'{{WRAPPER}} .eel-menu-badge' => 'right: {{SIZE}}{{UNIT}}; left: auto;',
945	],
946	]
947	);
948	$this->end_controls_section();
949
950	$this->start_controls_section(
951	'section_mobile_menu',
952	[
953	'label' => __( 'Mobile Menu', 'easy-elements' ),
954	'tab' => Controls_Manager::TAB_STYLE,
955	]
956	);
957
958	$this->add_control(
959	'bg_full_color_menu_item',
960	[
961	'label' => __( 'Background Color', 'easy-elements' ),
962	'type' => Controls_Manager::COLOR,
963	'default' => '',
964	'selectors' => [
965	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav' => 'background-color: {{VALUE}}',
966	],
967	]
968	);
969
970	$this->add_control(
971	'close_icon_color',
972	[
973	'label' => __( 'Close Icon Color', 'easy-elements' ),
974	'type' => Controls_Manager::COLOR,
975	'selectors' => [
976	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close' => 'color: {{VALUE}};',
977	],
978	]
979	);
980
981	$this->start_controls_tabs( 'tabs_menu_item_style_mobile' );
982
983	$this->start_controls_tab(
984	'tab_menu_item_normal_m',
985	[
986	'label' => __( 'Normal', 'easy-elements' ),
987	]
988	);
989
990	$this->add_control(
991	'color_menu_item_m',
992	[
993	'label' => __( 'Color', 'easy-elements' ),
994	'type' => Controls_Manager::COLOR,
995	'selectors' => [
996	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li a' => 'color: {{VALUE}};',
997	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu .submenu-parent-icon svg path' => 'fill: {{VALUE}};',
998	],
999	]
1000	);
1001	$this->add_group_control(
1002	\Elementor\Group_Control_Typography::get_type(),
1003	[
1004	'name' => 'color_menu_item_m_typography',
1005	'label' => esc_html__('Typography', 'easy-elements' ),
1006	'selector' => '{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li a',
1007	]
1008	);
1009
1010	// Padding (Responsive)
1011	$this->add_responsive_control(
1012	'mobile_padding',
1013	[
1014	'label' => esc_html__( 'Padding', 'easy-elements' ),
1015	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1016	'size_units' => [ 'px', '%', 'em', 'rem' ],
1017	'selectors' => [
1018	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu > li' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1019	],
1020	'condition' => [
1021	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1022	],
1023	]
1024	);
1025
1026	$this->add_control(
1027	'mobile_humburger_icon_heading',
1028	[
1029	'label' => esc_html__( 'Humburger Icon', 'easy-elements' ),
1030	'type' => \Elementor\Controls_Manager::HEADING,
1031	'separator' => 'before',
1032	'condition' => [
1033	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1034	],
1035	]
1036	);
1037
1038	// Humburger Icon Color
1039	$this->add_control(
1040	'mobile_humburger_icon_color',
1041	[
1042	'label' => esc_html__( 'Icon Color', 'easy-elements' ),
1043	'type' => \Elementor\Controls_Manager::COLOR,
1044	'selectors' => [
1045	'{{WRAPPER}} .eel-vertical-menu-icon-mobile i' => 'color: {{VALUE}};',
1046	'{{WRAPPER}} .eel-vertical-menu-icon-mobile svg path' => 'fill: {{VALUE}};',
1047	],
1048	'condition' => [
1049	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1050	],
1051	]
1052	);
1053
1054	// Humburger Icon Size (Responsive)
1055	$this->add_responsive_control(
1056	'mobile_humburger_icon_size',
1057	[
1058	'label' => esc_html__( 'Icon Size', 'easy-elements' ),
1059	'type' => \Elementor\Controls_Manager::SLIDER,
1060	'size_units' => [ 'px', 'em', 'rem' ],
1061	'range' => [
1062	'px' => [
1063	'min' => 10,
1064	'max' => 100,
1065	],
1066	],
1067	'selectors' => [
1068	'{{WRAPPER}} .eel-vertical-menu-icon-mobile i' => 'font-size: {{SIZE}}{{UNIT}};',
1069	'{{WRAPPER}} .eel-vertical-menu-icon-mobile svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1070	],
1071	'condition' => [
1072	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1073	],
1074	]
1075	);
1076
1077	$this->add_control(
1078	'mobile_close_icon_heading',
1079	[
1080	'label' => esc_html__( 'Close Icon', 'easy-elements' ),
1081	'type' => \Elementor\Controls_Manager::HEADING,
1082	'separator' => 'before',
1083	'condition' => [
1084	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1085	],
1086	]
1087	);
1088
1089	// Close Icon Color
1090	$this->add_control(
1091	'mobile_close_icon_color',
1092	[
1093	'label' => esc_html__( 'Color', 'easy-elements' ),
1094	'type' => \Elementor\Controls_Manager::COLOR,
1095	'selectors' => [
1096	'{{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}};',
1097	],
1098	'condition' => [
1099	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1100	],
1101	]
1102	);
1103
1104	// Close Icon Border Control
1105	$this->add_group_control(
1106	\Elementor\Group_Control_Border::get_type(),
1107	[
1108	'name' => 'mobile_close_icon_border',
1109	'label' => esc_html__( 'Border', 'easy-elements' ),
1110	'selector' => '{{WRAPPER}} .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close',
1111	'condition' => [
1112	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1113	],
1114	]
1115	);
1116
1117	$this->add_responsive_control(
1118	'mobile_close_icon_radius',
1119	[
1120	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1121	'type' => \Elementor\Controls_Manager::DIMENSIONS,
1122	'size_units' => [ 'px', '%', 'em' ],
1123	'selectors' => [
1124	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .eel-vertical-menu-icon-close' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1125	],
1126	'condition' => [
1127	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
1128	],
1129	]
1130	);
1131
1132	$this->end_controls_tab();
1133
1134	$this->start_controls_tab(
1135	'tab_menu_item_hover_m',
1136	[
1137	'label' => __( 'Hover', 'easy-elements' ),
1138	]
1139	);
1140
1141	$this->add_control(
1142	'color_menu_item_hover_m',
1143	[
1144	'label' => __( 'Color', 'easy-elements' ),
1145	'type' => Controls_Manager::COLOR,
1146	'selectors' => [
1147	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li > a:hover' => 'color: {{VALUE}};',
1148	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li > a:hover .submenu-parent-icon svg path' => 'fill: {{VALUE}};',
1149	],
1150	]
1151	);
1152
1153	$this->end_controls_tab();
1154
1155	$this->start_controls_tab(
1156	'tab_menu_item_active_m',
1157	[
1158	'label' => __( 'Active', 'easy-elements' ),
1159	]
1160	);
1161
1162	$this->add_control(
1163	'color_menu_item_active_m',
1164	[
1165	'label' => __( 'Color', 'easy-elements' ),
1166	'type' => Controls_Manager::COLOR,
1167	'selectors' => [
1168	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li.menu-item.current-menu-item > a' => 'color: {{VALUE}};',
1169	'{{WRAPPER}} .sidebar-on-mobile-vertical-nav .mobile-menu.eel-vertical-verticalmenu li.menu-item.current-menu-item > .submenu-parent-icon svg path' => 'fill: {{VALUE}};',
1170	],
1171	]
1172	);
1173
1174	$this->end_controls_tab();
1175	$this->end_controls_tabs();
1176	$this->end_controls_section();
1177	}
1178
1179	public function get_menu_close_icon( $settings ) {
1180	$menu_icon = '';
1181	$close_icon = '';
1182	$icons = [];
1183	$icon_settings = [
1184	$settings['dropdown_icon'],
1185	$settings['dropdown_close_icon'],
1186	];
1187
1188	foreach ( $icon_settings as $icon ) {
1189	if ( $this->is_elementor_updated() ) {
1190	ob_start();
1191	\Elementor\Icons_Manager::render_icon(
1192	$icon,
1193	[
1194	'aria-hidden' => 'true',
1195	'tabindex' => '0',
1196	]
1197	);
1198	$menu_icon = ob_get_clean();
1199	} else {
1200	$menu_icon = '<i class="' . esc_attr( $icon ) . '" aria-hidden="true" tabindex="0"></i>';
1201	}
1202
1203	array_push( $icons, $menu_icon );
1204	}
1205
1206	return $icons;
1207	}
1208
1209	/**
1210	* Render Nav Menu output on the frontend.
1211	*
1212	* Written in PHP and used to generate the final HTML.
1213	*
1214	* @since 1.3.0
1215	* @access protected
1216	*/
1217	protected function render() {
1218	$settings = $this->get_settings_for_display();
1219	$menus = $this->get_available_menus();
1220	if ( empty( $menus ) ) {
1221	return false;
1222	}
1223	$submenu_parent_icon = '';
1224	$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>';
1225
1226	$mobile_icon = '';
1227	// Check if custom mobile icon exists
1228	if ( ! empty( $settings['mobile_hamburger_icon']['value'] ) ) {
1229	ob_start();
1230	\Elementor\Icons_Manager::render_icon(
1231	$settings['mobile_hamburger_icon'],
1232	[ 'aria-hidden' => 'true' ]
1233	);
1234	$mobile_icon = ob_get_clean();
1235	} else {
1236	$mobile_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
1237	<path d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"></path>
1238	</svg>';
1239	}
1240
1241	// Desktop Menu
1242	$items_wrap = '<div class="eel-vertical-menu-wrap">
1243	<div class="eel-vertical-menu-icon-mobile">' . $mobile_icon . '</div>
1244	<ul id="%1$s" class="%2$s">%3$s</ul>
1245	</div>';
1246
1247	if ( !class_exists( 'Easy_Elements_Pro' ) ) {
1248	$submenu_animation = 'eel_animation_slide_down';
1249	$submenu_type = 'eel_hover';
1250	} else {
1251	$submenu_animation = ! empty( $settings['submenu_animation'] ) ? $settings['submenu_animation'] : '';
1252	$submenu_type = ! empty( $settings['submenu_type'] ) ? $settings['submenu_type'] : 'eel_hover';
1253	}
1254
1255	$args = [
1256	'echo' => false,
1257	'menu' => $settings['menu'],
1258	'fallback_cb' => '__return_empty_string',
1259	'menu_class' => 'menu desktop-menu eel-vertical-verticalmenu ' . $submenu_animation . ' ' . $submenu_type,
1260	'container_class' => 'eel-vertical-menu-elelmentor-widget menu-wrapper eel-vertical-menu-container eel-vertical-menu-area',
1261	'items_wrap' => $items_wrap,
1262	'submenu_parent_icon' => $submenu_parent_icon,
1263	'is_mobile_menu' => '',
1264	'walker' => new \Easyel_vertical_Menu_Nav_Walker(),
1265	'easyel_navigation_vertical_menu' => true,
1266	'submenu_type' => $submenu_type,
1267	];
1268	echo wp_nav_menu( $args );
1269
1270	// Mobile Menu
1271	static $vertical_mobile_rendered = false;
1272	if ( ! $vertical_mobile_rendered ) {
1273	$vertical_mobile_rendered = true;
1274	$settings = $this->get_settings_for_display();
1275	$open_position = !empty( $settings['mobile_menu_open_position'] ) ? $settings['mobile_menu_open_position'] : 'right';
1276
1277	if ( ! empty( $settings['mobile_menu_breakpoint'] ) ) :
1278	$this->add_render_attribute( 'eel-vertical-menu-mobile', 'class', 'sidebar-on-mobile-vertical-nav eel-mobile-open-position-' . $open_position );
1279	$widget_instance = $this;
1280
1281	$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>';
1282
1283	$mobile_args = [
1284	'echo' => false,
1285	'menu' => $settings['menu'],
1286	'fallback_cb' => '__return_empty_string',
1287	'menu_class' => 'menu mobile-menu eel-vertical-verticalmenu',
1288	'container' => false,
1289	'walker' => new \Easyel_vertical_Menu_Nav_Walker(),
1290	'easyel_navigation_vertical_menu' => true,
1291	'submenu_parent_icon' => $submenu_parent_icon,
1292	];
1293	?>
1294	<nav <?php $widget_instance->print_render_attribute_string( 'eel-vertical-menu-mobile' ); ?>>
1295	<span class="eel-vertical-menu-icon-close">
1296	<?php
1297	if ( ! empty( $settings['mobile_close_icon']['value'] ) ) {
1298	\Elementor\Icons_Manager::render_icon( $settings['mobile_close_icon'], [ 'aria-hidden' => 'true' ] );
1299	} else { ?>
1300	<i class="unicon-close"></i>
1301	<?php }
1302	?>
1303	</span>
1304	<?php echo wp_nav_menu( $mobile_args ); ?>
1305	</nav>
1306	<?php
1307	endif;
1308	}
1309
1310	$settings = $this->get_settings_for_display();
1311
1312	if ( ! empty( $settings['mobile_menu_breakpoint'] ) ) :
1313	$mobile_breakpoint = absint( $settings['mobile_menu_breakpoint'] );
1314	?>
1315	<style>
1316	@media (max-width: <?php echo esc_attr( $mobile_breakpoint ); ?>px) {
1317	.eel-vertical-menu-wrap > ul {
1318	display: none !important;
1319	}
1320	.eel-vertical-menu-icon-mobile {
1321	display: block !important;
1322	}
1323	.eel-vertical-menu-content-part.sub-menu{
1324	width: 100% !important;
1325	}
1326	}
1327	@media (min-width: <?php echo esc_attr( $mobile_breakpoint + 1 ); ?>px) {
1328	.eel-vertical-menu-icon-mobile{
1329	display: none !important;
1330	}
1331	}
1332	</style>
1333	<?php endif;
1334	}
1335	}