SBIT-296: menu estructure integrated

src/components/Banner/Banner.js

@@ -37,8 +37,8 @@ const Banner = ({ data }) => {
     ) : (
       <a
         href={button.url}
-        target={button.url.startsWith('http') && '_blank'}
-        rel={button.url.startsWith('http') && 'noreferrer noopener'}
+        target={button.url?.startsWith('http') && '_blank'}
+        rel={button.url?.startsWith('http') && 'noreferrer noopener'}
         className="button"
       >
         {button.content}

src/components/ButtonLink/ButtonLink.js

@@ -13,8 +13,8 @@ const ButtonLink = ({ button }) => {
 
   return (
     <a href={button?.url}
-      target={button.url.startsWith('http') && "_blank"}
-      rel={button.url.startsWith('http') && "noreferrer noopener"}
+      target={button.url?.startsWith('http') && "_blank"}
+      rel={button.url?.startsWith('http') && "noreferrer noopener"}
     >
       {button.content}
     </a>)

src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js

@@ -4,39 +4,38 @@ import NavbarItem from "./Navbar/NavbarItem"
 import { Flipper } from "react-flip-toolkit"
 import DropdownContainer from "./DropdownContainer"
 import Dropdown from "./DropdownContainer/Dropdown"
+import { useLandingUrl } from "../../../hooks"
+
+const AnimatedNavbar = ({ navbarItems = [], duration }) => {
+
+  const getUrl = useLandingUrl()
+
+  const url = (item) => {
+    if (item.dropdown) return ''
+
+    const landing = getUrl(item?.landing_page?.slug);
+
+    if(landing) return landing
+
+    let slug = item?.url ? item.url : ''
+
+    return slug
+  }
 
-const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
   const navbarConfig = [
     ...navbarItems.map(navItem => {
-      let res 
-      if (navItem.singleType) {
-        res = {
-          title: navItem.label,
-          slug: navItem.singleType,
-          dropdown: () => <Dropdown sections={null} />,
-        }
-      } else if (navItem.landing) {
-        res = {
-          title: navItem.label,
-          slug: navItem.landing.slug,
-          dropdown: () =>
-            navItem.dropdown ? (
-              <Dropdown
-                sections={landingComponents
-                  .find(landing => landing.name === navItem.landing.name).body}
-                slug={navItem.landing.slug}
-              />
-            ) : (
-              <Dropdown sections={null} />
-            ),
-        }
-      } else if (navItem.url) {
-        res = {
-          title: navItem.label,
-          slug: navItem.url,
-          dropdown: () => <Dropdown sections={null} />,
-        }
+      let res = {
+        title: navItem.title,
+        slug: url(navItem),
+        dropdown: () => {
+          if(navItem.dropdown) {
+            return <Dropdown sections={navItem?.dropdownItems} topLevel={navItem?.toplevelItem} />
+          }
+          return <Dropdown sections={null} topLevel={null} />
+        },
+        isDropdown: navItem?.dropdown
       }
+
       return res
     }),
   ]
@@ -94,11 +93,12 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
         {navbarConfig.map((n, index) => {
           return (
             <NavbarItem
-              to={"/" + n?.slug}
+              to={n?.slug}
               key={n?.title}
               title={n?.title}
               index={index}
               onMouseEnter={onMouseEnter}
+              isDropdown={n?.isDropdown}
             >
               {currentIndex === index && (
                 <DropdownContainer
@@ -118,4 +118,4 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
   )
 }
 
-export default AnimatedNavbar
+export default AnimatedNavbar

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

@@ -1,46 +1,102 @@
 import { Link } from "gatsby"
 import React from "react"
 import "./dropdown.scss"
+import { useLandingUrl } from "../../../../hooks"
+import { GatsbyImage, getImage } from "gatsby-plugin-image"
+
+const Dropdown = ({ sections, topLevel }) => {
+
+  const getUrl = useLandingUrl()
+
+  const url = (item) => {
+    const landing = getUrl(item?.landing_page?.slug);
+
+    if (landing) return landing;
+
+    return item?.url ? item.url : '';
+  }
 
-const Dropdown = ({ sections, slug }) => {
   return (
     <div className="dropdown_elem" style={!sections ? { maxHeight: "0" } : {}}>
       <div className="dropdown_elem-section" data-first-dropdown-section>
-        <ul>
-          {sections &&
-            sections.map(section =>
-              (section.strapi_component === "components.selected-grid") ? (
-                section?.items.map(item =>(
-                  item.navTitle ? (
-                    <p className="dropdown_elem-link">
-                      <Link
-                        to={"/" + (item.landing_page.slug || "")}
-                        state={{ component: section.id }}
-                        className="dropdown_elem-link-inner"
-                      >
-                        {item.navTitle}
-                      </Link>
-                    </p>
-                  ) : ( null )
-                ))
+        {topLevel && (
+          <div className="dropdown_elem_topLevel"
+            style={{ borderBottom: "2px solid #808080", marginBottom: "15px", paddingBottom: "8px" }}>
+            <div className="dropdown_elem-link-topLevelLink">
+              {topLevel.icon && (
+                <GatsbyImage
+                  image={getImage(topLevel.icon?.localFile?.childrenImageSharp[0].gatsbyImageData)}
+                  alt={topLevel?.icon?.alternativeText
+                    ? topLevel.icon.alternativeText
+                    : 'NavLink Icon'
+                  }
+                  className="navbarItemIcon"
+                  width={28}
+                  height={28}
+                />
+              )}
+              {url(topLevel).startsWith("http") ? (
+                <a href={url(topLevel)}
+                  className="dropdown_elem-link-inner"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {topLevel.label}
+                </a>
               ) : (
-                section?.navTitle ? (
-                  <p className="dropdown_elem-link">
-                    <Link
-                      to={"/" + (slug || "")}
-                      state={{ component: section.strapi_component + '-' + section.id }}
-                      className="dropdown_elem-link-inner"
-                    >
-                      {section.navTitle}
-                    </Link>
-                  </p>
-                ) : null
-              )
-            )}
-        </ul>
+                <Link
+                  to={url(topLevel)}
+                  state={{ component: topLevel.id }}
+                  className="dropdown_elem-link-inner"
+                >
+                  {topLevel.label}
+                </Link>
+              )}
+            </div>
+            {topLevel?.text && <p className="navItemP">{topLevel.text}</p>}
+          </div>
+        )}
+        <div className="dropdown_section">
+          {sections?.map(section =>
+            <div>
+              <div className="dropdown_elem-link" key={section.id}>
+                {section.icon && (
+                  <GatsbyImage
+                    image={getImage(section.icon.localFile?.childrenImageSharp[0].gatsbyImageData)}
+                    alt={section.icon.alternativeText
+                      ? section.icon.alternativeText
+                      : 'NavLink Icon'
+                    }
+                    className="navbarItemIcon"
+                    width={28}
+                    height={28}
+                  />
+                )}
+                {url(section).startsWith("http") ? (
+                  <a href={url(section)}
+                    className="dropdown_elem-link-inner"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {section.label}
+                  </a>
+                ) : (
+                  <Link
+                    to={url(section)}
+                    state={{ component: section.id }}
+                    className="dropdown_elem-link-inner"
+                  >
+                    {section.label}
+                  </Link>
+                )}
+              </div>
+              {section?.text && <p className="navItemP">{section.text}</p>}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )
 }
 
-export default Dropdown
+export default Dropdown

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

@@ -2,16 +2,43 @@
 .dropdown {
   &_elem {
     width: 18.5rem;
+
     &-section {
-      padding: 28px;
+      padding-top: 28px;
+      padding-right: 28px;
+      padding-bottom: 14px;
+      padding-left: 28px;
       position: relative;
+
+      .dropdown_section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
     }
+
     &-link {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
       font-size: 18px;
-      margin-top: 0;
-      margin-bottom: 1rem;
-      &-inner{
+
+
+      &-inner {
         color: $primary;
+        padding: 8px 0;
+        font-weight: $standard;
+
+        &:hover {
+          text-decoration: underline solid $primary
+        }
+      }
+
+      &-topLevelLink {
+        padding-bottom: 0.1rem;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
       }
     }
   }
@@ -21,6 +48,27 @@
   will-change: transform;
 }
 
+.navItemP {
+  margin-left: 1.7rem;
+  font-size: 14px;
+  padding-bottom: 0.5rem;
+  color: $primary;
+}
+
+.navbarItemIcon {
+  width: 28px !important;
+  height: 28px !important;
+  align-self: center;
+  margin-right: 5px;
+
+  img,
+  picture {
+    width: 100%;
+    height: 100%;
+    object-fit: contain !important;
+  }
+}
+
 .fade_content {
   @extend .promote_layer;
   animation-duration: 300ms;

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

@@ -1,23 +1,25 @@
 import { Link } from "gatsby"
 import React from "react"
 import "./navbarItems.scss"
+import { FaAngleDown } from "react-icons/fa";
 
-const NavbarItem = ({ title, children, index, to, ...props }) => {
+const NavbarItem = ({ title, children, index, to, isDropdown, ...props }) => {
   const onMouseEnter = () => {
     props.onMouseEnter(index)
   }
   return (
-    <li
-      className="navbar_item"
-      onMouseEnter={onMouseEnter}
-      onFocus={onMouseEnter}
-    >
+    <li className="navbar_item">
       <Link
         activeClassName="navbar_item-title-active"
         to={to}
-        className="navbar_item-title"
+        className="navbar_item-title navbar_item-title-active"
+        onMouseEnter={onMouseEnter}
+        onFocus={onMouseEnter}
       >
         {title}
+        {isDropdown && (
+          <FaAngleDown />
+        )}
       </Link>
       <div className="navbar_item-dropdown_container">{children}</div>
     </li>