Add link to docs root to docs sidebar nav

lib/vars.js

@@ -5,7 +5,13 @@ const homeObj = {
   label: 'Home',
 };
 
+const docsObj = {
+  link: '/docs',
+  label: 'For Developers',
+};
+
 export {
   homeObj,
+  docsObj,
   mobileMedia,
 }

pages/docs/[[...slug]].js

@@ -9,6 +9,7 @@ import { useRouter } from 'next/router';
 import Layout from '../../components/layout';
 import { Icon } from '../../components/jambonz-ui';
 import { getData, getDocs, getDocsPaths } from '../../lib/data';
+import { docsObj } from '../../lib/vars';
 
 function Sidebar({data}) {
   const router = useRouter();
@@ -32,6 +33,13 @@ function Sidebar({data}) {
 
   return (
     <nav className="docs__navi">
+      <div className="docs__link">
+        <Link href={docsObj.link}>
+          <a className="m">
+            <strong>{docsObj.label}</strong>
+          </a>
+        </Link>
+      </div>
       <ul className="docs__list">
         {data.navi.map((item) => {
           const isActiveToggle = (active[item.path] ? true : false);

styles/pages/_docs.scss

@@ -59,6 +59,10 @@
     }
   }
 
+  &__link {
+    margin-bottom: 16px;
+  }
+
   &__item {
     + .docs__item {
       margin-top: 16px;
@@ -75,7 +79,7 @@
       height: 20px;
       stroke: $jambonz;
       margin-right: 8px;
-      transform: translateY(-2px);
+      transform: translateY(-2px) translateX(-2px);
     }
   }