Skip to content

Commit 698637c

Browse files
marino-martinmarino-martin
authored
Merge pull request #318 from bitlogic/dev
Release 25-11-2024
2 parents 7659ed1 + ada7740 commit 698637c

File tree

15 files changed

+431
-124
lines changed

15 files changed

+431
-124
lines changed

‎gatsby-config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,13 @@ module.exports = {
163163
],
164164
},
165165
},
166+
{
167+
resolve: `gatsby-plugin-purgecss`,
168+
options: {
169+
printRejected: true, // Muestra las clases eliminadas en la consola
170+
develop: false, // PurgeCSS solo se ejecuta en producción
171+
},
172+
},
166173
"gatsby-plugin-offline",
167174
`gatsby-plugin-sass`,
168175
],

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@
1414
"bootstrap": "^5.1.0",
1515
"gatsby": "^4.6.0",
1616
"gatsby-background-image": "^1.5.3",
17-
"gatsby-plugin-google-tagmanager": "^4.25.0",
1817
"gatsby-plugin-canonical-urls": "^4.22.0",
18+
"gatsby-plugin-google-tagmanager": "^4.25.0",
1919
"gatsby-plugin-image": "^2.6.0",
2020
"gatsby-plugin-manifest": "^4.6.0",
2121
"gatsby-plugin-offline": "^5.6.0",
22+
"gatsby-plugin-purgecss": "^6.2.1",
2223
"gatsby-plugin-robots-txt": "1.7.1",
2324
"gatsby-plugin-sass": "^5.6.0",
2425
"gatsby-plugin-sharp": "^4.6.0",

‎src/components/DualSection/DualSection.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ DualSection.propTypes = {
6565
summary: PropTypes.string,
6666
dualSectionPart: PropTypes.arrayOf(
6767
PropTypes.shape({
68-
id: PropTypes.string.isRequired,
68+
id: PropTypes.number.isRequired,
6969
title: PropTypes.string.isRequired,
7070
description: PropTypes.string,
7171
button: PropTypes.shape({

‎src/components/Form/Form.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
.title {
88
text-transform: uppercase;
99
}
10-
10+
h1{
11+
font-size: 42px;
12+
}
1113
.form-wrapper {
1214
color: $black;
1315
width: 100%;

‎src/components/Form/PipedriveForm.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const PipedriveForm = ({ data }) => {
2323
<section className="form">
2424
<div className="container d-flex px-lg-2 flex-wrap">
2525
<div className="col-12 col-md-6 pe-md-5">
26-
{title && <h2 className="title text-start">{title}</h2>}
26+
{title && <h1 className="title text-start">{title}</h1>}
2727
{content && (
2828
<MarkdownView
2929
markdown={content}

‎src/components/ListItems/ListItems.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ ListItems.propTypes = {
6060
title: PropTypes.string,
6161
ListItem: PropTypes.arrayOf(
6262
PropTypes.shape({
63-
id: PropTypes.string.isRequired,
63+
id: PropTypes.number.isRequired,
6464
title: PropTypes.string.isRequired,
6565
description: PropTypes.string,
6666
landing_page: PropTypes.shape({

‎src/components/LogosSection/logosSection.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ LogosSection.propTypes = {
104104
summary: PropTypes.string,
105105
media: PropTypes.arrayOf(
106106
PropTypes.shape({
107-
id: PropTypes.string.isRequired,
107+
id: PropTypes.number.isRequired,
108108
name: PropTypes.string.isRequired,
109109
img: PropTypes.shape({
110110
url: PropTypes.string.isRequired,

‎src/components/NavBar/AnimatedNavBar/DropdownContainer/Dropdown.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@ const Dropdown = memo(({ sections, topLevel }) => {
5656
<div
5757
className="dropdown_elem_topLevel"
5858
style={{
59-
borderBottom: "2px solid #808080",
6059
marginBottom: "15px",
6160
paddingBottom: "8px",
6261
}}

‎src/components/NavBar/AnimatedNavBar/DropdownContainer/DropdownItems.js‎

Lines changed: 91 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,60 @@
1-
import React, { memo } from "react"
2-
import "./dropdownItems.scss"
3-
import CustomImage from "../../../CustomImage/CustomImage"
4-
import CustomLink from "../../../CustomLink/CustomLink"
5-
import PropTypes from "prop-types"
1+
import React, { memo, useState, useEffect } from "react";
2+
import "./dropdownItems.scss";
3+
import CustomImage from "../../../CustomImage/CustomImage";
4+
import CustomLink from "../../../CustomLink/CustomLink";
5+
import PropTypes from "prop-types";
6+
import { FaAngleDown } from "react-icons/fa";
7+
8+
const RenderSection = ({ section, className, isOpen, toggleSubLandingPages, isMobileView }) => {
9+
const { icon, label, url, landing_page, sub_landing_pages = [] } = section || {};
10+
const hasSubLandingPages = sub_landing_pages.length > 0;
611

7-
const RenderSection = ({ section, className }) => {
812
return (
913
<>
1014
<div className={className}>
1115
<CustomImage
12-
image={section?.icon}
13-
alt={section?.icon?.alternativeText || "NavLink icon"}
16+
image={icon}
17+
alt={icon?.alternativeText || "NavLink icon"}
1418
className="navbarItemIcon"
1519
width={28}
1620
height={28}
1721
/>
1822
<CustomLink
19-
content={section.label}
20-
url={section?.url}
21-
landing={section?.landing_page}
23+
content={label}
24+
url={url}
25+
landing={landing_page}
2226
className="dropdownItem_link-inner"
2327
/>
28+
{hasSubLandingPages && (
29+
<FaAngleDown
30+
className={`dropdownItem_icon ${isOpen ? "open" : ""}`}
31+
onClick={() => toggleSubLandingPages(section.id)}
32+
/>
33+
)}
2434
</div>
2535
{section?.text && <p className="navItemP">{section.text}</p>}
26-
{section?.sub_landing_pages && section.sub_landing_pages.length > 0 && (
27-
<ul className="subLandingPages">
28-
{section.sub_landing_pages.map(subItem => (
29-
<li key={subItem.id}>
36+
37+
{(hasSubLandingPages && (isOpen || !isMobileView)) && (
38+
<ul className={`subLandingPages ${sub_landing_pages.length > 5 ? "two-column-list" : ""}`}>
39+
{sub_landing_pages.map(({ id, name, slug }) => (
40+
<li key={id} className="subLandingPages-item">
3041
<CustomLink
31-
content={subItem.name}
32-
url={`/${subItem.slug}`}
42+
content={name}
43+
url={`/${slug}`}
3344
className="dropdownItem_link-subLanding"
3445
/>
3546
</li>
3647
))}
3748
</ul>
3849
)}
3950
</>
40-
)
41-
}
51+
);
52+
};
4253

4354
RenderSection.propTypes = {
4455
className: PropTypes.string,
4556
section: PropTypes.shape({
57+
id: PropTypes.number.isRequired,
4658
label: PropTypes.string.isRequired,
4759
text: PropTypes.string,
4860
url: PropTypes.string,
@@ -51,6 +63,7 @@ RenderSection.propTypes = {
5163
}),
5264
sub_landing_pages: PropTypes.arrayOf(
5365
PropTypes.shape({
66+
id: PropTypes.number.isRequired,
5467
slug: PropTypes.string.isRequired,
5568
name: PropTypes.string.isRequired,
5669
})
@@ -64,49 +77,77 @@ RenderSection.propTypes = {
6477
}),
6578
}),
6679
}),
67-
}),
68-
}
80+
}).isRequired,
81+
isOpen: PropTypes.bool.isRequired,
82+
toggleSubLandingPages: PropTypes.func.isRequired,
83+
isMobileView: PropTypes.bool.isRequired,
84+
};
85+
6986

7087
const DropdownItems = memo(({ sections, topLevel }) => {
71-
return (
72-
<div className="dropdownItem_container" style={!sections ? { maxHeight: "0" } : {}}>
73-
<div className="dropdownItem_section" data-first-dropdown-section>
74-
{topLevel && (
75-
<div
76-
className="dropdownItem_topLevel"
77-
style={{
78-
marginRight: "15px", // Espacio entre topLevel y dropdown
79-
paddingBottom: "8px",
80-
}}
81-
>
88+
const [openSectionId, setOpenSectionId] = useState(null);
89+
const [isMobileView, setIsMobileView] = useState(window.innerWidth < 1200);
90+
91+
// Actualizar el estado `isMobileView` según el tamaño de la pantalla
92+
useEffect(() => {
93+
const handleResize = () => {
94+
setIsMobileView(window.innerWidth < 1200);
95+
};
96+
window.addEventListener("resize", handleResize);
97+
return () => window.removeEventListener("resize", handleResize);
98+
}, []);
99+
100+
const toggleSubLandingPages = (sectionId) => {
101+
if (isMobileView) {
102+
setOpenSectionId((prevId) => (prevId === sectionId ? null : sectionId));
103+
}
104+
};
105+
106+
return (
107+
<div className="dropdownItem_container" style={!sections ? { maxHeight: "0" } : {}}>
108+
<div className="dropdownItem_section" data-first-dropdown-section>
109+
{topLevel && (
110+
<div
111+
className="dropdownItem_topLevel"
112+
style={{
113+
marginRight: "15px", // Espacio entre topLevel y dropdown
114+
paddingBottom: "8px",
115+
}}
116+
>
117+
<RenderSection
118+
section={topLevel}
119+
className={"dropdownItem_link-topLevel"}
120+
isOpen={openSectionId === topLevel.id}
121+
toggleSubLandingPages={toggleSubLandingPages}
122+
isMobileView={isMobileView}
123+
/>
124+
</div>
125+
)}
126+
<div className="dropdownItem_content">
127+
{sections?.map((section) => (
128+
<div key={section.id} className="dropdownItem">
82129
<RenderSection
83-
section={topLevel}
84-
className={"dropdownItem_link-topLevel"}
130+
section={section}
131+
className={"dropdownItem_link"}
132+
isOpen={openSectionId === section.id}
133+
toggleSubLandingPages={toggleSubLandingPages}
134+
isMobileView={isMobileView}
85135
/>
86136
</div>
87-
)}
88-
<div className="dropdownItem_content">
89-
{sections?.map(section => (
90-
<div key={section.id} className="dropdownItem">
91-
<RenderSection
92-
section={section}
93-
className={"dropdownItem_link"}
94-
/>
95-
</div>
96-
))}
97-
</div>
137+
))}
98138
</div>
99139
</div>
100-
)
101-
})
102-
140+
</div>
141+
);
142+
});
143+
103144
DropdownItems.propTypes = {
104145
topLevel: PropTypes.object,
105146
sections: PropTypes.arrayOf(
106147
PropTypes.shape({
107148
id: PropTypes.number.isRequired,
108149
})
109150
),
110-
}
151+
};
111152

112-
export default DropdownItems
153+
export default DropdownItems;

‎src/components/NavBar/AnimatedNavBar/DropdownContainer/dropdown.scss‎

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,37 @@
22

33
.dropdown {
44
&_elem {
5-
width: 18.5rem;
5+
width: 40rem;
6+
display: flex;
7+
justify-content: flex-start;
8+
align-items: flex-start;
9+
610

711
&-section {
812
padding-top: 28px;
913
padding-right: 28px;
1014
padding-bottom: 14px;
1115
padding-left: 28px;
12-
position: relative;
16+
display: flex;
1317

1418
.dropdown_section {
1519
display: flex;
1620
flex-direction: column;
1721
gap: 8px;
22+
width: 65%;
23+
padding-left: 20px;
1824
}
25+
26+
}
27+
28+
&_topLevel{
29+
display: flex;
30+
flex-direction: column;
31+
justify-content: flex-start;
32+
align-items: flex-start;
33+
width: 35%; /* Ocupará el 25% del espacio del contenedor, ahora a la izquierda */
34+
padding-right: 20px;
35+
border-right: 2px solid #808080; /* Separador vertical a la derecha */
1936
}
2037

2138
&-link {
@@ -108,7 +125,7 @@
108125

109126
@media only screen and (min-width: 768px) {
110127
align-items: start;
111-
padding-left: 50px;
128+
padding-left: 50px;
112129
}
113130

114131
&-background {
@@ -173,3 +190,33 @@
173190
opacity: 0;
174191
}
175192
}
193+
194+
@media screen and (max-width: 1200px) {
195+
.dropdown {
196+
&_elem {
197+
width: 18.5rem;
198+
width: 100%;
199+
&-section{
200+
flex-direction: column;
201+
.dropdown_section {
202+
padding-left: 0px;
203+
width: 100%;
204+
}
205+
}
206+
207+
&_topLevel{
208+
width: 100%;
209+
border-right: none;
210+
border-bottom: 2px solid #808080;
211+
}
212+
}
213+
}
214+
215+
.dropdown_root{
216+
&-inverted {
217+
width: 18.5rem;
218+
}
219+
220+
}
221+
222+
}

0 commit comments

Comments
 (0)