feat: Add right rails on desktop

ORESoftware · Mar 15, 2019 · Apr 4, 2019 · Apr 4, 2019 · Apr 10, 2019 · Apr 10, 2019
commit 953823193cf7747919c3f3a8b759103fb7b8c3e0
diff --git a/src/components/article.tsx b/src/components/article.tsx
@@ -27,12 +27,10 @@ const Article = ({
     <article className="article-reader">
       <h1 className="article-reader__headline">{title}</h1>
       <TOC heading="TABLE OF CONTENTS" tableOfContents={tableOfContents} />
-      <div className="article-reader__inner">
-        <div dangerouslySetInnerHTML={{ __html: html }} />
-        <AuthorsList authors={authors} />
-        <EditLink relativePath={relativePath} />
-        <Pagination previous={previous} next={next} />
-      </div>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+      <AuthorsList authors={authors} />
+      <EditLink relativePath={relativePath} />
+      <Pagination previous={previous} next={next} />
     </article>
   );
 

diff --git a/src/components/layout.css b/src/components/layout.css
@@ -125,7 +125,7 @@ code[class*="language-"] {
 
 main {
   display: grid;
-  grid-template-columns: 420px auto;
+  grid-template-columns: 420px auto 400px;
 }
 
 .nav {
@@ -161,7 +161,7 @@ main {
 .hero {
   align-items: center;
   display: flex;
-  grid-column-end: 3;
+  grid-column-end: 4;
   grid-column-start: 1;
   height: var(--hero-height);
   position: sticky;
@@ -396,22 +396,53 @@ main {
   padding-left: 4.2rem;
 }
 
-.article-reader__inner{
-    max-width: 768px;
-    width: calc(100% - 36.0rem);
+.toc-desktop{
+  display : hidden;
+  overflow: hidden;
+  position: sticky;
+  top: 140px;
+  width: 100%;
+  z-index: 998;
+  padding: 0 2.4rem;
+  height: calc(100vh - var(--nav-height));
+}
+
+.toc-desktop__nav{
+  position: sticky;
+  top : 0;
+}
+.toc-desktop__nav ul {
+  text-align: left;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc-desktop__heading{
+  padding: 1.2rem;
+}
+
+.toc-desktop__nav a {
+  color: var(--gray9);
+  text-decoration: none;
+  display: block;
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  line-height: 2.4rem;
+  list-style: none;
+  padding: 1.2rem;
+  position: relative;
+  width: calc(100% - 4.8rem);
 }
 
 @media(min-width:1263px){
-  .article-reader{
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-  }
-  .article-reader__inner{
-    flex: 1;
-  }
   .toc{
-    width: 420px;
+    display : none;
+  }
+  .toc-desktop{
+    display : block;
   }
 }
 

diff --git a/src/components/toc-desktop.tsx b/src/components/toc-desktop.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+type Props = {
+    heading: string;
+    tableOfContents: string;
+};
+
+function TOCDesktop({ heading, tableOfContents }: Props) {
+    return (
+        <div className="toc-desktop">
+            <nav className="toc-desktop__nav">
+                <h6 className="toc-desktop__heading">{heading}</h6>
+                <div dangerouslySetInnerHTML={{ __html: tableOfContents }} />
+            </nav>
+        </div>
+    );
+}
+
+export default TOCDesktop;
diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx
@@ -5,6 +5,7 @@ import Hero from '../components/hero';
 import Layout from '../components/layout';
 import Navigation from '../components/navigation';
 import { LearnPageContext, LearnPageData } from '../types';
+import TOCDesktop from '../components/toc-desktop';
 
 type Props = {
   data: LearnPageData;
@@ -35,6 +36,7 @@ export default ({
         previous={previous}
         relativePath={relativePath}
       />
+      <TOCDesktop heading="TABLE OF CONTENTS" tableOfContents={tableOfContents} />
     </Layout>
   );
 };