Moved external links to top of sidebar

pages/config.js

@@ -41,7 +41,7 @@ const config = {
     ],
     links: [
       { text: "Energenious", link: "https://energenious.eu" },
-      { text: "Live Examples", link: `${pathPrefix}/storybook` }
+      { text: "Examples (Storybook)", link: `${pathPrefix}/storybook` }
     ],
     frontline: false,
     ignoreIndex: false,

pages/src/components/mdxComponents/anchor.js

-import * as React from 'react';
+import * as React from "react";
 
 const AnchorTag = ({ children: link, ...props }) => {
   if (link) {
-    return (
-      <a href={props.href} target="_blank" rel="noopener noreferrer">
-        {link}
-      </a>
-    );
+    return <a href={props.href}>{link}</a>;
   } else {
     return null;
   }

pages/src/components/sidebar/index.js

-import React from 'react';
-import Tree from './tree';
-import { StaticQuery, graphql } from 'gatsby';
-import styled from '@emotion/styled';
-import { ExternalLink } from 'react-feather';
-import config from '../../../config';
+import React from "react";
+import Tree from "./tree";
+import { StaticQuery, graphql } from "gatsby";
+import styled from "@emotion/styled";
+import { ExternalLink } from "react-feather";
+import config from "../../../config";
 
 // eslint-disable-next-line no-unused-vars
 const ListItem = styled(({ className, active, level, ...props }) => {
@@ -45,7 +45,7 @@ const ListItem = styled(({ className, active, level, ...props }) => {
   }
 `;
 
-const Sidebar = styled('aside')`
+const Sidebar = styled("aside")`
   width: 100%;
   height: 100vh;
   overflow: auto;
@@ -111,15 +111,13 @@ const SidebarLayout = ({ location }) => (
         <Sidebar>
           {config.sidebar.title ? (
             <div
-              className={'sidebarTitle hiddenMobile'}
+              className={"sidebarTitle hiddenMobile"}
               dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
             />
           ) : null}
-          <ul className={'sideBarUL'}>
-            <Tree edges={allMdx.edges} />
-            {config.sidebar.links && config.sidebar.links.length > 0 && <Divider />}
+          <ul className={"sideBarUL"}>
             {config.sidebar.links.map((link, key) => {
-              if (link.link !== '' && link.text !== '') {
+              if (link.link !== "" && link.text !== "") {
                 return (
                   <ListItem key={key} to={link.link}>
                     {link.text}
@@ -128,6 +126,10 @@ const SidebarLayout = ({ location }) => (
                 );
               }
             })}
+            {config.sidebar.links && config.sidebar.links.length > 0 && (
+              <Divider />
+            )}
+            <Tree edges={allMdx.edges} />
           </ul>
         </Sidebar>
       );