From 978b8c804626fd2d2d463e938b141fac9271cc81 Mon Sep 17 00:00:00 2001
From: Dan Lebo <dan.lebo@me.com>
Date: Sun, 5 Feb 2023 20:19:39 -0800
Subject: [PATCH] nav fixes, aligning headings

---
 beta/src/components/Layout/Page.tsx          |  6 +++---
 beta/src/components/Layout/Toc.tsx           |  2 +-
 beta/src/components/Layout/TopNav/TopNav.tsx | 17 +++++++++--------
 beta/src/components/PageHeading.tsx          |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/beta/src/components/Layout/Page.tsx b/beta/src/components/Layout/Page.tsx
index 08fe22ee9..edc336115 100644
--- a/beta/src/components/Layout/Page.tsx
+++ b/beta/src/components/Layout/Page.tsx
@@ -97,8 +97,8 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
           section === 'blog' && 'max-w-5xl mx-auto'
         )}>
         {showSidebar && (
-          <div className="lg:-mt-20">
-            <div className="lg:pt-20 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
+          <div className="lg:-mt-16">
+            <div className="lg:pt-16 fixed lg:sticky top-0 left-0 right-0 py-0 shadow lg:shadow-none">
               <SidebarNav
                 key={section}
                 routeTree={routeTree}
@@ -116,7 +116,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             <Footer hideSurvey={isHomePage || isBlogIndex} />
           </main>
         </Suspense>
-        <div className="-mt-20 hidden lg:max-w-xs 2xl:block">
+        <div className="-mt-16 hidden lg:max-w-xs 2xl:block">
           {showToc && toc.length > 0 && <Toc headings={toc} key={asPath} />}
         </div>
       </div>
diff --git a/beta/src/components/Layout/Toc.tsx b/beta/src/components/Layout/Toc.tsx
index bc3125b99..1f048aef4 100644
--- a/beta/src/components/Layout/Toc.tsx
+++ b/beta/src/components/Layout/Toc.tsx
@@ -13,7 +13,7 @@ export function Toc({headings}: {headings: Toc}) {
   // Select the max TOC item we have here for now, but remove this after the fix.
   const selectedIndex = Math.min(currentIndex, headings.length - 1);
   return (
-    <nav role="navigation" className="pt-24 sticky top-0 right-0">
+    <nav role="navigation" className="pt-20 sticky top-0 right-0">
       {headings.length > 0 && (
         <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
           On this page
diff --git a/beta/src/components/Layout/TopNav/TopNav.tsx b/beta/src/components/Layout/TopNav/TopNav.tsx
index e190ed591..75f7f641a 100644
--- a/beta/src/components/Layout/TopNav/TopNav.tsx
+++ b/beta/src/components/Layout/TopNav/TopNav.tsx
@@ -131,9 +131,10 @@ function NavItem({url, isActive, children}: any) {
       <Link
         href={url}
         className={cn(
-          'outline-link p-2 rounded-lg capitalize',
+          'outline-link py-2 px-3 rounded-lg capitalize',
           !isActive && 'hover:bg-card hover:dark:bg-card-dark',
-          isActive && 'bg-highlight dark:bg-highlight-dark text-link'
+          isActive &&
+            'bg-highlight dark:bg-highlight-dark text-link dark:text-link-dark'
         )}>
         {children}
       </Link>
@@ -247,10 +248,10 @@ export default function TopNav({
       )}>
       <nav
         className={cn(
-          'max-h-20 backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 py-3 px-1.5 lg:px-5 lg:pr-5 z-50',
+          'backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 px-1.5 lg:px-5 lg:pr-5 z-50',
           {'dark:shadow-nav-dark shadow-nav': isScrolled || isOpen}
         )}>
-        <div className="w-full gap-0 sm:gap-2.5 flex justify-center items-center justify-between">
+        <div className="h-16 w-full gap-0 sm:gap-2.5 flex justify-center items-center justify-between">
           <div className="3xl:flex-1 flex flex-row -space-x-1.5">
             <button
               type="button"
@@ -276,8 +277,8 @@ export default function TopNav({
           <div className="hidden md:flex flex-1 justify-center items-center w-full 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
             <Search />
           </div>
-          <div className="text-base justify-center items-center flex 3xl:flex-1 flex-row 3xl:justify-end">
-            <div className="ml-2.5 mr-5 hidden lg:flex gap-5">
+          <div className="text-base justify-center items-center gap-2.5 flex 3xl:flex-1 flex-row 3xl:justify-end">
+            <div className="mx-2.5 gap-2.5 hidden lg:flex">
               <NavItem isActive={section === 'learn'} url="/learn">
                 Learn
               </NavItem>
@@ -377,7 +378,7 @@ export default function TopNav({
             <nav
               role="navigation"
               style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
-              className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-6 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
+              className="w-full lg:h-auto grow pr-0 lg:pr-5 pt-4 lg:py-6 md:pt-4 lg:pt-4 scrolling-touch scrolling-gpu">
               {/* No fallback UI so need to be careful not to suspend directly inside. */}
               <Suspense fallback={null}>
                 <div className="block ml-3 flex flex-row gap-2 lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
@@ -431,7 +432,7 @@ export default function TopNav({
                   isForceExpanded={isOpen}
                 />
               </Suspense>
-              <div className="h-20" />
+              <div className="h-16" />
             </nav>
             <div className="fixed bottom-0 hidden lg:block">
               <Feedback />
diff --git a/beta/src/components/PageHeading.tsx b/beta/src/components/PageHeading.tsx
index 0cc8b9864..2120497cf 100644
--- a/beta/src/components/PageHeading.tsx
+++ b/beta/src/components/PageHeading.tsx
@@ -23,7 +23,7 @@ function PageHeading({
   breadcrumbs,
 }: PageHeadingProps) {
   return (
-    <div className="px-5 sm:px-12 pt-8 sm:pt-7 lg:pt-2">
+    <div className="px-5 sm:px-12 pt-8 lg:pt-4">
       <div className="max-w-4xl ml-0 2xl:mx-auto">
         {breadcrumbs ? <Breadcrumbs breadcrumbs={breadcrumbs} /> : null}
         <H1 className="mt-0 text-primary dark:text-primary-dark -mx-.5 break-words">