Merge pull request #318 from bitlogic/dev

Release 25-11-2024

Author: marino-martin

gatsby-config.js

@@ -163,6 +163,13 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: `gatsby-plugin-purgecss`,
+      options: {
+        printRejected: true,     // Muestra las clases eliminadas en la consola
+        develop: false,          // PurgeCSS solo se ejecuta en producción
+      },
+    },
     "gatsby-plugin-offline",
     `gatsby-plugin-sass`,
   ],

package.json

@@ -14,11 +14,12 @@
     "bootstrap": "^5.1.0",
     "gatsby": "^4.6.0",
     "gatsby-background-image": "^1.5.3",
-    "gatsby-plugin-google-tagmanager": "^4.25.0",
     "gatsby-plugin-canonical-urls": "^4.22.0",
+    "gatsby-plugin-google-tagmanager": "^4.25.0",
     "gatsby-plugin-image": "^2.6.0",
     "gatsby-plugin-manifest": "^4.6.0",
     "gatsby-plugin-offline": "^5.6.0",
+    "gatsby-plugin-purgecss": "^6.2.1",
     "gatsby-plugin-robots-txt": "1.7.1",
     "gatsby-plugin-sass": "^5.6.0",
     "gatsby-plugin-sharp": "^4.6.0",

src/components/DualSection/DualSection.js

@@ -65,7 +65,7 @@ DualSection.propTypes = {
     summary: PropTypes.string,
     dualSectionPart: PropTypes.arrayOf(
       PropTypes.shape({
-        id: PropTypes.string.isRequired,
+        id: PropTypes.number.isRequired,
         title: PropTypes.string.isRequired,
         description: PropTypes.string,
         button: PropTypes.shape({

src/components/Form/Form.scss

@@ -7,7 +7,9 @@
   .title {
     text-transform: uppercase;
   }
-
+  h1{
+    font-size: 42px;
+  }
   .form-wrapper {
     color: $black;
     width: 100%;

src/components/Form/PipedriveForm.js

@@ -23,7 +23,7 @@ const PipedriveForm = ({ data }) => {
     <section className="form">
       <div className="container d-flex px-lg-2 flex-wrap">
         <div className="col-12 col-md-6 pe-md-5">
-          {title && <h2 className="title text-start">{title}</h2>}
+          {title && <h1 className="title text-start">{title}</h1>}
           {content && (
             <MarkdownView
               markdown={content}

src/components/ListItems/ListItems.js

@@ -60,7 +60,7 @@ ListItems.propTypes = {
     title: PropTypes.string,
     ListItem: PropTypes.arrayOf(
       PropTypes.shape({
-        id: PropTypes.string.isRequired,
+        id: PropTypes.number.isRequired,
         title: PropTypes.string.isRequired,
         description: PropTypes.string,
         landing_page: PropTypes.shape({

src/components/LogosSection/logosSection.js

@@ -104,7 +104,7 @@ LogosSection.propTypes = {
     summary: PropTypes.string,
     media: PropTypes.arrayOf(
       PropTypes.shape({
-        id: PropTypes.string.isRequired,
+        id: PropTypes.number.isRequired,
         name: PropTypes.string.isRequired,
         img: PropTypes.shape({
           url: PropTypes.string.isRequired,

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

@@ -56,7 +56,6 @@ const Dropdown = memo(({ sections, topLevel }) => {
           <div
             className="dropdown_elem_topLevel"
             style={{
-              borderBottom: "2px solid #808080",
               marginBottom: "15px",
               paddingBottom: "8px",
             }}

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

@@ -1,48 +1,60 @@
-import React, { memo } from "react"
-import "./dropdownItems.scss"
-import CustomImage from "../../../CustomImage/CustomImage"
-import CustomLink from "../../../CustomLink/CustomLink"
-import PropTypes from "prop-types"
+import React, { memo, useState, useEffect } from "react";
+import "./dropdownItems.scss";
+import CustomImage from "../../../CustomImage/CustomImage";
+import CustomLink from "../../../CustomLink/CustomLink";
+import PropTypes from "prop-types";
+import { FaAngleDown } from "react-icons/fa";
+
+const RenderSection = ({ section, className, isOpen, toggleSubLandingPages, isMobileView }) => {
+  const { icon, label, url, landing_page, sub_landing_pages = [] } = section || {};
+  const hasSubLandingPages = sub_landing_pages.length > 0;
 
-const RenderSection = ({ section, className }) => {
   return (
     <>
       <div className={className}>
         <CustomImage
-          image={section?.icon}
-          alt={section?.icon?.alternativeText || "NavLink icon"}
+          image={icon}
+          alt={icon?.alternativeText || "NavLink icon"}
           className="navbarItemIcon"
           width={28}
           height={28}
         />
         <CustomLink
-          content={section.label}
-          url={section?.url}
-          landing={section?.landing_page}
+          content={label}
+          url={url}
+          landing={landing_page}
           className="dropdownItem_link-inner"
         />
+        {hasSubLandingPages && (
+          <FaAngleDown
+            className={`dropdownItem_icon ${isOpen ? "open" : ""}`}
+            onClick={() => toggleSubLandingPages(section.id)}
+          />
+        )}
       </div>
       {section?.text && <p className="navItemP">{section.text}</p>}
-      {section?.sub_landing_pages && section.sub_landing_pages.length > 0 && (
-        <ul className="subLandingPages">
-          {section.sub_landing_pages.map(subItem => (
-            <li key={subItem.id}>
+
+      {(hasSubLandingPages && (isOpen || !isMobileView)) && (
+        <ul className={`subLandingPages ${sub_landing_pages.length > 5 ? "two-column-list" : ""}`}>
+          {sub_landing_pages.map(({ id, name, slug }) => (
+            <li key={id} className="subLandingPages-item">
               <CustomLink
-                content={subItem.name}
-                url={`/${subItem.slug}`}
+                content={name}
+                url={`/${slug}`}
                 className="dropdownItem_link-subLanding"
               />
             </li>
           ))}
         </ul>
       )}
     </>
-  )
-}
+  );
+};
 
 RenderSection.propTypes = {
   className: PropTypes.string,
   section: PropTypes.shape({
+    id: PropTypes.number.isRequired, 
     label: PropTypes.string.isRequired,
     text: PropTypes.string,
     url: PropTypes.string,
@@ -51,6 +63,7 @@ RenderSection.propTypes = {
     }),
     sub_landing_pages: PropTypes.arrayOf(
       PropTypes.shape({
+        id: PropTypes.number.isRequired, 
         slug: PropTypes.string.isRequired,
         name: PropTypes.string.isRequired,
       })
@@ -64,49 +77,77 @@ RenderSection.propTypes = {
         }),
       }),
     }),
-  }),
-}
+  }).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  toggleSubLandingPages: PropTypes.func.isRequired,
+  isMobileView: PropTypes.bool.isRequired,
+};
+
 
 const DropdownItems = memo(({ sections, topLevel }) => {
-    return (
-      <div className="dropdownItem_container" style={!sections ? { maxHeight: "0" } : {}}>
-        <div className="dropdownItem_section" data-first-dropdown-section>
-          {topLevel && (
-            <div 
-              className="dropdownItem_topLevel"
-              style={{
-                marginRight: "15px", // Espacio entre topLevel y dropdown
-                paddingBottom: "8px",
-              }}
-            >
+  const [openSectionId, setOpenSectionId] = useState(null);
+  const [isMobileView, setIsMobileView] = useState(window.innerWidth < 1200);
+
+  // Actualizar el estado `isMobileView` según el tamaño de la pantalla
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobileView(window.innerWidth < 1200);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const toggleSubLandingPages = (sectionId) => {
+    if (isMobileView) {
+      setOpenSectionId((prevId) => (prevId === sectionId ? null : sectionId));
+    }
+  };
+
+  return (
+    <div className="dropdownItem_container" style={!sections ? { maxHeight: "0" } : {}}>
+      <div className="dropdownItem_section" data-first-dropdown-section>
+        {topLevel && (
+          <div 
+            className="dropdownItem_topLevel"
+            style={{
+              marginRight: "15px", // Espacio entre topLevel y dropdown
+              paddingBottom: "8px",
+            }}
+          >
+            <RenderSection
+              section={topLevel}
+              className={"dropdownItem_link-topLevel"}
+              isOpen={openSectionId === topLevel.id}
+              toggleSubLandingPages={toggleSubLandingPages}
+              isMobileView={isMobileView}
+            />
+          </div>
+        )}
+        <div className="dropdownItem_content">
+          {sections?.map((section) => (
+            <div key={section.id} className="dropdownItem">
               <RenderSection
-                section={topLevel}
-                className={"dropdownItem_link-topLevel"}
+                section={section}
+                className={"dropdownItem_link"}
+                isOpen={openSectionId === section.id}
+                toggleSubLandingPages={toggleSubLandingPages}
+                isMobileView={isMobileView}
               />
             </div>
-          )}
-          <div className="dropdownItem_content">
-            {sections?.map(section => (
-              <div key={section.id} className="dropdownItem">
-                <RenderSection
-                  section={section}
-                  className={"dropdownItem_link"}
-                />
-              </div>
-            ))}
-          </div>
+          ))}
         </div>
       </div>
-    )
-  })
-  
+    </div>
+  );
+});
+
 DropdownItems.propTypes = {
   topLevel: PropTypes.object,
   sections: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.number.isRequired,
     })
   ),
-}
+};
 
-export default DropdownItems
+export default DropdownItems;

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

@@ -2,20 +2,37 @@
 
 .dropdown {
   &_elem {
-    width: 18.5rem;
+    width: 40rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    
 
     &-section {
       padding-top: 28px;
       padding-right: 28px;
       padding-bottom: 14px;
       padding-left: 28px;
-      position: relative;
+      display: flex;
 
       .dropdown_section {
         display: flex;
         flex-direction: column;
         gap: 8px;
+        width: 65%;
+        padding-left: 20px;
       }
+
+    }
+
+    &_topLevel{
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+      width: 35%; /* Ocupará el 25% del espacio del contenedor, ahora a la izquierda */
+      padding-right: 20px;
+      border-right: 2px solid #808080; /* Separador vertical a la derecha */
     }
 
     &-link {
@@ -108,7 +125,7 @@
 
   @media only screen and (min-width: 768px) {
     align-items: start;
-    padding-left: 50px;
+    padding-left: 50px; 
   }
 
   &-background {
@@ -173,3 +190,33 @@
     opacity: 0;
   }
 }
+
+@media  screen and (max-width: 1200px) {
+  .dropdown {
+    &_elem {
+      width: 18.5rem;
+      width: 100%;
+      &-section{
+        flex-direction: column;
+        .dropdown_section {
+          padding-left: 0px;
+          width: 100%;
+        }
+      }
+
+      &_topLevel{
+        width: 100%;
+        border-right: none; 
+        border-bottom: 2px solid #808080;
+      }
+    }
+  }
+
+  .dropdown_root{
+    &-inverted {
+      width: 18.5rem;
+    }
+
+  }
+  
+}