Z2W

components/Banner.module.scss

@@ -13,7 +13,7 @@
   font-weight: bold;
   position: relative;
   top: 40vh;
-  margin-left: 85vw;
+  text-align: right;
   margin-right: 4vw;
   text-decoration: underline;
   text-underline-offset: 0.3em;

components/SideNav.scss

@@ -0,0 +1,28 @@
+.SideNav{
+  width: max-content;
+  height: max-content;
+  font-size: 1.1rem;
+  background-color: var(--clr-grey-850);
+  padding-right: 1em;
+  border-color:var(--clr-grey-100) ;
+  border-style: solid;
+  border-width: thin;
+  position: sticky;
+  top: 4.3em;
+  // 4.3 so the navigation box lines up under the navigation bar which is also sticky (I wasn't sure if there was a better way to line them up than using ems)
+  z-index: 1;
+
+
+  a:link{
+    color: var(--clr-grey-100);
+    font-weight: normal;
+  }
+  a:visited{
+    color: var(--clr-grey-100);
+    font-weight: normal;
+  }
+
+  a:hover{
+    border-bottom-style: solid;
+  }
+}

components/SideNav.tsx

@@ -0,0 +1,20 @@
+import React, { ReactPropTypes } from 'react';
+import styles from './SideNav.module.scss'
+
+type Props = {
+  list?: string 
+  link?: string
+}
+const ListArray = ({list}: Props) => [list]
+const LinkArray = ({link}: Props) => [link]
+
+const NavigationAnchor = ({list}: Props) => (
+  <div className= {styles.SideNav}>
+    <ul>
+      <li><a>{ListArray}</a></li>
+    </ul>
+  </div>
+)
+
+
+export default NavigationAnchor

pages/global.scss

@@ -44,6 +44,7 @@
   --clr-accent-500: hsl(32, 98%, 53%);
 
   --clr-grey-900: hsl(0, 0%, 7%);
+  --clr-grey-850: hsl(0, 0%, 14%);
   --clr-grey-800: hsl(0, 0%, 20%);
   --clr-grey-700: hsl(0, 0%, 41%);
   --clr-grey-200: hsl(0, 0%, 87%);

pages/resources.tsx

@@ -1,9 +1,18 @@
-import Layout from '../components/Layout';
+import Layout from '../components/Layout'
+import Banner from '../components/Banner';
+import Button from '../components/ButtonPrimary';
+import Card from '../components/Card'
+import SideNav from '../components/SideNav';
 
-const ResourcesPage = () => (
+const GuidesPage = () => (
   <Layout title="Home | Next.js + TypeScript Example">
-    <h1>Resources</h1>
+    <Banner>Resources</Banner>
+    <SideNav list = 'dsa'></SideNav>
+    <h1>Hehehaha</h1>
+    <Button>eat my</Button>
+    <Card heading='BLSS' link='View full guide'>Blss is a staple of Breath of the wild speedrunning allowing you to traverse large distances almost instantly</Card>
+    <Card heading='BLSS' link='View full guide'>Blss is a staple of Breath of the wild speedrunning allowing you to traverse large distances almost instantly</Card>
   </Layout>
 );
-
-export default ResourcesPage;
+  
+export default GuidesPage;