Merge pull request #42 from the-programmers-hangout/feat-add-menu-to-resources-sidebar

feat: add menu to resources sidebar

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 (
+    <SC.MenuItem to={to} activeClassName="active">
+      {children}
+    </SC.MenuItem>
+  )
+}
+
 export function ResourcesSidebar() {
   const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
   const tree = useBuildTree(resources)
@@ -120,6 +128,15 @@ export function ResourcesSidebar() {
       </Link>
       <SC.Inner>
         {tree.map((node, index) => plantTree(node, index, true))}
+
+        <SC.Menu>
+          <MenuItem to="/about">about</MenuItem>
+          <MenuItem to="/rules">rules</MenuItem>
+          <MenuItem to="/faq">faq</MenuItem>
+          <MenuItem to="/">hotbot</MenuItem>
+          <MenuItem to="/resources">resources</MenuItem>
+          <MenuItem to="/">tech</MenuItem>
+        </SC.Menu>
       </SC.Inner>
     </SC.ResourcesSidebarWrapper>
   )

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;
+  }
+`