added treeview dependency

src/components/Docs/Sidebar/index.tsx

@@ -1,5 +1,24 @@
 import React from "react";
+import { SidebarScroller } from "./style";
+import Tree from "react-treeview";
 
-const Sidebar = () => { }
+const makeTree = () => {
+
+}
+
+const Sidebar = () => {
+
+  return (
+    <Tree
+      nodeLabel={<div>"Javascript"</div>}
+    >
+      <Tree
+        nodeLabel={<div>"Javascript"</div>}
+      >
+        Test
+    </Tree>
+    </Tree>
+  )
+}
 
 export default Sidebar;

src/components/Docs/Sidebar/style.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const SidebarScroller = styled.div`
+  display: flex;
+  flex-direction: column;
+`

src/components/Docs/SidebarSection/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { SidebarTitle } from "./style";
+
+export interface SidebarSectionProps {
+  readonly title: string;
+}
+
+const SidebarSection = ({ title, children }: React.PropsWithChildren<SidebarSectionProps>) => {
+  return (
+    <div>
+      <SidebarTitle>{title}</SidebarTitle>
+      {children}
+    </div>
+  )
+}
+
+export default SidebarSection;

src/components/Docs/SidebarSection/style.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const SidebarTitle = styled.h3`
+  text-transform: uppercase;
+`;

src/templates/languagePost.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { graphql } from "gatsby";
 import SEO from "../components/SEO";
 import Layout from "../components/Layout";
+import { Sidebar } from "../components/Docs";
 
 // @todo maybe find alternative type for data
 const LanguagePost = ({ data }: any) => {
@@ -10,6 +11,7 @@ const LanguagePost = ({ data }: any) => {
   return (
     <Layout>
       <SEO title={frontmatter.title} />
+      <Sidebar />
       <div dangerouslySetInnerHTML={{ __html: html }} />
     </Layout >
   )