text: import styled from '@emotion/styled';
  import { graphql, StaticQuery } from 'gatsby';
  import React from 'react';
  import { ExternalLink } from 'react-feather';
  import config from '../../../config';
  import Tree from './tree';
  
  // eslint-disable-next-line no-unused-vars
  const ListItem = styled(({ className, active, level, target, ...props }) => {
    return (
      <li className={className}>
        <a href={props.to} {...props} target={target || '_blank'} rel="noopener noreferrer">
          {props.children}
        </a>
      </li>
    );
  })`
    list-style: none;
  
    .responsive a {
      color: pink;
    }
  
    a {
      color: #5c6975;
      text-decoration: none;
      font-weight: ${({ level }) => (level === 0 ? 700 : 400)};
      padding: 0.45rem 0 0.45rem ${props => 2 + (props.level || 0) * 1}rem;
      display: block;
      position: relative;
  
      &:hover {
        color: #1ed3c6 !important;
      }
  
      ${props =>
        props.active &&
        `
        // color: #663399;
        border-color: rgb(230,236,241) !important;
        border-style: solid none solid solid;
        border-width: 1px 0px 1px 1px;
        background-color: #fff;
      `} // external link icon
      svg {
        float: right;
        margin-right: 1rem;
      }
    }
  `;
  
  const Sidebar = styled('aside')`
    width: 100%;
    height: 100vh;
    overflow: auto;
    position: fixed;
    padding-left: 0px;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: sticky;
    top: 0;
    padding-right: 0;
    -webkit-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);
  
    @media only screen and (max-width: 1023px) {
      width: 100%;
      /* position: relative; */
      height: 100vh;
    }
  
    @media (min-width: 767px) and (max-width: 1023px) {
      padding-left: 0;
    }
  
    @media only screen and (max-width: 767px) {
      padding-left: 0px;
      height: auto;
    }
  `;
  
  const Divider = styled(props => (
    <li {...props}>
      <hr />
    </li>
  ))`
    list-style: none;
    padding: 0.5rem 0;
  
    hr {
      margin: 0;
      padding: 0;
      border: 0;
      border-bottom: 1px solid #ede7f3;
    }
  `;
  
  const SidebarLayout = ({ location }) => (
    <StaticQuery
      query={graphql`
        query {
          allMdx {
            edges {
              node {
                fields {
                  slug
                  title
                }
              }
            }
          }
          allJavascriptFrontmatter(sort: { fields: frontmatter___order }) {
            edges {
              node {
                frontmatter {
                  linkText
                  slug
                }
              }
            }
          }
        }
      `}
      render={({ allMdx, allJavascriptFrontmatter }) => {
        return (
          <Sidebar>
            <ul className={'sideBarUL'}>
              <Tree edges={allMdx.edges} />
              {config.sidebar.links && config.sidebar.links.length > 0 && <Divider />}
              {allJavascriptFrontmatter.edges.map(({ node: { frontmatter } }) => {
                if (frontmatter.slug && frontmatter.linkText) {
                  return (
                    <ListItem key={frontmatter.slug} to={`/${frontmatter.slug}/`} target="_self">
                      {frontmatter.linkText}
                    </ListItem>
                  );
                }
              })}
              {config.sidebar.links.map((link, key) => {
                if (link.link !== '' && link.text !== '') {
                  return (
                    <ListItem key={key} to={link.link}>
                      {link.text}
                      <ExternalLink size={14} />
                    </ListItem>
                  );
                }
              })}
            </ul>
          </Sidebar>
        );
      }}
    />
  );
  
  export default SidebarLayout;
  