add social buttons in header instead of contact page

Author: dpatanin

gatsby-config.js

@@ -31,11 +31,6 @@ module.exports = {
       //   name: 'Scanner',
       //   link: '/scanner',
       // },
-      {
-        name: 'Contact',
-        // link: '/contact',
-        link: 'https://www.securecodebox.io/',
-      },
     ],
   },
 

src/components/Menu.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { graphql, StaticQuery, Link } from 'gatsby';
+import { node } from 'prop-types';
 
 const Menu = (props) => {
   const { menuLinks } = props.data.site.siteMetadata;
+  const json = props.data.allFeaturesJson.edges;
   return (
     <div id="main-menu" className="main-menu">
       <ul>
@@ -12,6 +14,11 @@ const Menu = (props) => {
            <a href={link.link} target="_blank">{link.name}</a>
           </li>
         ))}
+        {json.map(edge =>(
+          <li key={edge.node.title}>
+            <a href={edge.node.link} target="_blank"><img src={edge.node.image} /></a>
+          </li>
+        ))}
       </ul>
     </div>
   );
@@ -29,6 +36,17 @@ export default props => (
             }
           }
         }
+        allFeaturesJson (filter: {tag: {eq: "social"}}){
+          edges {
+            node {
+              id
+              title
+              link
+              image
+              tag
+            }
+          }
+        }
       }
     `}
     render={data => <Menu data={data} />}

src/data/features.json

@@ -22,5 +22,23 @@
     "description": "Our Scans can dig deeply into your Network",
     "image": "/features/firewall.svg",
     "tag": "provision"
+  },
+  {
+    "title": "Github",
+    "image": "/features/github logo.svg",
+    "link": "https://github.com/secureCodeBox",
+    "tag": "social"
+  },
+  {
+    "title": "Twitter",
+    "image": "/features/twitter logo white.svg",
+    "link": "https://twitter.com/securecodebox",
+    "tag": "social"
+  },
+  {
+    "title": "Slack",
+    "image": "/features/slack-new-logo.svg",
+    "link": "https://join.slack.com/t/securecodebox/shared_invite/enQtNDU3MTUyOTM0NTMwLTJiNzg3MmU2ZDY2NDFiMGI0Y2FkM2I5Mzc2ZmEzYTcyN2FlN2Y2NDFiZDE5NjAxMjg1M2IxNDViNzE3OTIxMGU",
+    "tag": "social"
   }
 ]

src/data/social.yaml

@@ -7,7 +7,6 @@
   }
   img {
     position: relative;
-    top: 9.72px;
     width: 100%;
     height: 100%;
   }
@@ -26,7 +25,6 @@
   }
   img {
     position: relative;
-    top: 9.72px;
     width: 100%;
     height: auto;
   }

src/scss/components/_logo.scss

@@ -35,6 +35,11 @@
           color: #fff;
           text-decoration: none;
         }
+        img {
+          position: relative;
+          width: 25px;
+          height: auto;
+        }
       }
     }
     > li.active {
@@ -48,6 +53,11 @@
           transition: all 225ms ease-in 0s;
           color: #fff;
         }
+        img {
+          position: relative;
+          width: 25px;
+          height: auto;
+        }
         span {
           display: block;
         }