SBIT-108: nav/dropdown

src/components/Banner/Banner.js

@@ -8,9 +8,8 @@ const Banner = ({ data }) => {
   const summary = data?.summary
   const image = data?.image
   const button = data?.button
-  const id = data?.id
   return (
-    <div className={`banner ${variant}`} id={id}>
+    <div className={`banner ${variant}`} id={data.strapi_component + "-" + data.id}>
       <div className="title container">
         <div className="col-12 col-md-6">
           <h1>{title}</h1>

src/components/LogosSection/logosSection.js

@@ -22,7 +22,7 @@ const LogosSection = ({ data }) => {
     )
   })
   return (
-    <div className="logos container py-3 my-3">
+    <div className="logos container py-3 my-3" id={data.strapi_component + "-" + data.id}>
       {title && <h2 className="logos__title">{title}</h2>}
       {summary && <h6 className="logos__summary px-lg-3">{summary}</h6>}
       <div className="logos__logos">{logoList}</div>

src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js

@@ -16,11 +16,15 @@ const getComponentTitle = component => {
     "home.video-background": () => component.title,
     "home.dual-section": () =>
       component.dualSectionPart.map(section => section.title).join(" - "),
+    "components.text": () => false,
+    "banners.banner-head": () => component.title,
+    "components.logos-section": () => component.title,
+    "components.form": () => false,
+    "components.banner": () => component.title,
   }
   return (
-    (titleReference[component.strapi_component] &&
-      titleReference[component.strapi_component]()) ||
-    "Titulo no definido"
+    titleReference[component.strapi_component] &&
+    titleReference[component.strapi_component]()
   )
 }
 
@@ -43,7 +47,7 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
                 sections={landingComponents
                   .find(landing => landing.name === navItem.landing.name)
                   .body.map(component => ({
-                    name: getComponentTitle(component),
+                    name: getComponentTitle(component) || "",
                     id: component.strapi_component + "-" + component.id,
                     slug: navItem.landing.slug,
                   }))}

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

@@ -4,21 +4,23 @@ import "./dropdown.scss"
 
 const Dropdown = ({ sections }) => {
   return (
-    <div className="dropdown_elem" style={!sections ? {maxHeight: "0"} : {}}>
+    <div className="dropdown_elem" style={!sections ? { maxHeight: "0" } : {}}>
       <div className="dropdown_elem-section" data-first-dropdown-section>
         <ul>
           {sections &&
-            sections.map(section => (
-              <p className="dropdown_elem-link">
-                <Link
-                  to={"/" + (section.slug || "")}
-                  state={{ component: section.id }}
-                  className="dropdown_elem-link-inner"
-                >
-                  {section.name}
-                </Link>
-              </p>
-            ))}
+            sections.map(section =>
+              section.name ? (
+                <p className="dropdown_elem-link">
+                  <Link
+                    to={"/" + (section.slug || "")}
+                    state={{ component: section.id }}
+                    className="dropdown_elem-link-inner"
+                  >
+                    {section.name}
+                  </Link>
+                </p>
+              ) : null
+            )}
         </ul>
       </div>
     </div>

src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss

@@ -30,7 +30,7 @@
       @media screen and (max-width: $breakpoint-xl) {
         justify-content: baseline;
         margin-left: 40px;
-        font-size: 1.4em;
+        font-size: 1.2em;
       }
       transition: opacity 250ms;
       cursor: pointer;
@@ -48,6 +48,9 @@
       left: 50%;
       transform: translateX(-50%);
       perspective: 1500px;
+      @media screen and (max-width: $breakpoint-xl) {
+       display: none;
+      }
     }
   }
 }

src/components/NavBar/NavBar.scss

@@ -54,14 +54,17 @@
   &-contact {
     @include primaryBtn;
     white-space: nowrap;
+    a{
+      color: inherit;
+    }
   }
   p {
     color: #1f1d37;
     margin: 0 2em 0 2.5em;
   }
   @media screen and (max-width: $breakpoint-xl) {
     margin-left: 40px;
-    font-size: 1.4em;
+    font-size: 1.3em;
     &-contact {
       font-size: 0.9em;
     }

src/components/NavBar/Navbar.js

@@ -21,6 +21,9 @@ const NavBar = () => {
   const logoDark = getImage(
     navbarData.allStrapiLayout?.nodes[0].navbar?.logoDark?.localFile
   )
+
+  const navbarButton = navbarData.allStrapiLayout?.nodes[0].navbar?.navButton
+
   return (
     <>
       <Navbar variant="dark" expand="xl" className="NavBar">
@@ -49,7 +52,19 @@ const NavBar = () => {
             </div>
           )}
           <div className="NavBar_Side">
-            <button className="NavBar_Side-contact">Hablemos</button>
+            {navbarButton && (
+              <button className="NavBar_Side-contact">
+                <Link
+                  to={
+                    "/" + navbarButton.landing_page
+                      ? navbarButton.landing_page.slug
+                      : ""
+                  }
+                >
+                  {navbarButton.content}
+                </Link>
+              </button>
+            )}
             <button className="theme-toggle" onClick={toggleTheme}>
               {theme === "dark" ? (
                 <img

src/components/Text/Text.js

@@ -10,7 +10,7 @@ export default function Text({ data }) {
   return (
     <div className="container-text" style={{
       backgroundImage: `url(${bgImage})`,
-    }}>
+    }} id={data.strapi_component + "-" + data.id}>
       {title !== "" && title !== undefined && title !== null ? (
         <div className="text d-flex flex-column flex-md-row">
           <div className="title">

src/hooks/useNavbar.js

@@ -6,6 +6,13 @@ const useNavbar = () => {
       allStrapiLayout {
         nodes {
           navbar {
+            navButton {
+              landing_page {
+                slug
+              }
+              url
+              content
+            }
             navbarItem {
               url
               label

src/schema/layoutSchema.js

@@ -16,7 +16,40 @@ type StrapiLayoutFooter {
     navbarItem: [StrapiLayoutNavbarNavbarItem]
     logo: LocalFile
     logoDark: LocalFile
+    navButton: StrapiLayoutNavbarNavButton
   }
+
+
+type StrapiLayoutNavbarNavButton {
+  id: Int
+  content: String
+  url: String
+  landing_page: StrapiLayoutNavbarNavButtonLanding_page
+}
+
+type StrapiLayoutNavbarNavButtonLanding_page {
+  id: Int
+  name: String
+  slug: String
+  published_at(
+    formatString: String
+    fromNow: Boolean
+    difference: String
+    locale: String
+  ): Date
+  created_at(
+    formatString: String
+    fromNow: Boolean
+    difference: String
+    locale: String
+  ): Date
+  updated_at(
+    formatString: String
+    fromNow: Boolean
+    difference: String
+    locale: String
+  ): Date
+}
 
   type StrapiLayoutNavbarNavbarItem {
     id: Int