From 2baae59588aec22d658d903022975df93f1b8845 Mon Sep 17 00:00:00 2001
From: olayway <ola@yway.pl>
Date: Tue, 24 May 2022 00:00:32 +0200
Subject: [PATCH] [components/layout,MDX]: prep layout for TOCs

---
 site/components/Layout.js |  8 +++-----
 site/components/MDX.js    | 42 ++++++++++++---------------------------
 2 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/site/components/Layout.js b/site/components/Layout.js
index 4b60c0e..f4b115f 100644
--- a/site/components/Layout.js
+++ b/site/components/Layout.js
@@ -17,16 +17,14 @@ export default function Layout({ children }) {
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
       </Head>
       <Nav />
-      <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 border-2 border-green-500">
-        <div className="hidden lg:block w-[16rem] fixed top-16 left-[max(0px,calc(50%-40rem))] bottom-0 right-auto px-8 overflow-y-auto border-2 border-red-500">
+      <main className="max-w-7xl mx-auto px-2 sm:px-6 md:px-8 border-2 border-green-500">
+        <div className="hidden md:block w-[16rem] fixed top-16 left-[max(0px,calc(50%-40rem))] bottom-0 right-auto px-8 overflow-y-auto border-2 border-red-500">
           <Sidebar />
         </div>
-        <div className="lg:pl-[16rem]">
           {children}
-        </div>
       </main>
       <footer className="w-full h-24 mt-16">
-        <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 md:px-8">
           <nav className="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
             {navLinks.map((item) => (
               <div key={item.name} className="px-5 py-2">
diff --git a/site/components/MDX.js b/site/components/MDX.js
index dddd147..3828a8d 100644
--- a/site/components/MDX.js
+++ b/site/components/MDX.js
@@ -84,7 +84,7 @@ export default function MdxPage({ children }) {
           { name: "keywords", content: keywords ? keywords : "" }
         ]}
       />
-      <article className="prose max-w-none dark:prose-invert prose-a:break-all mx-auto p-6 xl:mr-50 xl:pr-10 border-2 border-yellow-500">
+      <article className="px-8 md:pl-[14rem] lg:pr-[14rem] prose max-w-none dark:prose-invert prose-a:break-all mx-auto border-2 border-yellow-500">
         <header>
           <div className="mb-6">
             {title && <h1 className="mb-0">{title}</h1>}
@@ -117,21 +117,6 @@ export default function MdxPage({ children }) {
         </header>
         <main>
           <div className="my-6">
-<<<<<<< HEAD
-          <Component components={components} />
-        </div>
-        {editUrl && (
-          <div className='mt-12 mb-6'>
-            <a className="flex no-underline font-semibold text-yellow-li" href={editUrl} target="_blank">
-              Edit this page
-              <span className="mx-1">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                </svg>
-              </span>
-            </a>
-          </div>)}
-=======
             <Component components={components} />
           </div>
           {editUrl && (
@@ -139,25 +124,24 @@ export default function MdxPage({ children }) {
               <a className="flex no-underline font-semibold text-yellow-li" href={editUrl} target="_blank">
                 Edit this page
                 <span className="mx-1">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                     <path strokeLinecap="round" strokeLinejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                   </svg>
                 </span>
               </a>
             </div>)}
->>>>>>> 34c9b77 ([components/sidebar][f]: layout ajd for sidebar)
         </main>
-        {/* <div className="hidden xl:block w-50 fixed inset-0 right-auto overflow-y-auto"> */}
-        {/*   <nav> */}
-        {/*     <ul> */}
-        {/*       <li>Heading 1</li> */}
-        {/*       <li>Heading 2</li> */}
-        {/*       <li>Heading 3</li> */}
-        {/*       <li>Heading 4</li> */}
-        {/*       <li>Heading 5</li> */}
-        {/*     </ul> */}
-        {/*   </nav> */}
-        {/* </div> */}
+        <div className="hidden lg:block w-[16rem] px-8 fixed top-16 right-[max(0px,50%-40rem)] bottom-0 overflow-y-auto border-2 border-blue-500">
+          <nav>
+            <ul>
+              <li>Heading 1</li>
+              <li>Heading 2</li>
+              <li>Heading 3</li>
+              <li>Heading 4</li>
+              <li>Heading 5</li>
+            </ul>
+          </nav>
+        </div>
       </article>
     </>
   );