From f2dceffc09c2b0ec9b6fca2450497c4332c20c2a Mon Sep 17 00:00:00 2001
From: Fienny Angelina <24544912+fiennyangeln@users.noreply.github.com>
Date: Sun, 9 Sep 2018 18:00:47 +0800
Subject: [PATCH] Fix nav to take full width in the docs page (#935)

* Fix nav to take full width in the docs page

Fix #911

* Remove using important in css

* Make Getting started flushed together with icon
---
 lib/core/DocsLayout.js  |  4 ++--
 lib/static/css/main.css | 26 +++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
index 7078eef068..3f47790a07 100644
--- a/lib/core/DocsLayout.js
+++ b/lib/core/DocsLayout.js
@@ -78,7 +78,7 @@ class DocsLayout extends React.Component {
         metadata={metadata}>
         <div className="docMainWrapper wrapper">
           <DocsSidebar metadata={metadata} />
-          <Container className="mainContainer">
+          <Container className="mainContainer docMainContainer">
             <DocComponent
               metadata={metadata}
               content={content}
@@ -133,7 +133,7 @@ class DocsLayout extends React.Component {
               )}
           </Container>
           {hasOnPageNav && (
-            <nav className="onPageNav">
+            <nav className="onPageNav docOnPageNav">
               <OnPageNav rawContent={content} />
             </nav>
           )}
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index a8ba446c46..ced1da8352 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1489,7 +1489,8 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .docMainWrapper {
-    width: 100%;
+    max-width:100% !important ;
+    margin: 0;
   }
 
   .docMainWrapper > * {
@@ -1588,7 +1589,9 @@ input::placeholder {
 
 @media only screen and (min-width: 1024px) {
   .docsNavContainer {
-    flex: 0 0 240px;
+    flex: 1 0 240px;
+    display: flex;
+    justify-content: flex-end;
     height: calc(100vh - 50px);
     position: -webkit-sticky;
     position: sticky;
@@ -1631,7 +1634,7 @@ input::placeholder {
   }
 
   .separateOnPageNav .docsNavContainer {
-    flex: 0 0 240px;
+    flex: 1 0 240px;
   }
 }
 
@@ -1976,6 +1979,11 @@ input::placeholder {
       width: auto;
     }
 
+    .docsNavContainer > :first-child {
+      width: 240px;
+      max-width: 240px;
+    }
+
     .separateOnPageNav.sideNavVisible .navPusher .mainContainer {
       flex: 1 auto;
       max-width: 100%;
@@ -1993,6 +2001,10 @@ input::placeholder {
       top: 90px;
     }
 
+    .docOnPageNav {
+      flex: 1 0 240px;
+    }
+
     .onPageNav > .toc-headings {
       border-left: 1px solid #e0e0e0;
       padding: 10px 0 2px 15px;
@@ -2004,6 +2016,14 @@ input::placeholder {
   }
 }
 
+
+@media only screen and (min-width: 1024px) {
+  .separateOnPageNav.sideNavVisible .navPusher .docMainContainer {
+    flex-basis: 784px;
+    flex-grow: 0;
+  }
+}
+
 /* Blog */
 .blog .wrapper {
   max-width: 1100px;