link to getStarted page & cleaner menu style

Author: dpatanin

gatsby-config.js

@@ -14,20 +14,11 @@ module.exports = {
       phone: '+49 89 614551-0',
       email: 'security@iteratec.com',
     },
-    // TODO: replace links with actual pages here and link the correct reference in Menu.js
     menuLinks: [
       {
         name: 'Get Started',
-        external: true,
-        // link: '/getStarted',
-        link: 'https://github.com/secureCodeBox/secureCodeBox-v2-alpha',
-      },
-      {
-        name: 'Docs',
-        external: true,
-        // link: '/docs',
-        link:
-          'https://github.com/secureCodeBox/secureCodeBox-v2-alpha/blob/master/docs/index.md',
+        external: false,
+        link: '/getStarted',
       },
       {
         name: 'Integrations',

src/components/Menu.js

@@ -8,18 +8,20 @@ const Menu = props => {
   return (
     <div id="main-menu" className="main-menu">
       <ul>
-        {menuLinks.map(link => (
+        {menuLinks.map((link) => (
           <li key={link.name}>
             {link.external ? (
               <a href={link.link} target="_blank" rel="noopener noreferrer">
                 {link.name}
               </a>
             ) : (
-              <Link to={link.link}>{link.name}</Link>
+              <Link activeClassName="active-Link" to={link.link}>
+                {link.name}
+              </Link>
             )}
           </li>
         ))}
-        {socialChannels.map(socialChannel => (
+        {socialChannels.map((socialChannel) => (
           <li key={socialChannel.title}>
             <a
               href={socialChannel.link}

src/scss/components/_header.scss

@@ -10,6 +10,7 @@
   align-items: center;
   .container {
     max-width: 4060px;
+    height: inherit;
     display: flex;
     justify-content: space-between;
     align-items: center;

src/scss/components/_main-menu.scss

@@ -12,6 +12,11 @@
     list-style: none;
     margin: 0;
     padding: 0;
+    .active-Link {
+      background: $highlight;
+      color: #fff;
+      text-decoration: none;
+    }
     > li {
       height: inherit;
       margin: 0;
@@ -28,7 +33,7 @@
         font-weight: 400;
         text-transform: uppercase;
         color: inherit;
-        padding: 10px 14px 10px 14px;
+        padding: 12px 14px 10px 14px;
         text-decoration: none;
         &:hover {
           background: $highlight;