easy-elements / widgets / single-nav / single-nav.php

single-nav.php in Easy Elements for Elementor – Addons & Website Templates 1.4.0, at widgets/single-nav/single-nav.php

1,054 lines 39.3 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	use Elementor\Controls_Manager;
4	use Elementor\Group_Control_Box_Shadow;
5	use Elementor\Group_Control_Typography;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Background;
8
9	defined( 'ABSPATH' ) \|\| die();
10
11	class Easyel_Single_Nav_Widget extends \Elementor\Widget_Base {
12
13	public function get_name() {
14	return 'eel-single-nav';
15	}
16
17	/**
18	* Get widget title.
19	*
20	* Retrieve counter widget title.
21	*
22	* @since 1.0.0
23	* @access public
24	*
25	* @return string Widget title.
26	*/
27	public function get_title() {
28	return esc_html__( 'Single Navigation', 'easy-elements' );
29	}
30
31	/**
32	* Get widget icon.
33	*
34	* Retrieve counter widget icon.
35	*
36	* @since 1.0.0
37	* @access public
38	*
39	* @return string Widget icon.
40	*/
41	public function get_icon() {
42	return 'easyicon easyelIcon-navigation';
43	}
44
45	/**
46	* Retrieve the list of scripts the counter widget depended on.
47	*
48	* Used to set scripts dependencies required to run the widget.
49	*
50	* @since 1.3.0
51	* @access public
52	*
53	* @return array Widget scripts dependencies.
54	*/
55	public function get_categories() {
56	return [ 'easyelements_header_footer_category' ];
57	}
58
59	/**
60	* Get widget keywords.
61	*
62	* Retrieve the list of keywords the widget belongs to.
63	*
64	* @since 2.1.0
65	* @access public
66	*
67	* @return array Widget keywords.
68	*/
69	public function get_keywords() {
70	return [ 'navigation', 'menu', 'nav', 'text' ];
71	}
72
73	public function get_style_depends() {
74	return [
75	'eel-single-nav',
76	];
77	}
78
79
80	protected function register_controls() {
81	$this->start_controls_section(
82	'section_single_nav',
83	[
84	'label' => esc_html__( 'Single Navigation', 'easy-elements' ),
85	]
86	);
87
88	$repeater = new \Elementor\Repeater();
89
90	$repeater->add_control(
91	'nav_text',
92	[
93	'label' => esc_html__( 'Enter Menu Text Here', 'easy-elements' ),
94	'type' => Controls_Manager::TEXT,
95	'default' => esc_html__( 'Menu Item', 'easy-elements' ),
96	'label_block' => true,
97	]
98	);
99
100	$repeater->add_control(
101	'nav_link',
102	[
103	'label' => esc_html__( 'Enter Menu Link Here', 'easy-elements' ),
104	'type' => Controls_Manager::URL,
105	'placeholder' => 'https://your-link.com',
106	'options' => [ 'url', 'is_external', 'nofollow' ],
107	'default' => [
108	'url' => '#',
109	],
110	]
111	);
112
113	$repeater->add_control(
114	'nav_icon',
115	[
116	'label' => esc_html__( 'Menu Icon', 'easy-elements' ),
117	'type' => \Elementor\Controls_Manager::ICONS,
118	'default' => [
119	'value' => '',
120	'library' => 'solid',
121	],
122	]
123	);
124
125	$this->add_control(
126	'nav_items',
127	[
128	'label' => esc_html__( 'Single Page Navigation Items Here', 'easy-elements' ),
129	'type' => Controls_Manager::REPEATER,
130	'fields' => $repeater->get_controls(),
131	'default' => [
132	[
133	'nav_text' => 'Home',
134	],
135	[
136	'nav_text' => 'About Us',
137	],
138	[
139	'nav_text' => 'Services',
140	],
141	[
142	'nav_text' => 'Contact Us',
143	],
144	],
145	'title_field' => '{{{ nav_text }}}',
146	]
147	);
148
149	$this->add_responsive_control(
150	'nav_display',
151	[
152	'label' => __( 'Display', 'easy-elements' ),
153	'type' => Controls_Manager::CHOOSE,
154	'options' => [
155	'flex' => [
156	'title' => __( 'Flex', 'easy-elements' ),
157	'icon' => 'eicon-arrow-right',
158	],
159	'block' => [
160	'title' => __( 'Block', 'easy-elements' ),
161	'icon' => 'eicon-flex eicon-wrap',
162	],
163	'none' => [
164	'title' => __( 'None', 'easy-elements' ),
165	'icon' => 'eicon-close',
166	],
167	],
168	'default' => '',
169	'toggle' => true,
170	'selectors' => [
171	'{{WRAPPER}} .eel-single-nav-list' => 'display: {{VALUE}};',
172	],
173	]
174	);
175
176	$this->add_responsive_control(
177	'nav_alignment',
178	[
179	'label' => __( 'Alignment', 'easy-elements' ),
180	'type' => Controls_Manager::CHOOSE,
181	'options' => [
182	'left' => [
183	'title' => __( 'Left', 'easy-elements' ),
184	'icon' => 'eicon-h-align-left',
185	],
186	'center' => [
187	'title' => __( 'Center', 'easy-elements' ),
188	'icon' => 'eicon-h-align-center',
189	],
190	'right' => [
191	'title' => __( 'Right', 'easy-elements' ),
192	'icon' => 'eicon-h-align-right',
193	],
194	],
195	'default' => '',
196	'toggle' => true,
197	'selectors' => [
198	'{{WRAPPER}} .eel-single-nav-list' => 'justify-content: {{VALUE}};',
199	],
200	]
201	);
202
203	$this->add_control(
204	'mobile_menu_breakpoint',
205	[
206	'label' => __( 'Mobile Menu Breakpoint', 'easy-elements' ),
207	'type' => Controls_Manager::SELECT,
208	'default' => '',
209	'options' => [
210	'' => __( 'None (Disable Mobile Menu)', 'easy-elements' ),
211	'480' => __( '480px - Small devices', 'easy-elements' ),
212	'576' => __( '576px - Medium devices', 'easy-elements' ),
213	'768' => __( '768px - Tablets', 'easy-elements' ),
214	'992' => __( '992px - Desktop small', 'easy-elements' ),
215	],
216	'description' => __( 'Select the screen width at which the mobile menu will activate.', 'easy-elements' ),
217	]
218	);
219
220	$this->add_control(
221	'mobile_hamburger_icon',
222	[
223	'label' => esc_html__( 'Choose Hamburger Icon', 'easy-elements' ),
224	'type' => \Elementor\Controls_Manager::ICONS,
225	'fa4compatibility' => 'icon',
226	'default' => [],
227	'condition' => [
228	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
229	]
230	]
231	);
232
233	$this->add_control(
234	'mobile_close_icon',
235	[
236	'label' => esc_html__( 'Choose Close Icon', 'easy-elements' ),
237	'type' => \Elementor\Controls_Manager::ICONS,
238	'fa4compatibility' => 'icon',
239	'default' => [],
240	'condition' => [
241	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
242	]
243	]
244	);
245
246	$this->add_control(
247	'enable_sticky_header',
248	[
249	'label' => __( 'Enable Sticky Header', 'easy-elements' ),
250	'type' => Controls_Manager::SWITCHER,
251	'label_on' => __( 'Yes', 'easy-elements' ),
252	'label_off' => __( 'No', 'easy-elements' ),
253	'frontend_available' => true,
254	'default' => 'no',
255	'prefix_class' => 'eel-sticky-header-',
256	]
257	);
258
259	$this->add_control(
260	'fixed_top_sticky',
261	[
262	'label' => __( 'Fixed Top Sticky', 'easy-elements' ),
263	'type' => Controls_Manager::SWITCHER,
264	'label_on' => __( 'Yes', 'easy-elements' ),
265	'label_off' => __( 'No', 'easy-elements' ),
266	'frontend_available' => true,
267	'default' => 'yes',
268	'condition' => [
269	'enable_sticky_header' => 'yes',
270	],
271	]
272	);
273
274
275	$this->start_controls_tabs(
276	'nav_sticky_color_tabs',
277	[
278	'condition' => [
279	'enable_sticky_header' => 'yes',
280	],
281	]
282	);
283
284	$this->start_controls_tab(
285	'nav_sticky_color_normal',
286	[
287	'label' => esc_html__( 'Normal', 'easy-elements' ),
288	'condition' => [
289	'enable_sticky_header' => 'yes',
290	],
291	]
292	);
293
294	$this->add_control(
295	'bg_color_sticky_normal',
296	[
297	'label' => __( 'Background Color', 'easy-elements' ),
298	'type' => Controls_Manager::COLOR,
299	'default' => '',
300	'selectors' => [
301	'.eel-single-nav-sticky-enabled' => 'background-color: {{VALUE}}',
302	],
303	'condition' => [
304	'enable_sticky_header' => 'yes',
305	],
306	]
307	);
308
309	$this->add_control(
310	'disable_top_padding',
311	[
312	'label' => __( 'Enable Top Padding', 'easy-elements' ),
313	'type' => Controls_Manager::SWITCHER,
314	'label_on' => __( 'Yes', 'easy-elements' ),
315	'label_off' => __( 'No', 'easy-elements' ),
316	'frontend_available' => true,
317	'default' => 'yes',
318	'condition' => [
319	'enable_sticky_header' => 'yes',
320	],
321	]
322	);
323
324	$this->add_responsive_control(
325	'dynamic_top_padding_value',
326	[
327	'label' => __( 'Custom Top Padding', 'easy-elements' ),
328	'type' => \Elementor\Controls_Manager::SLIDER,
329	'size_units' => [ 'px' ],
330	'range' => [
331	'px' => [
332	'min' => 0,
333	'max' => 300,
334	],
335	],
336	'condition' => [
337	'disable_top_padding' => '',
338	'enable_sticky_header' => 'yes',
339	],
340	'selectors' => [
341	'body #page' => 'padding-top: {{SIZE}}{{UNIT}};',
342	],
343	]
344	);
345
346	$this->end_controls_tab();
347
348	$this->start_controls_tab(
349	'nav_sticky_color_sticky',
350	[
351	'label' => esc_html__( 'Sticky', 'easy-elements' ),
352	'condition' => [
353	'enable_sticky_header' => 'yes',
354	],
355	]
356	);
357	$this->add_control(
358	'text_color_sticky',
359	[
360	'label' => __( 'Text Color', 'easy-elements' ),
361	'type' => Controls_Manager::COLOR,
362	'default' => '',
363	'selectors' => [
364	'header.eel-sticky-header-on.eel-up-scroll .eel-single-nav-sticky-enabled .eel-single-nav-list li a, header.eel-sticky-header-on.eel-up-scroll .eel-single-nav-sticky-enabled , header.eel-sticky-header-on.eel--fixed-top-sticky .eel-single-nav-sticky-enabled .eel-single-nav-list li a, header.eel-sticky-header-on.eel--fixed-top-sticky eel-single-nav-sticky-enabled ' => 'color: {{VALUE}}',
365	'header.eel-sticky-header-on.eel-up-scroll .eel-single-nav-sticky-enabled .eel-icon-menu, header.eel-sticky-header-on.eel--fixed-top-sticky .eel-single-nav-sticky-enabled .eel-icon-menu' => 'border-bottom-color: {{VALUE}} !important; transition: none !important;',
366	'header.eel-sticky-header-on.eel-up-scroll .eel-single-nav-sticky-enabled .eel-single-nav .eel-nav-menu-icon svg path, header.eel-sticky-header-on.eel--fixed-top-sticky .eel-single-nav-sticky-enabled .eel-single-nav .eel-nav-menu-icon svg path' => 'fill: {{VALUE}} !important;',
367	],
368	'condition' => [
369	'enable_sticky_header' => 'yes',
370	],
371	]
372	);
373	$this->add_control(
374	'bg_color_sticky',
375	[
376	'label' => __( 'Background Color', 'easy-elements' ),
377	'type' => Controls_Manager::COLOR,
378	'default' => '',
379	'selectors' => [
380	'header.eel-sticky-header-on.eel-up-scroll .eel-single-nav-sticky-enabled, header.eel-sticky-header-on.eel--fixed-top-sticky .eel-single-nav-sticky-enabled, header.eel-sticky-header-on.eel-up-scroll .eel-nav-menu__layout-horizontal .eel-nav-menu .sub-menu:not(.easyel--elementor-template-mega-menu)' => 'background-color: {{VALUE}} !important',
381	],
382	'condition' => [
383	'enable_sticky_header' => 'yes',
384	],
385	]
386	);
387	$this->add_group_control(
388	\Elementor\Group_Control_Box_Shadow::get_type(),
389	[
390	'name' => 'box_shadow',
391	'selector' => 'body header.eel-sticky-header-on.eel-up-scroll, body header.eel-sticky-header-on.eel--fixed-top-sticky',
392	'condition' => [
393	'enable_sticky_header' => 'yes',
394	],
395	]
396	);
397	$this->end_controls_tab();
398	$this->end_controls_tabs();
399	$this->end_controls_section();
400
401	$this->start_controls_section(
402	'section_nav_style',
403	[
404	'label' => esc_html__( 'Navigation Style', 'easy-elements' ),
405	'tab' => Controls_Manager::TAB_STYLE,
406	]
407	);
408
409	$this->start_controls_tabs( 'nav_color_tabs' );
410
411	$this->start_controls_tab(
412	'nav_color_normal',
413	[
414	'label' => esc_html__( 'Normal', 'easy-elements' ),
415	]
416	);
417
418	$this->add_control(
419	'nav_text_color',
420	[
421	'label' => esc_html__( 'Color', 'easy-elements' ),
422	'type' => Controls_Manager::COLOR,
423	'selectors' => [
424	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item a' => 'color: {{VALUE}};',
425	],
426	]
427	);
428	$this->add_control(
429	'nav_bg_color',
430	[
431	'label' => esc_html__( 'Background Color', 'easy-elements' ),
432	'type' => Controls_Manager::COLOR,
433	'selectors' => [
434	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item a' => 'background-color: {{VALUE}};',
435	],
436	]
437	);
438	$this->add_group_control(
439	Group_Control_Typography::get_type(),
440	[
441	'name' => 'nav_typography',
442	'label' => esc_html__( 'Typography', 'easy-elements' ),
443	'selector' => '{{WRAPPER}} .eel-single-nav-list .eel-nav-item a',
444	]
445	);
446
447	$this->add_group_control(
448	\Elementor\Group_Control_Text_Shadow::get_type(),
449	[
450	'name' => 'nav_text_shadow',
451	'label' => esc_html__( 'Text Shadow', 'easy-elements' ),
452	'selector' => '{{WRAPPER}} .eel-single-nav-list .eel-nav-item a',
453	]
454	);
455
456	$this->add_responsive_control(
457	'nav_padding',
458	[
459	'label' => esc_html__( 'Padding', 'easy-elements' ),
460	'type' => Controls_Manager::DIMENSIONS,
461	'size_units' => [ 'px', 'em', '%' ],
462	'selectors' => [
463	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
464	],
465	]
466	);
467
468	$this->add_responsive_control(
469	'nav_margin',
470	[
471	'label' => esc_html__( 'Margin', 'easy-elements' ),
472	'type' => Controls_Manager::DIMENSIONS,
473	'size_units' => [ 'px', 'em', '%' ],
474	'selectors' => [
475	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
476	],
477	]
478	);
479
480	$this->end_controls_tab();
481
482	$this->start_controls_tab(
483	'nav_color_hover',
484	[
485	'label' => esc_html__( 'Hover', 'easy-elements' ),
486	]
487	);
488
489	$this->add_control(
490	'nav_hover_color',
491	[
492	'label' => esc_html__( 'Hover Color', 'easy-elements' ),
493	'type' => Controls_Manager::COLOR,
494	'selectors' => [
495	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item a:hover' => 'color: {{VALUE}};',
496	],
497	]
498	);
499	$this->add_control(
500	'nav_bg_color_hover',
501	[
502	'label' => esc_html__( 'Background Color', 'easy-elements' ),
503	'type' => Controls_Manager::COLOR,
504	'selectors' => [
505	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item:hover a' => 'background-color: {{VALUE}};',
506	],
507	]
508	);
509
510	$this->end_controls_tab();
511
512	/* Active */
513	$this->start_controls_tab(
514	'nav_color_active',
515	[
516	'label' => esc_html__( 'Active', 'easy-elements' ),
517	]
518	);
519
520	$this->add_control(
521	'nav_active_color',
522	[
523	'label' => esc_html__( 'Active Color', 'easy-elements' ),
524	'type' => Controls_Manager::COLOR,
525	'selectors' => [
526	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item.active a' => 'color: {{VALUE}};',
527	],
528	]
529	);
530	$this->add_control(
531	'nav_bg_color_active',
532	[
533	'label' => esc_html__( 'Background Color', 'easy-elements' ),
534	'type' => Controls_Manager::COLOR,
535	'selectors' => [
536	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item.active a' => 'background-color: {{VALUE}};',
537	],
538	]
539	);
540	$this->end_controls_tab();
541	$this->end_controls_tabs();
542	$this->end_controls_section();
543
544	$this->start_controls_section(
545	'nav_icon_style',
546	[
547	'label' => esc_html__( 'Icon', 'easy-elements' ),
548	'tab' => Controls_Manager::TAB_STYLE,
549	]
550	);
551	$this->start_controls_tabs( 'nav_icon_color_tabs' );
552
553	$this->start_controls_tab(
554	'nav_icon_color_normal',
555	[
556	'label' => esc_html__( 'Normal', 'easy-elements' ),
557	]
558	);
559	$this->add_control(
560	'single_nav_icon_color',
561	[
562	'label' => esc_html__( 'Color', 'easy-elements' ),
563	'type' => Controls_Manager::COLOR,
564	'selectors' => [
565	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item a svg path' => 'fill: {{VALUE}};',
566	],
567	]
568	);
569	$this->add_responsive_control(
570	'nav_icon_size',
571	[
572	'label' => __( 'Icon Size', 'easy-elements' ),
573	'type' => Controls_Manager::SLIDER,
574	'size_units' => [ 'px', 'em', 'rem' ],
575	'range' => [
576	'px' => [
577	'min' => 8,
578	'max' => 80,
579	],
580	],
581	'default' => [
582	'size' => 16,
583	'unit' => 'px',
584	],
585	'selectors' => [
586	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item i' => 'font-size: {{SIZE}}{{UNIT}};',
587	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
588	],
589	]
590	);
591
592	$this->add_responsive_control(
593	'nav_icon_gap',
594	[
595	'label' => __( 'Gap', 'easy-elements' ),
596	'type' => Controls_Manager::SLIDER,
597	'size_units' => [ 'px', 'em', 'rem' ],
598	'range' => [
599	'px' => [
600	'min' => 0,
601	'max' => 50,
602	],
603	],
604	'default' => [
605	'size' => 8,
606	'unit' => 'px',
607	],
608	'selectors' => [
609	'{{WRAPPER}} .eel-nav-item a' => 'gap: {{SIZE}}{{UNIT}};',
610	],
611	]
612	);
613
614	$this->end_controls_tab();
615
616	$this->start_controls_tab(
617	'nav_icon_color_hover',
618	[
619	'label' => esc_html__( 'Hover', 'easy-elements' ),
620	]
621	);
622	$this->add_control(
623	'single_nav_icon_color_hover',
624	[
625	'label' => esc_html__( 'Color', 'easy-elements' ),
626	'type' => Controls_Manager::COLOR,
627	'selectors' => [
628	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item:hover a svg path' => 'fill: {{VALUE}};',
629	],
630	]
631	);
632	$this->end_controls_tab();
633
634	$this->start_controls_tab(
635	'nav_icon_color_active',
636	[
637	'label' => esc_html__( 'Active', 'easy-elements' ),
638	]
639	);
640	$this->add_control(
641	'single_nav_icon_color_active',
642	[
643	'label' => esc_html__( 'Color', 'easy-elements' ),
644	'type' => Controls_Manager::COLOR,
645	'selectors' => [
646	'{{WRAPPER}} .eel-single-nav-list .eel-nav-item.active a svg path' => 'fill: {{VALUE}};',
647	],
648	]
649	);
650	$this->end_controls_tab();
651	$this->end_controls_tabs();
652	$this->end_controls_section();
653
654	$this->start_controls_section(
655	'section_mobile_style',
656	[
657	'label' => esc_html__( 'Mobile Style', 'easy-elements' ),
658	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
659	'condition' => [
660	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
661	],
662	]
663	);
664
665	// Start Tabs Wrapper
666	$this->start_controls_tabs( 'mobile_text_tabs' );
667
668	// --- NORMAL STATE ---
669	$this->start_controls_tab(
670	'mobile_text_normal',
671	[
672	'label' => esc_html__( 'Normal', 'easy-elements' ),
673	]
674	);
675
676	$this->add_control(
677	'mobile_text_color',
678	[
679	'label' => esc_html__( 'Color', 'easy-elements' ),
680	'type' => \Elementor\Controls_Manager::COLOR,
681	'selectors' => [
682	'{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-single-nav-list li a' => 'color: {{VALUE}};',
683	],
684	]
685	);
686
687	$this->end_controls_tab();
688
689	// --- HOVER STATE ---
690	$this->start_controls_tab(
691	'mobile_text_hover',
692	[
693	'label' => esc_html__( 'Hover', 'easy-elements' ),
694	]
695	);
696
697	$this->add_control(
698	'mobile_text_hover_color',
699	[
700	'label' => esc_html__( 'Color', 'easy-elements' ),
701	'type' => \Elementor\Controls_Manager::COLOR,
702	'selectors' => [
703	'{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-single-nav-list li:hover a' => 'color: {{VALUE}};',
704	],
705	]
706	);
707
708	$this->end_controls_tab();
709
710	// --- ACTIVE STATE ---
711	$this->start_controls_tab(
712	'mobile_text_active',
713	[
714	'label' => esc_html__( 'Active', 'easy-elements' ),
715	]
716	);
717
718	$this->add_control(
719	'mobile_text_active_color',
720	[
721	'label' => esc_html__( 'Color', 'easy-elements' ),
722	'type' => \Elementor\Controls_Manager::COLOR,
723	'selectors' => [
724	'{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-single-nav-list li a.eel-active' => 'color: {{VALUE}};',
725	],
726	]
727	);
728
729	$this->end_controls_tab();
730
731	$this->end_controls_tabs();
732
733	// Background Color
734	$this->add_control(
735	'mobile_bg_color',
736	[
737	'label' => esc_html__( 'Background Color', 'easy-elements' ),
738	'type' => \Elementor\Controls_Manager::COLOR,
739	'selectors' => [
740	'{{WRAPPER}} .sidebar-on-mobile-single-nav' => 'background-color: {{VALUE}};',
741	],
742	'condition' => [
743	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
744	],
745	]
746	);
747
748	// Typography
749	$this->add_group_control(
750	\Elementor\Group_Control_Typography::get_type(),
751	[
752	'name' => 'mobile_typography',
753	'selector' => '{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-single-nav-list li a',
754	'condition' => [
755	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
756	],
757	]
758	);
759
760	// Padding (Responsive)
761	$this->add_responsive_control(
762	'mobile_padding',
763	[
764	'label' => esc_html__( 'Padding', 'easy-elements' ),
765	'type' => \Elementor\Controls_Manager::DIMENSIONS,
766	'size_units' => [ 'px', '%', 'em', 'rem' ],
767	'selectors' => [
768	'{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-single-nav-list li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
769	],
770	'condition' => [
771	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
772	],
773	]
774	);
775
776	$this->add_control(
777	'mobile_humburger_icon_heading',
778	[
779	'label' => esc_html__( 'Humburger Icon', 'easy-elements' ),
780	'type' => \Elementor\Controls_Manager::HEADING,
781	'separator' => 'before',
782	'condition' => [
783	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
784	],
785	]
786	);
787
788	// Humburger Icon Color
789	$this->add_control(
790	'mobile_humburger_icon_color',
791	[
792	'label' => esc_html__( 'Icon Color', 'easy-elements' ),
793	'type' => \Elementor\Controls_Manager::COLOR,
794	'selectors' => [
795	'{{WRAPPER}} .eel-single-nav .eel-nav-menu-icon i' => 'color: {{VALUE}};',
796	'{{WRAPPER}} .eel-single-nav .eel-nav-menu-icon svg path' => 'fill: {{VALUE}};',
797	],
798	'condition' => [
799	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
800	],
801	]
802	);
803
804	// Humburger Icon Size (Responsive)
805	$this->add_responsive_control(
806	'mobile_humburger_icon_size',
807	[
808	'label' => esc_html__( 'Icon Size', 'easy-elements' ),
809	'type' => \Elementor\Controls_Manager::SLIDER,
810	'size_units' => [ 'px', 'em', 'rem' ],
811	'range' => [
812	'px' => [
813	'min' => 10,
814	'max' => 100,
815	],
816	],
817	'selectors' => [
818	'{{WRAPPER}} .eel-single-nav .eel-nav-menu-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
819	'{{WRAPPER}} .eel-single-nav .eel-nav-menu-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
820	],
821	'condition' => [
822	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
823	],
824	]
825	);
826
827	$this->add_control(
828	'mobile_close_icon_heading',
829	[
830	'label' => esc_html__( 'Close Icon', 'easy-elements' ),
831	'type' => \Elementor\Controls_Manager::HEADING,
832	'separator' => 'before',
833	'condition' => [
834	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
835	],
836	]
837	);
838
839	// Close Icon Color
840	$this->add_control(
841	'mobile_close_icon_color',
842	[
843	'label' => esc_html__( 'Color', 'easy-elements' ),
844	'type' => \Elementor\Controls_Manager::COLOR,
845	'selectors' => [
846	'{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-nav-menu-icon, {{WRAPPER}} .sidebar-on-mobile-single-nav .eel-nav-menu-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
847	],
848	'condition' => [
849	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
850	],
851	]
852	);
853
854	$this->add_responsive_control(
855	'mobile_close_icon_size',
856	[
857	'label' => esc_html__( 'Icon Size', 'easy-elements' ),
858	'type' => \Elementor\Controls_Manager::SLIDER,
859	'size_units' => [ 'px', 'em', 'rem' ],
860	'range' => [
861	'px' => [
862	'min' => 10,
863	'max' => 100,
864	],
865	],
866	'selectors' => [
867	'{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-nav-menu-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
868	'{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-nav-menu-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
869	],
870	'condition' => [
871	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
872	],
873	]
874	);
875
876	// Close Icon Border Control
877	$this->add_group_control(
878	\Elementor\Group_Control_Border::get_type(),
879	[
880	'name' => 'mobile_close_icon_border',
881	'label' => esc_html__( 'Border', 'easy-elements' ),
882	'selector' => '{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-nav-menu-icon',
883	'condition' => [
884	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
885	],
886	]
887	);
888
889	// Close Icon Border Radius (Optional but useful for circular icons)
890	$this->add_responsive_control(
891	'mobile_close_icon_radius',
892	[
893	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
894	'type' => \Elementor\Controls_Manager::DIMENSIONS,
895	'size_units' => [ 'px', '%', 'em' ],
896	'selectors' => [
897	'{{WRAPPER}} .sidebar-on-mobile-single-nav .eel-nav-menu-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
898	],
899	'condition' => [
900	'mobile_menu_breakpoint' => [ '480', '576', '768', '992' ],
901	],
902	]
903	);
904	$this->end_controls_section();
905	}
906	protected function render() {
907	$settings = $this->get_settings_for_display();
908	if ( empty( $settings['nav_items'] ) ) {
909	return;
910	}
911	$enableSticky = isset($settings['enable_sticky_header']) && 'yes' === $settings['enable_sticky_header'];
912	$enablePadding = isset($settings['disable_top_padding']) && 'yes' === $settings['disable_top_padding'];
913
914	if ( isset( $settings['enable_sticky_header'] ) && 'yes' === $settings['enable_sticky_header'] ) {
915	// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
916	$GLOBALS['eel_force_sticky_header'] = true; // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
917	wp_enqueue_script(
918	'eel-sticky-header',
919	plugin_dir_url( dirname( dirname( __FILE__ ) ) ) . 'widgets/single-nav/js/eel-sticky-header.js',
920	[ 'jquery' ],
921	EASYELEMENTS_VER,
922	true
923	);
924
925	wp_localize_script('eel-sticky-header', 'eelStickyHeaderSettings', [
926	'enableSticky' => $enableSticky,
927	'enablePadding' => $enablePadding
928	]);
929	}
930
931	if ( 'yes' === $settings['fixed_top_sticky'] ) {
932	$this->add_render_attribute( 'eel-main-menu', 'class', 'eel-fixed-top-sticky' );
933	$inline_js = "
934	document.addEventListener('DOMContentLoaded', function() {
935	var header = document.querySelector('header.easy-site-header');
936	if (header) {
937	header.classList.add('eel-fixed-top-sticky');
938	}
939	});
940	";
941	wp_add_inline_script( 'eel-sticky-header', $inline_js );
942	}
943	?>
944	<nav class="eel-single-nav">
945	<ul class="eel-single-nav-list">
946	<?php $i = 0; foreach ( $settings['nav_items'] as $item ) :
947	$active_class = ( $i === 0 ) ? 'active' : '';
948	$target = ! empty( $item['nav_link']['is_external'] ) ? '_blank' : '';
949	$nofollow = ! empty( $item['nav_link']['nofollow'] ) ? 'nofollow' : '';
950	$nav_icon = ! empty( $item['nav_icon']['value'] ) ? 'eel-has-icon-link' : '';
951	?>
952	<li class="eel-nav-item <?php echo esc_attr( $active_class ); ?>">
953	<a
954	href="<?php echo esc_url( $item['nav_link']['url'] ); ?>"
955	<?php if ( $target ) : ?>
956	target="<?php echo esc_attr( $target ); ?>"
957	<?php endif; ?>
958	<?php if ( $nofollow ) : ?>
959	rel="<?php echo esc_attr( $nofollow ); ?>"
960	<?php endif; ?>
961	class="<?php echo esc_attr( $nav_icon ); ?>">
962	<?php if ( ! empty( $item['nav_icon']['value'] ) ) : ?>
963	<span class="eel-nav-icon-menu">
964	<?php \Elementor\Icons_Manager::render_icon(
965	$item['nav_icon'],
966	[ 'aria-hidden' => 'true' ]
967	); ?>
968	</span>
969	<?php endif; ?>
970	<?php echo esc_html( $item['nav_text'] ); ?>
971	</a>
972	</li>
973	<?php $i++; endforeach; ?>
974	</ul>
975	<?php if ( isset( $settings['mobile_menu_breakpoint'] ) && '' !== $settings['mobile_menu_breakpoint'] ) : ?>
976	<div class="eel-nav-menu-icon">
977	<?php
978	if ( ! empty( $settings['mobile_hamburger_icon']['value'] ) ) {
979	\Elementor\Icons_Manager::render_icon( $settings['mobile_hamburger_icon'], [ 'aria-hidden' => 'true' ] );
980	} else {
981	?>
982	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"></path></svg>
983	<?php } ?>
984	</div>
985	<?php endif; ?>
986	</nav>
987
988	<?php
989	static $mega_mobile_rendered = false;
990	if ( ! $mega_mobile_rendered ) {
991	$mega_mobile_rendered = true;
992	$settings = $this->get_settings_for_display();
993	if ( isset( $settings['mobile_menu_breakpoint'] ) && '' !== $settings['mobile_menu_breakpoint'] ) :
994	$this->add_render_attribute( 'eel-nav-single-menu-mobile', 'class', 'sidebar-on-mobile-single-nav' );
995	$widget_instance = $this;
996	?>
997	<nav <?php $widget_instance->print_render_attribute_string( 'eel-nav-single-menu-mobile' ); ?>>
998	<span class="eel-nav-menu-icon">
999	<?php
1000	if ( ! empty( $settings['mobile_close_icon']['value'] ) ) {
1001	\Elementor\Icons_Manager::render_icon( $settings['mobile_close_icon'], [ 'aria-hidden' => 'true' ] );
1002	} else { ?>
1003	<i class="unicon-close"></i>
1004	<?php }
1005	?>
1006	</span>
1007	<ul class="eel-single-nav-list eel-single-nav-list-mobile">
1008	<?php
1009	$nav_items = $settings['nav_items'] ?? [];
1010	foreach ( $nav_items as $i => $item ) :
1011	$active_class = ( $i === 0 ) ? 'active' : '';
1012	$target = ! empty( $item['nav_link']['is_external'] ) ? '_blank' : '';
1013	$nofollow = ! empty( $item['nav_link']['nofollow'] ) ? 'nofollow' : '';
1014	?>
1015	<li class="eel-nav-item <?php echo esc_attr( $active_class ); ?>">
1016	<a
1017	href="<?php echo esc_url( $item['nav_link']['url'] ); ?>"
1018	<?php if ( $target ) : ?> target="<?php echo esc_attr( $target ); ?>" <?php endif; ?>
1019	<?php if ( $nofollow ) : ?> rel="<?php echo esc_attr( $nofollow ); ?>" <?php endif; ?>
1020	>
1021	<?php echo esc_html( $item['nav_text'] ); ?>
1022	</a>
1023	</li>
1024	<?php endforeach; ?>
1025	</ul>
1026	</nav>
1027	<?php
1028	endif;
1029	}
1030	?>
1031
1032	<?php
1033	if ( isset( $settings['mobile_menu_breakpoint'] ) && '' !== $settings['mobile_menu_breakpoint'] ) :
1034	$mobile_breakpoint = $settings['mobile_menu_breakpoint'] ?? 768;
1035	?>
1036	<style>
1037	@media (max-width: <?php echo esc_attr( $mobile_breakpoint ); ?>px) {
1038	.eel-single-nav-list { display: none; }
1039	.eel-single-nav-list.open { display: block; }
1040	.mobile-nav-toggle { display: block; }
1041	.eel-single-nav-list.eel-single-nav-list-mobile { display: block; }
1042	.eel-single-nav .eel-nav-menu-icon { display: block; }
1043	}
1044	@media (min-width: <?php echo esc_attr( $mobile_breakpoint + 1 ); ?>px) {
1045	.eel-single-nav-list { display: flex; }
1046	.mobile-nav-toggle { display: none; }
1047	.eel-single-nav .eel-nav-menu-icon { display: none; }
1048	.eel-single-nav-list.eel-single-nav-list-mobile { display: block; }
1049	}
1050	</style>
1051	<?php
1052	endif;
1053	}
1054	}