SBIT-45: navbar

src/components/BannerList/BannerLis.js

@@ -1,37 +1,35 @@
-import React from 'react';
-import './Banner.scss';
+import React from "react"
+import "./Banner.scss"
 
 export default function BannerLis({ data }) {
-    const title = data?.title;
-    const image = data?.Card[0]?.icon?.url;
-
-    const cards = data?.Card.map((item) => {
-        return (
-            <div className="card_item d-flex mb-4">
-                <div className="card_item col-3 mt-3 mt-xl-1">
-                    <img
-                        class="mx-auto d-block"
-                        src={image}
-                        placeholder="blurred"
-                    />
-                </div>
-                <div className="card_item col-9 ps-2 pe-2">
-                    <h4>{item.title}</h4>
-                    <p>{item.description}</p>
-                </div>
-            </div>
-        )
-
-    })
+  const title = data?.title
+  const image = data?.Card[0]?.icon?.url
 
+  const cards = data?.Card.map(item => {
     return (
-        <div className="container my-3 py-3">
-            <div className="bannerList d-md-flex flex-row-reverse">
-            <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center ps-4 mb-4">{title}</h1>
-            <div className="bannerList__cards col-md-6 col-xl-6 pe-5">{cards}</div>
+      <div className="card_item d-flex mb-4">
+        <div className="card_item col-3 mt-3 mt-xl-1">
+          <img class="mx-auto d-block" src={image} placeholder="blurred" />
         </div>
+        <div className="card_item col-9 ps-2 pe-2">
+          <h4>{item.title}</h4>
+          <p>{item.description}</p>
         </div>
-
-
+      </div>
     )
+  })
+
+  return (
+    <div
+      className="container my-3 py-3"
+      id={data.strapi_component + "-" + data.id}
+    >
+      <div className="bannerList d-md-flex flex-row-reverse">
+        <h1 className="bannerList__title col-md-6 col-xl-6 align-self-center ps-4 mb-4">
+          {title}
+        </h1>
+        <div className="bannerList__cards col-md-6 col-xl-6 pe-5">{cards}</div>
+      </div>
+    </div>
+  )
 }

src/components/CasesSection/CasesSection.js

@@ -8,7 +8,7 @@ const CasesSection = ({ data }) => {
   const casesCards = cases.map((caso, idx) => {
 
     return (
-      <div className="case col-12 col-md-4 row" key={`case-${idx}`}>
+      <div className="case col-12 col-md-4 row" key={`case-${idx}`} id={data.strapi_component + "-" + data.id}>
         <div className="col-6 col-md-12">
           <img className="case__img" src={caso.image?.url} alt="A kitten" />
         </div>

src/components/DualSection/DualSection.js

@@ -5,7 +5,7 @@ export default function DualSection({ data }) {
     const dualSectionParts = data?.dualSectionPart
 
     const listSectionParts = dualSectionParts.map((section) =>
-        <div className="dualSection p-4">
+        <div className="dualSection p-4" >
             <div className="dualSection__image">
                 <img
                     src={section.image.url}
@@ -16,16 +16,16 @@ export default function DualSection({ data }) {
             <div className="dualSection__textContainer">
                 <h4>{section.title}</h4>
                 <p>{section.description}</p>
-                <a href={section.button.url} target="_blank" rel="noreferrer" >
-                    <button className="px-4">{section.button.content}</button>
+                <a href={section.button?.url} target="_blank" rel="noreferrer" >
+                    <button className="px-4">{section.button?.content}</button>
                 </a>
             </div>
 
         </div>
     );
 
     return (
-        <div className="container my-3 py-3">
+        <div className="container my-3 py-3" id={data.strapi_component + "-" + data.id}>
         <div className="d-flex flex-column flex-md-row">
             {listSectionParts}
         </div>        

src/components/Hero/Hero.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import './Hero.scss';
+import React from "react"
+import "./Hero.scss"
 
 export default function Hero({ data }) {
     const title = data.title;
@@ -20,7 +20,7 @@ export default function Hero({ data }) {
 
     return (
         <>
-            <div className="hero">
+            <div className="hero" id={data.strapi_component + "-" + data.id}>
                 <div className="hero d-flex flex-column flex-xl-row-reverse justify-content-around">
                     <div className="hero__image col-xl-7">
                         <img

src/components/HomePage/HomeContainer/HomeContainer.js

@@ -22,13 +22,13 @@ const bodyComponents = {
   "home.dual-section": data => <DualSection data={data} />,
 }
 
-const Home = () => {
+const Home = ({ location }) => {
   const data = useHomePage()
   const { pageTitle, pageDescription, pageKeywords } =
     data?.allStrapiHome?.nodes[0]?.pageMetadata || {}
 
   return (
-    <Layout>
+    <Layout location={location}>
       {data?.allStrapiHome?.nodes[0]?.pageMetadata && (
         <Seo
           title={pageTitle}

src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js

@@ -8,13 +8,14 @@ import Dropdown from "./DropdownContainer/Dropdown"
 const getComponentTitle = component => {
   // falta definir los titulos para cada componente y arreglar los vinculos internos
   const titleReference = {
-    "home.hero": () => "Bitlogic",
-    "components.banner-list": () => "Dual section",
-    "components.selected-grid": () => "Selected grid",
-    "components.cases-section": () => " Cases section",
-    "home.quote": () => "Quote",
-    "home.video-background": () => "Video background",
-    "home.dual-section": () => "Dual section",
+    "home.hero": () => component.title,
+    "components.banner-list": () => component.title,
+    "components.selected-grid": () => component.title,
+    "components.cases-section": () => component.title,
+    "home.quote": () => component.title,
+    "home.video-background": () => component.title,
+    "home.dual-section": () =>
+      component.dualSectionPart.map(section => section.title).join(" - "),
   }
   return (
     (titleReference[component.strapi_component] &&
@@ -41,7 +42,7 @@ const AnimatedNavbar = ({
             )
             .map(component => ({
               name: getComponentTitle(component),
-              href: "#" + component.strapi_component + "-" + component.id,
+              id: component.strapi_component + "-" + component.id,
             }))}
         />
       ),
@@ -57,13 +58,8 @@ const AnimatedNavbar = ({
                 .find(landing => landing.name === navItem.landing.name)
                 .body.map(component => ({
                   name: getComponentTitle(component),
-                  href:
-                    "/" +
-                    navItem.landing.slug +
-                    "#" +
-                    component.strapi_component +
-                    "-" +
-                    component.id,
+                  id: component.strapi_component + "-" + component.id,
+                  slug: navItem.landing.slug,
                 }))}
             />
           ),
@@ -72,10 +68,15 @@ const AnimatedNavbar = ({
         return {
           title: navItem.label,
           slug: navItem.url,
-          dropdown: () => <Dropdown sections={[]} />,
+          dropdown: () => <Dropdown sections={null} />,
         }
       }
     }),
+    {
+      title: "Blog",
+      slug: "blog",
+      dropdown: () => <Dropdown sections={null} />,
+    },
   ]
 
   const [activeIndex, setActiveIndex] = useState([])

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

@@ -1,15 +1,22 @@
+import { Link } from "gatsby"
 import React from "react"
 import "./dropdown.scss"
 
 const Dropdown = ({ sections }) => {
   return (
-    <div className="dropdown_elem">
+    <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">
-                <a href={section.href}>{section.name}</a>
+                <Link
+                  to={"/" + (section.slug || "")}
+                  state={{ component: section.id }}
+                  className="dropdown_elem-link-inner"
+                >
+                  {section.name}
+                </Link>
               </p>
             ))}
         </ul>
@@ -18,6 +25,4 @@ const Dropdown = ({ sections }) => {
   )
 }
 
-
-
 export default Dropdown

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

@@ -4,13 +4,15 @@
     &-section {
       padding: 28px;
       position: relative;
-      z-index: 1;
+      z-index: 10;
     }
     &-link {
-      text-transform: uppercase;
       font-size: 18px;
       margin-top: 0;
       margin-bottom: 1rem;
+      &-inner{
+        color: black;
+      }
     }
   }
 }

src/components/NavBar/AnimatedNavBar/Navbar/NavbarItem.js

@@ -12,7 +12,13 @@ const NavbarItem = ({ title, children, index, to, ...props }) => {
       onMouseEnter={onMouseEnter}
       onFocus={onMouseEnter}
     >
-      <Link activeClassName="navbar_item-title-active" to={to} className="navbar_item-title">{title}</Link>
+      <Link
+        activeClassName="navbar_item-title-active"
+        to={to}
+        className="navbar_item-title"
+      >
+        {title}
+      </Link>
       <div className="navbar_item-dropdown_container">{children}</div>
     </li>
   )

src/components/animatedTransitionContinous/AnimatedTransitionContinous.js

@@ -1,11 +1,11 @@
-import React from "react";
-import "./animatedTransitionContinous.scss";
+import React from "react"
+import "./animatedTransitionContinous.scss"
 
 const AnimatedTransitionContinous = ({ children }) => {
-  let longerText = "";
+  let longerText = ""
 
   while (longerText.length < 200) {
-    longerText = children + "  -  " + longerText;
+    longerText = children + "  -  " + longerText
   }
 
   return (
@@ -16,7 +16,7 @@ const AnimatedTransitionContinous = ({ children }) => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default AnimatedTransitionContinous;
+export default AnimatedTransitionContinous

src/components/expandGrid/ExpandGrid.js

@@ -5,7 +5,7 @@ import "./expandGrid.scss"
 
 const ExpandGrid = ({ data }) => {
   return (
-    <div className="m-3 mx-5 sm:mx-3 py-5">
+    <div className="m-3 mx-5 sm:mx-3 py-5" id={data.strapi_component + "-" + data.id}>
       <section className="expandGrid">
         <div className="expandGrid-body">
           <h2>{data.title}</h2>

src/components/layout.js

@@ -6,7 +6,7 @@ import ScriptTag from "react-script-tag"
 import useGlobalConfig from "../hooks/useGlobalConfig"
 import ThemeProvider from "../context/themeContext"
 
-const Layout = ({ children, options = {} }) => {
+const Layout = ({ children, options = {}, location }) => {
   const defaultOptions = {
     hasHeader: true,
     hasFooter: true,
@@ -29,6 +29,22 @@ const Layout = ({ children, options = {} }) => {
       ) : null
     )
   )
+
+  React.useEffect(() => {
+    const hash = location?.state?.component
+    console.log(hash)
+    let el = hash && document.getElementById(hash)
+    console.log(el)
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth" })
+    }
+    // setTimeout(()=> {
+    //   el = hash && document.getElementById(hash)
+    //   console.log(el)
+    // }, 300)
+
+  }, [location?.state?.component])
+
   return (
     <ThemeProvider>
       {scripts}

src/components/quote/Quote.js

@@ -2,9 +2,9 @@ import "./quote.scss"
 
 import React from "react"
 
-const Quote = ({ data: { description, title, variant, profile, image } }) => {
+const Quote = ({ data: { description, title, variant, profile, image, strapi_component, id } }) => {
   return (
-    <div className="container my-3">
+    <div className="container my-3" id={strapi_component + "-" + id}>
       <section className={`quote variant-${variant}`}>
       <div className="quote-body">
         <img