diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx
index 2952178..5baea42 100644
--- a/src/components/ResourcesSidebar/index.tsx
+++ b/src/components/ResourcesSidebar/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, PropsWithChildren } from "react"
import { useStaticQuery, graphql, Link } from "gatsby"
import useBuildTree from "./useBuildTree"
import useSidebar from "./../../hooks/useSidebar"
@@ -109,6 +109,14 @@ function FirstLevelFolder({ item, index }: { item: IFolder; index: number }) {
)
}
+function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
+ return (
+
+ {children}
+
+ )
+}
+
export function ResourcesSidebar() {
const resources = useStaticQuery(ALL_RESOURCES)
const tree = useBuildTree(resources)
@@ -120,6 +128,15 @@ export function ResourcesSidebar() {
{tree.map((node, index) => plantTree(node, index, true))}
+
+
+
+
+
+
+
+
+
)
diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx
index 80b0fe2..8a3de9e 100644
--- a/src/components/ResourcesSidebar/styles.tsx
+++ b/src/components/ResourcesSidebar/styles.tsx
@@ -115,3 +115,27 @@ export const PageLink = styled(Link)`
font-weight: 700;
}
`
+
+export const Menu = styled.nav`
+ display: flex;
+ flex-direction: column;
+ border-top: 1px dashed #a5a5a5;
+ margin-top: 20px;
+ padding-top: 20px;
+`
+
+export const MenuItem = styled(Link)`
+ padding: 4px 0;
+ font-size: 20px;
+ color: #000;
+ text-decoration: none;
+
+ &:hover,
+ &:active {
+ text-decoration: underline;
+ }
+
+ &.active {
+ font-weight: 700;
+ }
+`