bitlogic · marino-martin · Apr 1, 2022 · Apr 1, 2022 · Apr 1, 2022
diff --git a/public/page-data/index/page-data.json b/public/page-data/index/page-data.json
@@ -2,4 +2,4 @@
     "componentChunkName": "component---src-pages-index-js",
     "path": "/",
     "result": {"pageContext":{}},
-    "staticQueryHashes": ["1128713364","1693928026","176670904","2898073905","3206133181","3298386516","4006044966"]}
+    "staticQueryHashes": ["1128713364","1693928026","176670904","1886264361","2898073905","3206133181","4006044966"]}
diff --git a/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js b/src/components/NavBar/AnimatedNavBar/AnimatedNavbar.js
@@ -27,7 +27,13 @@ const getComponentTitle = component => {
 const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
   const navbarConfig = [
     ...navbarItems.map(navItem => {
-      if (navItem.landing) {
+      if (navItem.singleType) {
+        return {
+          title: navItem.label,
+          slug: navItem.singleType,
+          dropdown: () => <Dropdown sections={null} />,
+        }
+      } else if (navItem.landing) {
         return {
           title: navItem.label,
           slug: navItem.landing.slug,
@@ -42,7 +48,9 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
                     slug: navItem.landing.slug,
                   }))}
               />
-            ) : null,
+            ) : (
+              <Dropdown sections={null} />
+            ),
         }
       } else if (navItem.url) {
         return {
@@ -52,11 +60,6 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
         }
       }
     }),
-    {
-      title: "Blog",
-      slug: "blog",
-      dropdown: () => <Dropdown sections={null} />,
-    },
   ]
 
   const [activeIndex, setActiveIndex] = useState([])
@@ -112,9 +115,9 @@ const AnimatedNavbar = ({ landingComponents, navbarItems = [], duration }) => {
         {navbarConfig.map((n, index) => {
           return (
             <NavbarItem
-              to={"/" + n.slug}
-              key={n.title}
-              title={n.title}
+              to={"/" + n?.slug}
+              key={n?.title}
+              title={n?.title}
               index={index}
               onMouseEnter={onMouseEnter}
             >

diff --git a/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss b/src/components/NavBar/AnimatedNavBar/Navbar/navbarItems.scss
@@ -1,3 +1,5 @@
+@import "../../../../styles/global.scss";
+
 .navbar {
   &-el {
     margin: auto;
@@ -7,6 +9,13 @@
     justify-content: center;
     list-style: none;
     margin: 0;
+    @media screen and (max-width: $breakpoint-xl) {
+      flex-direction: column;
+      justify-content: baseline;
+      a {
+        padding: 0.5em;
+      }
+    }
   }
   &_item {
     position: relative;
@@ -15,9 +24,14 @@
       border: 0;
       font-size: 18px;
       padding: 2rem 1.5rem 1.2rem 1.5rem;
-      color: #1F1D37;
+      color: #1f1d37;
       display: flex;
-      justify-content: center;
+      justify-content: baseline;
+      @media screen and (max-width: $breakpoint-xl) {
+        justify-content: baseline;
+        margin-left: 40px;
+        font-size: 1.4em;
+      }
       transition: opacity 250ms;
       cursor: pointer;
       /* position above the dropdown, otherwise the dropdown will cover up the bottom sliver of the buttons */

diff --git a/src/components/NavBar/NavBar.scss b/src/components/NavBar/NavBar.scss
@@ -3,6 +3,9 @@
 .NavBar {
   background-color: white;
   z-index: 10;
+  & > a {
+    margin: 1.5em 0 1em 50px;
+  }
 }
 .NavBar__Logo {
   margin: 16px 28px;
@@ -26,7 +29,7 @@
 .NavBar__Link {
   text-decoration: none;
   text-transform: uppercase;
-  color: #1F1D37;
+  color: #1f1d37;
   font-size: 14px;
   font-style: normal;
   font-weight: 700;
@@ -36,44 +39,55 @@
 }
 .NavBar__Link:hover {
   text-decoration: none;
-  color: #3f6BE8;
+  color: #3f6be8;
 }
 
-.NavBar__Link--active {
+.navbar_item-title-active {
   text-decoration: none;
-  color: #3f6BE8;
+  color: #3f6be8 !important;
 }
 
-.NavBar_Side{
+.NavBar_Side {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-around;
   &-contact {
     white-space: nowrap;
     box-shadow: 0px 2px 10px #3f6be880;
-    padding: .6em;
-    background-color: #3F6BE8;
+    padding: 0.6em;
+    background-color: #3f6be8;
     color: white;
-    border: 1px solid #3F6BE8;
+    border: 1px solid #3f6be8;
     border-radius: 4px;
-    &:hover{
+    &:hover {
       background-color: white;
-      color: #3F6BE8;
+      color: #3f6be8;
     }
   }
   p {
-    color: #1F1D37;
-    margin: 0 3em;
+    color: #1f1d37;
+    margin: 0 2em 0 2.5em;
+  }
+  @media screen and (max-width: $breakpoint-xl) {
+    margin-left: 40px;
+    font-size: 1.4em;
+    &-contact {
+      font-size: 0.9em;
+    }
+    p {
+      font-size: 1em;
+      margin: 0 2em;
+    }
   }
 }
 
-@media screen and (min-width: 992px) {
-  .NavBar{
+@media screen and (min-width: $breakpoint-xl) {
+  .NavBar {
     display: flex;
     flex-direction: row;
     & > a {
-      flex-basis: 20%;
+      flex-grow: 0;
+      margin-left: 2em;
     }
   }
   .NavBar__Logo {
@@ -82,26 +96,25 @@
   }
   .NavBar__Collapse {
     /* DESKTOP */
-    justify-content: space-around;
     align-items: center;
+    .NavBar_links {
+      flex-grow: 1;
+    }
   }
   .NavBar__List {
     margin-top: 0rem;
   }
   .NavBar__Item {
     margin-right: 2.5rem;
-    margin-top: .5em;
+    margin-top: 0.5em;
     white-space: nowrap;
   }
-  .NavBar_Side{
-    justify-content: unset;
+  .NavBar_Side {
+    margin-right: 1em;
   }
-
 }
 
-
-
-.theme-toggle{
+.theme-toggle {
   background: none;
   border: none;
   height: 54px;
@@ -111,4 +124,4 @@
     color: white;
     margin: 0 0 3px 0;
   }
-}
+}
diff --git a/src/components/NavBar/Navbar.js b/src/components/NavBar/Navbar.js
@@ -3,27 +3,31 @@ import "./NavBar.scss"
 import { Link } from "gatsby"
 import Navbar from "react-bootstrap/Navbar"
 import AnimatedNavbar from "./AnimatedNavBar/AnimatedNavbar"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
 
 import { useNavbar } from "../../hooks/index"
 
-// default logo
-import logoLight from "../../images/tipologo-azul.png"
-
 import { useTheme } from "../../context/themeContext"
 // theme images
 import moon from "../../images/moon-solid.svg"
 import sun from "../../images/sun.svg"
 const NavBar = () => {
   const { theme, toggleTheme } = useTheme()
   const navbarData = useNavbar()
+
+  const logoLight = getImage(
+    navbarData.allStrapiLayout?.nodes[0].navbar?.logo?.localFile
+  )
+  const logoDark = getImage(
+    navbarData.allStrapiLayout?.nodes[0].navbar?.logoDark?.localFile
+  )
   return (
     <>
       <Navbar variant="dark" expand="xl" className="NavBar">
         <Link to="/">
-          <img
-            src={logoLight}
-            alt="Logo Bitlogic"
-            className="d-inline-block align-top NavBar__Logo"
+          <GatsbyImage
+            image={theme === "dark" && logoDark ? logoDark : logoLight}
+            alt={"bitlogic"}
           />
         </Link>
         <Navbar.Toggle
@@ -33,14 +37,16 @@ const NavBar = () => {
         <Navbar.Collapse id="basic-navbar-nav" className="NavBar__Collapse">
           {/* Menu Links */}
           {navbarData && (
-            <AnimatedNavbar
-              homeComponents={navbarData.allStrapiHome?.nodes[0].body}
-              landingComponents={navbarData.allStrapiLandingPage?.nodes}
-              navbarItems={
-                navbarData.allStrapiLayout?.nodes[0].navbar?.navbarItem
-              }
-              duration={300}
-            />
+            <div className="NavBar_links">
+              <AnimatedNavbar
+                homeComponents={navbarData.allStrapiHome?.nodes[0].body}
+                landingComponents={navbarData.allStrapiLandingPage?.nodes}
+                navbarItems={
+                  navbarData.allStrapiLayout?.nodes[0].navbar?.navbarItem
+                }
+                duration={300}
+              />
+            </div>
           )}
           <div className="NavBar_Side">
             <button className="NavBar_Side-contact">Let´s Talk</button>

diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
@@ -64,7 +64,7 @@ const ExpandedListItem = ({ index, onClick, data, scrollToRef }) => {
       <div
         ref={scrollRef}
         className="listItem-expanded"
-        onClick={el => {
+        onClick={_el => {
           onClick(index)
         }}
       >

diff --git a/src/hooks/useNavbar.js b/src/hooks/useNavbar.js
@@ -9,6 +9,7 @@ const useNavbar = () => {
             navbarItem {
               url
               label
+              singleType
               landing {
                 slug
                 name
@@ -23,6 +24,13 @@ const useNavbar = () => {
                 }
               }
             }
+            logoDark {
+              localFile {
+                childImageSharp {
+                  gatsbyImageData
+                }
+              }
+            }
           }
         }
       }

diff --git a/src/schema/layoutSchema.js b/src/schema/layoutSchema.js
@@ -14,7 +14,8 @@ type StrapiLayoutFooter {
   type StrapiLayoutNavbar {
     id: Int
     navbarItem: [StrapiLayoutNavbarNavbarItem]
-    logo: StrapiLayoutNavbarLogo
+    logo: LocalFile
+    logoDark: LocalFile
   }
 
   type StrapiLayoutNavbarNavbarItem {
@@ -24,6 +25,7 @@ type StrapiLayoutFooter {
     url: String
     visible: Boolean
     dropdown: Boolean
+    singleType: String
   }
 
   type StrapiLayoutNavbarNavbarItemLanding {