chore(v2): make the site slightly more mobile friendly (#1402)

* chore(v2): make the site slightly more mobile friendly

* nits

* remove console.log

packages/docusaurus/lib/default-theme/Doc/index.js

@@ -16,12 +16,9 @@ import Sidebar from '@theme/Sidebar'; // eslint-disable-line
 
 import DocusaurusContext from '@docusaurus/context';
 
-import styles from './styles.module.css';
-
 function Doc(props) {
   const {siteConfig = {}} = useContext(DocusaurusContext);
   const {route, docsMetadata, location} = props;
-  console.log(props);
   const {baseUrl, favicon} = siteConfig;
   return (
     <Layout>
@@ -29,9 +26,11 @@ function Doc(props) {
         <title>{siteConfig.title}</title>
         {favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
       </Head>
-      <Sidebar docsMetadata={docsMetadata} location={location} />
+      <div className="row">
-      <div className={styles.mainContainer}>
+        <div className="col col--3">
-        <div className={styles.docContainer}>
+          <Sidebar docsMetadata={docsMetadata} location={location} />
+        </div>
+        <div className="col col--9" style={{padding: '0 3rem'}}>
           {renderRoutes(route.routes, {docsMetadata})}
         </div>
       </div>

packages/docusaurus/lib/default-theme/Doc/styles.module.css

@@ -1,15 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.mainContainer {
-  padding-left: 20rem;
-}
-
-.docContainer {
-  flex-grow: 1;
-  padding: 0 40px;
-}

packages/docusaurus/lib/default-theme/Sidebar/index.js

@@ -9,7 +9,7 @@ import React from 'react';
 
 import Link from '@docusaurus/Link';
 
-import styles from './styles.module.css';
+import './styles.css';
 
 function Sidebar(props) {
   const {docsMetadata, location} = props;
@@ -75,8 +75,8 @@ function Sidebar(props) {
   };
 
   return (
-    <div className={styles.sidebar}>
+    <div className="container margin-vert--lg">
-      <div className="menu">
+      <div className="menu menu--responsive sidebar">
         <ul className="menu__list">
           {thisSidebar.map(item => renderItem(item, {root: true}))}
         </ul>

packages/docusaurus/lib/default-theme/Sidebar/styles.css

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@media (min-width: 996px) {
+  .sidebar {
+    border-right: 1px solid #dadde1;
+    bottom: 0;
+    box-sizing: border-box;
+    padding: 2rem 0.25rem 2rem 2rem;
+    left: 0;
+    position: fixed;
+    overflow-x: hidden;
+    overflow-y: auto;
+    top: var(--ifm-navbar-height);
+    width: 20rem;
+  }
+}

packages/docusaurus/lib/default-theme/Sidebar/styles.module.css

@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.sidebar {
-  border-right: 1px solid #dadde1;
-  bottom: 0;
-  box-sizing: border-box;
-  padding: 2rem 0.25rem 2rem 2rem;
-  left: 0;
-  position: fixed;
-  overflow-x: hidden;
-  overflow-y: auto;
-  top: var(--ifm-navbar-height);
-  width: 20rem;
-}