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))} + + + about + rules + faq + hotbot + resources + tech + ) 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; + } +`