Merge pull request #87 from bitlogic/develop

Release 25-11-2024

Author: marino-martin

gatsby-config.js

@@ -1,3 +1,7 @@
+require("dotenv").config({
+  path: `.env`, // Asegúrate de que apunte al archivo correcto
+});
+
 module.exports = {
   trailingSlash: "always",
   siteMetadata: {
@@ -163,6 +167,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

@@ -19,6 +19,7 @@
     "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/BannerList/BannerList.js

@@ -58,7 +58,7 @@ BannerList.propTypes = {
   data: PropTypes.shape({
     title: PropTypes.string.isRequired,
     strapi_component: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired,
+    id: PropTypes.number.isRequired,
     contactForm: PropTypes.bool,
     concactFormAnchor: PropTypes.string,
     callToAction: PropTypes.string,

src/components/Form/Form.scss

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

src/components/Form/PipedriveForm.js

@@ -40,7 +40,7 @@ const PipedriveForm = ({ data }) => {
       <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>
+            <h1 className="title text-start">{title}</h1>
           )}
           {content && (
             <MarkdownView

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,32 +1,45 @@
-import React, { memo } from "react"
+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, english_landing_page, english_sub_landing_pages = [] } = section || {};
+    const hasSubLandingPages = english_sub_landing_pages.length > 0;
 
-const RenderSection = ({section, className }) => {
     return (
         <>
-            <div className={className}>
+            <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?.english_landing_page}
+                    content={label}
+                    url={url}
+                    landing={english_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?.english_sub_landing_pages && section.english_sub_landing_pages.length > 0 && (
-                <ul className="subLandingPages">
-                    {section.english_sub_landing_pages.map(subItem => (
-                        <li key={subItem.id}>
+
+            {(hasSubLandingPages && (isOpen || !isMobileView)) && (
+                <ul className={`subLandingPages ${section.english_sub_landing_pages.length > 5 ? 'two-column-list' : ''}`} >
+                    {english_sub_landing_pages.map(subItem => (
+                        <li key={subItem.id} className="subLandingPages-item">
                             <CustomLink 
                                 content={subItem.name}
                                 url={`/${subItem.slug}`}
@@ -42,6 +55,7 @@ const RenderSection = ({section, className }) => {
 
 RenderSection.propTypes = {
     section: PropTypes.shape({
+        id: PropTypes.number.isRequired, 
         icon: PropTypes.shape({
             alternativeText: PropTypes.string
         }),
@@ -51,16 +65,39 @@ RenderSection.propTypes = {
         english_landing_page: PropTypes.string,
         english_sub_landing_pages: PropTypes.arrayOf(
             PropTypes.shape({
-                id: PropTypes.number.isRequired,
+                id: PropTypes.number.isRequired, 
                 name: PropTypes.string.isRequired,
                 slug: PropTypes.string.isRequired
             })
         )
     }).isRequired,
-    className: PropTypes.string
+    className: PropTypes.string,
+    isOpen: PropTypes.bool.isRequired,
+    toggleSubLandingPages: PropTypes.func.isRequired,
+    isMobileView: PropTypes.bool.isRequired
 };
 
+
 const DropdownItems = memo(({ sections, topLevel }) => {
+
+    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>
@@ -75,6 +112,9 @@ const DropdownItems = memo(({ sections, topLevel }) => {
                         <RenderSection
                             section={topLevel}
                             className={"dropdownItem_link-topLevel"}
+                            isOpen={openSectionId === topLevel.id}
+                            toggleSubLandingPages={toggleSubLandingPages}
+                            isMobileView={isMobileView}
                         />
                     </div>    
                 )}
@@ -84,6 +124,9 @@ const DropdownItems = memo(({ sections, topLevel }) => {
                             <RenderSection
                                 section={section}
                                 className={"dropdownItem_link"}
+                                isOpen={openSectionId === section.id}
+                                toggleSubLandingPages={toggleSubLandingPages}
+                                isMobileView={isMobileView}
                             />
                         </div>   
                     ))}

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

@@ -11,6 +11,7 @@
     }
 
     &_section{
+      background-color: #2b2b2b;
         display: flex;
         width: 100%;
         padding: 20px;
@@ -38,12 +39,11 @@
         flex-direction: row;
         align-items: center;
         font-size: 18px;
-        padding-bottom: 0.1rem;
 
         &-inner {
             text-align: start;
             color: $primary;
-            padding: 2% 0;
+            padding: 8px 0;
             font-weight: $standard;
 
             &:hover {
@@ -56,7 +56,6 @@
             display: flex;
             flex-direction: row;
             align-items: center;
-            border-right: "2px solid #808080";
         }
 
         &-subLanding {
@@ -97,16 +96,28 @@
     list-style-type: none;          
     text-align: start;
     margin-left: 1.7rem;
-  
   }
 
+  .two-column-list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    padding: 0;
+    list-style: none;
+  }
+
+  .dropdownItem_icon {
+    display: none;
+  }
+  
   @media only screen and (max-width: 1200px) {
     .dropdownItem {
+      background-color: #2b2b2b;
       &_container {
         flex-direction: column; // Cambia a una disposición vertical
       }
 
       &_section {
+        
         padding-top: 28px;
         padding-right: 28px;
         padding-bottom: 14px;
@@ -124,50 +135,27 @@
       &_topLevel {
         width: 100%; // Asegura que el top level ocupe todo el ancho
         border-right: none; // Elimina la línea de separación si no es necesaria
-        margin-right: 0; // Elimina el margen derecho
-        padding-bottom: 8px; // Añade un poco de espacio debajo del top level
         border-bottom: 2px solid #808080;
       }
     }
 
     .subLandingPages {
       margin-left: 1.3rem;
-    }
-  }
-  
-  @media only screen and (max-width: 1200px) {
-    .dropdownItem {
-      &_container {
-        flex-direction: column; // Cambia a una disposición vertical
-      }
-  
-      &_section {
-        // Cambia el estilo si es necesario
-        padding-top: 28px;
-        padding-right: 28px;
-        padding-bottom: 14px;
-        padding-left: 28px;
+
+      &-item{
+        height: 36px;
         display: flex;
-        flex-direction: column; // Asegura que los subitems se alineen verticalmente
-      }
-  
-      &_content {
-        flex-direction: column; // Asegura que los items dentro también sean verticales
-        width: 100%; // Ocupará el 100% del ancho
-        gap: 16px;
-      }
-  
-      &_topLevel {
-        width: 100%; // Asegura que el top level ocupe todo el ancho
-        border-right: none; // Elimina la línea de separación si no es necesaria
-        margin-right: 0; // Elimina el margen derecho
-        padding-bottom: 8px; // Añade un poco de espacio debajo del top level
-        border-bottom: 2px solid #808080;
+        align-items: center;
       }
+      
     }
-  
-    .subLandingPages {
-      margin-left: 1.3rem;
-      // display: none; // Oculta los subitems en mobile
+
+    .dropdownItem_icon {
+      display: block;
+      color: $primary;
+      
+      &.open {
+        transform: rotate(180deg);
+      }
     }
   }

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

@@ -2,22 +2,34 @@
 
 .dropdown {
   &_elem {
-    width: 18.5rem;
+    width: 40rem;
 
     &-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%;
+      border-right: 2px solid #808080;
+      padding-right: 20px;
+    }
+
     &-link {
       display: flex;
       flex-direction: row;
@@ -173,3 +185,31 @@
     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;
+    }
+  }
+}