From 4fa4979aa439bfdde0a584edd998241f491946a1 Mon Sep 17 00:00:00 2001
From: gabrielelpidio <gabrieldeandradeleal@gmail.com>
Date: Sun, 18 Sep 2022 00:25:59 -0400
Subject: [PATCH] refactor(blog): rework blog ui and improve scrolling behavior

---
 www/src/components/blog/pageContent.astro     |  2 +-
 www/src/components/footer/footer.astro        |  4 ++--
 .../components/navigation/leftSidebar.astro   | 10 ++++----
 .../components/navigation/rightSidebar.astro  |  2 +-
 www/src/layouts/blog.astro                    | 24 +++++++++++--------
 www/src/styles/global.css                     |  3 +--
 6 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/www/src/components/blog/pageContent.astro b/www/src/components/blog/pageContent.astro
index b1870dc236..4ce8544f65 100644
--- a/www/src/components/blog/pageContent.astro
+++ b/www/src/components/blog/pageContent.astro
@@ -14,7 +14,7 @@ const { frontmatter, headings, githubEditUrl } = Astro.props;
 const title = frontmatter.title;
 ---
 
-<article id="article" class="flex flex-col h-full w-full">
+<article id="article" class="flex flex-col h-full w-full max-w-screen-lg">
   <section class="mb-16 w-full">
     <h1
       id="overview"
diff --git a/www/src/components/footer/footer.astro b/www/src/components/footer/footer.astro
index 8d940f5200..82d3fb72f6 100644
--- a/www/src/components/footer/footer.astro
+++ b/www/src/components/footer/footer.astro
@@ -20,9 +20,9 @@ const isLanding = path === "/";
   <div
     class="container px-6 mx-auto space-y-3 divide-y divide-gray-400 md:space-y-12 divide-opacity-50 pt-6"
   >
-    <div class="flex flex-col sm:flex-row items-center justify-between w-full">
+    <div class="flex flex-col items-center justify-between w-full">
       <div
-        class="pb-6 mb-6 sm:pb-0 sm:mb-0 border border-x-0 border-t-0 border-b-t3-purple-100 sm:border-0"
+        class="pb-6 mb-6 border border-x-0 border-t-0 border-b-t3-purple-100 sm:border-0"
       >
         <a
           rel="noopener noreferrer"
diff --git a/www/src/components/navigation/leftSidebar.astro b/www/src/components/navigation/leftSidebar.astro
index aa5067e6bf..0c66013be9 100644
--- a/www/src/components/navigation/leftSidebar.astro
+++ b/www/src/components/navigation/leftSidebar.astro
@@ -16,18 +16,18 @@ const sidebar = SIDEBAR[langCode];
 
 <nav
   aria-labelledby="grid-left"
-  class={clsx({
-    "pt-3 pb-28": isLanding,
-    "pb-32 md:overflow-hidden": !isLanding,
+  class={clsx("flex flex-col gap-4 h-full pb-4 px-2 md:h-auto", {
+    "pt-3 md:pb-28": isLanding,
+    "md:pb-32 md:overflow-hidden": !isLanding,
   })}
 >
-  <div class="w-full mx-auto px-8 md:hidden">
+  <div class="w-full mx-auto px-4 md:px-8 md:hidden shrink-0">
     <!-- Put Searchbar on Mobile Dropdown Navbar -->
     <Search client:idle />
   </div>
   <ul
     id="nav-groups"
-    class="p-8 h-full overflow-x-visible overflow-y-scroll t3-scrollbar sm:overflow-auto pb-32 dark:text-t3-purple-50 text-slate-900"
+    class="p-4 md:p-8 h-full overflow-x-visible overflow-y-scroll t3-scrollbar sm:overflow-auto pb-32 dark:text-t3-purple-50 text-slate-900"
   >
     {
       Object.entries(sidebar).map(([header, children]) => (
diff --git a/www/src/components/navigation/rightSidebar.astro b/www/src/components/navigation/rightSidebar.astro
index c800048fd0..5b4628709b 100644
--- a/www/src/components/navigation/rightSidebar.astro
+++ b/www/src/components/navigation/rightSidebar.astro
@@ -13,7 +13,7 @@ const { headings, githubEditUrl } = Astro.props;
 
 <nav
   aria-labelledby="grid-right"
-  class="hidden md:block max-w-sm w-full overflow-auto mt-8 pr-2"
+  class="hidden md:block max-w-sm w-full overflow-auto pt-8 pr-2"
 >
   <div class="hidden md:block">
     <TableOfContents client:media="(min-width: 768px)" headings={headings} />
diff --git a/www/src/layouts/blog.astro b/www/src/layouts/blog.astro
index e99bca3d68..1a239b5b55 100644
--- a/www/src/layouts/blog.astro
+++ b/www/src/layouts/blog.astro
@@ -1,5 +1,6 @@
 ---
 import type { MarkdownHeading } from "astro";
+import clsx from "clsx";
 import PageContent from "../components/blog/pageContent.astro";
 import Footer from "../components/footer/footer.astro";
 import HeadCommon from "../components/headCommon.astro";
@@ -20,6 +21,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const currentPage = Astro.url.pathname;
 const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
 const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
+const asideWidth = "72";
 ---
 
 <html
@@ -39,19 +41,18 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
     <div class="bg-base sticky top-0 w-full z-50">
       <Navbar />
     </div>
-    <main
-      class="bg-base justify-items-start xl:justify-items-center grid grid-cols-1 sm:grid-cols-6 md:grid-cols-12 relative gap-4 transition-colors"
-    >
+    <main>
       <aside
         id="grid-left"
         title="Site Navigation"
-        class="hidden sticky h-fit top-20 z-10 sm:w-screen md:w-full md:flex md:col-span-4 lg:col-span-3 xl:col-span-2 w-full transition-colors"
+        class={clsx(
+          "hidden fixed z-50 bg-base inset-0 top-20 t3-scrollbar overflow-hidden md:bottom-2 md:overflow-auto md:block md:w-72 ",
+          `w-${asideWidth}`,
+        )}
       >
         <LeftSidebar currentPage={currentPage} />
       </aside>
-      <div
-        class="col-span-1 sm:col-span-6 md:col-span-8 lg:col-span-6 xl:col-span-8 w-full max-w-screen-md"
-      >
+      <div class="p-4 md:ml-72 lg:mr-72 flex flex-col items-center">
         <PageContent
           frontmatter={frontmatter}
           headings={headings}
@@ -59,15 +60,18 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
         >
           <slot />
         </PageContent>
+        <Footer path={currentFile} isBlog={true} />
       </div>
       <aside
-        id="grid-right"
+        id={"grid-right"}
         title="Table of Contents"
-        class="hidden sticky h-fit top-20 md:block md:col-span-2 lg:col-span-3 xl:col-span-2 justify-self-start"
+        class={clsx(
+          "px-8 hidden lg:block fixed right-0 top-20 bottom-8",
+          `w-${asideWidth}`,
+        )}
       >
         <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
       </aside>
     </main>
-    <Footer path={currentFile} isBlog={true} />
   </body>
 </html>
diff --git a/www/src/styles/global.css b/www/src/styles/global.css
index f6e0cc199a..993944d916 100644
--- a/www/src/styles/global.css
+++ b/www/src/styles/global.css
@@ -103,12 +103,11 @@
 
   .mobile-sidebar-toggle #grid-left {
     display: block;
-    top: 2rem;
   }
 
   @media (min-width: 768px) {
     .mobile-sidebar-toggle #grid-left {
-        display: none;
+      display: none;
     }
   }