From 07e045645c60546565e0ed8747831a73307dd6cb Mon Sep 17 00:00:00 2001
From: Emmanuel Itakpe <62019510+Emmanuel-Develops@users.noreply.github.com>
Date: Wed, 23 Oct 2024 21:49:09 +0100
Subject: [PATCH] fix: scroll, header and add footer (#47)

* fix: scroll, header and add footer

* fix: switch to fixed height for explore content

* fix: switch layout to template
---
 src/app/(explore)/layout.tsx                  | 18 ---------------
 src/app/(explore)/sources/[...slug]/page.tsx  |  6 ++---
 src/app/(explore)/template.tsx                | 23 +++++++++++++++++++
 src/app/globals.css                           |  7 +++++-
 src/app/layout.tsx                            |  2 +-
 src/components/common/BreadCrumbs.tsx         |  3 +--
 src/components/explore/ExploreNavigation.tsx  |  2 +-
 .../explore/TranscriptContentPage.tsx         |  6 ++---
 src/components/layout/Header.tsx              |  4 +++-
 src/components/layout/Wrapper.tsx             |  2 +-
 10 files changed, 42 insertions(+), 31 deletions(-)
 delete mode 100644 src/app/(explore)/layout.tsx
 create mode 100644 src/app/(explore)/template.tsx

diff --git a/src/app/(explore)/layout.tsx b/src/app/(explore)/layout.tsx
deleted file mode 100644
index 87b0d99..0000000
--- a/src/app/(explore)/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import ExploreNavigation from "@/components/explore/ExploreNavigation";
-
-export default function ExploreLayout({
-  children, // will be a page or nested layout
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="w-full max-w-[1920px] mx-auto px-4 lg:px-10 2xl:px-[60px]">
-      <section className="flex  gap-[50px] h-[calc(100vh-var(--header-height))]  pt-6 overflow-y-auto ">
-        <ExploreNavigation />
-        <div className="max-h-full h-full w-full scroll-smooth overflow-scroll ">{children}</div>
-
-        {/* Include shared UI here e.g. a header or sidebar */}
-      </section>
-    </div>
-  );
-}
diff --git a/src/app/(explore)/sources/[...slug]/page.tsx b/src/app/(explore)/sources/[...slug]/page.tsx
index a380699..b72e8a9 100644
--- a/src/app/(explore)/sources/[...slug]/page.tsx
+++ b/src/app/(explore)/sources/[...slug]/page.tsx
@@ -62,8 +62,8 @@ const page = ({ params }: { params: { slug: string[] } }) => {
   const isDirectoryList = Array.isArray(current);
 
   return (
-    <div className='flex items-start lg:gap-[50px] max-h-[calc(100vh-var(--header-height)-24px)]'>
-      <div className='flex flex-col w-full gap-6 md:gap-8 2xl:gap-10 no-scrollbar max-h-[calc(100vh-var(--header-height)-24px)]'>
+    <div className='flex items-start lg:gap-[50px]'>
+      <div className='flex flex-col w-full gap-6 md:gap-8 2xl:gap-10 no-scrollbar'>
         <div
           className={`flex flex-col ${
             isDirectoryList ? "border-b border-b-[#9B9B9B] pb-6 md:border-b-0 md:pb-0" : "border-b border-b-[#9B9B9B] pb-6 lg:pb-10"
@@ -101,7 +101,7 @@ const page = ({ params }: { params: { slug: string[] } }) => {
             ))}
           </div>
         ) : (
-          <div className='flex-col flex gap-10 max-h-[calc(100vh-var(--header-height)-24px)] overflow-scroll pb-8'>
+          <div className='flex-col flex gap-10 overflow-scroll pb-8'>
             <div className='grid grid-cols-1 sm:grid-cols-2 gap-2.5'>
               {(displayCurrent as string[]).map((key, i) => (
                 <Link
diff --git a/src/app/(explore)/template.tsx b/src/app/(explore)/template.tsx
new file mode 100644
index 0000000..73ce3c6
--- /dev/null
+++ b/src/app/(explore)/template.tsx
@@ -0,0 +1,23 @@
+import ExploreNavigation from "@/components/explore/ExploreNavigation";
+import FooterComponent from "@/components/layout/FooterComponent";
+import Wrapper from "@/components/layout/Wrapper";
+
+export default function ExploreLayout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <section className="mt-2 md:mt-6 h-[calc(100vh-var(--header-height)-26px)] overflow-y-auto">
+        <Wrapper className="flex gap-[50px] md:pb-[100px]">
+          <ExploreNavigation />
+          <div className="w-full scroll-smooth">{children}</div>
+
+          {/* Include shared UI here e.g. a header or sidebar */}
+        </Wrapper>
+        <FooterComponent />
+      </section>
+    </>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index b497b56..f5fbf76 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -32,7 +32,7 @@
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
   --basic-mono-font: basic-mono;
-  --header-height: 100px;
+  --header-height: 86px;
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -49,6 +49,11 @@ body {
   color: rgb(var(--foreground-rgb));
 } */
 
+@media (min-width: 768px) {
+  :root {
+    --header-height: 100px;
+  }
+}
 
 @layer utilities {
   .text-balance {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f2f3e1c..3b8a60c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({
     <html lang='en'>
       <body className={manrope.className}>
         <Header />
-        <div>{children}</div>
+        {children}
       </body>
       <Script async src='https://visits.bitcoindevs.xyz/script.js' data-website-id='06384ada-7f1c-44c2-a6d9-d830fb23e122'></Script>
     </html>
diff --git a/src/components/common/BreadCrumbs.tsx b/src/components/common/BreadCrumbs.tsx
index 67e9fc1..834d6c2 100644
--- a/src/components/common/BreadCrumbs.tsx
+++ b/src/components/common/BreadCrumbs.tsx
@@ -12,8 +12,7 @@ const BreadCrumbs = () => {
       .split("/")
       .slice(0, idx + 1)
       .join("/");
-
-    return { name: path || "home", link: route };
+    return { name: path || "home", link: route || "/" };
   });
 
   const isActive = allRoutes[allRoutes.length - 1];
diff --git a/src/components/explore/ExploreNavigation.tsx b/src/components/explore/ExploreNavigation.tsx
index c084789..52a6853 100644
--- a/src/components/explore/ExploreNavigation.tsx
+++ b/src/components/explore/ExploreNavigation.tsx
@@ -7,7 +7,7 @@ import { ArrowLinkUpRight } from "@bitcoin-dev-project/bdp-ui/icons";
 
 const ExploreNavigation = () => {
   return (
-    <section className='max-md:hidden md:flex sticky top-0 flex-col flex-none gap-4  2xl:gap-6  w-full max-w-[240px] 2xl:max-w-[320px]'>
+    <section className='hidden md:flex sticky top-0 overflow-y-auto flex-col self-start gap-4 2xl:gap-6 w-full max-w-[240px] 2xl:max-w-[320px]'>
       <div className='flex flex-col gap-4 2xl:gap-6 rounded-lg px-5 py-[23px] border border-gray-custom-1200'>
         {ExploreNavigationItems.map((item) => (
           <ExploreNavigationItem key={item.href} href={item.href} title={item.title} />
diff --git a/src/components/explore/TranscriptContentPage.tsx b/src/components/explore/TranscriptContentPage.tsx
index 0001c4f..2d05077 100644
--- a/src/components/explore/TranscriptContentPage.tsx
+++ b/src/components/explore/TranscriptContentPage.tsx
@@ -22,9 +22,9 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({ header, data, descr
   const [currentGroup, setCurrentGroup] = useState<string>(type === "alphabet" ? "A" : createSlug(Object.keys(groupedData)[0]));
 
   return (
-    <div className='flex  items-start  relative  lg:gap-[50px] '>
+    <div className='flex items-start relative lg:gap-[50px]'>
       <div className='flex flex-col w-full gap-6 lg:gap-10 no-scrollbar'>
-        <div className='block lg:hidden sticky top-0 '>
+        <div className='block lg:hidden sticky top-0'>
           {type == "alphabet" && <MobileAlphabetGrouping currentGroup={currentGroup} groupedData={groupedData} />}
           {type == "words" && <ContentGrouping groupedData={groupedData} currentGroup={currentGroup} screen='mobile' />}
         </div>
@@ -64,7 +64,7 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({ header, data, descr
         </div>
       </div>
 
-      <div className='hidden lg:flex sticky top-0 flex-shrink-0  w-fit lg:justify-center '>
+      <div className='hidden lg:flex sticky top-0 self-start flex-shrink-0 w-fit lg:justify-center '>
         {type === "alphabet" && <AlphabetGrouping groupedData={groupedData} currentGroup={currentGroup} />}
         {type == "words" && <ContentGrouping groupedData={groupedData} currentGroup={currentGroup} screen='desktop' />}
       </div>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 9201de6..4aa1a26 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -189,7 +189,9 @@ const Header = () => {
     <div className='flex items-center justify-center border-b-[0.5px] border-b-gray-custom-200 max-md:border-b-0 w-full sticky top-0 z-20'>
       <Wrapper className='h-[var(--header-height)] flex items-center w-full justify-between bg-white sticky top-0 z-20 gap-6 max-lg:gap-4 max-md:h-[86px]'>
         <section className='flex items-center gap-16 max-xl:gap-8 max-lg:gap-4'>
-          <Logo iconStyles='w-9 max-xl:w-[30px]' textStyles='text-black text-[24px] leading-[36.77px] max-lg:text-base' />
+          <Link href="/">
+            <Logo iconStyles='w-9 max-xl:w-[30px]' textStyles='text-black text-[24px] leading-[36.77px] max-lg:text-base' />
+          </Link>
           <nav className='md:hidden items-center gap-16 text-black max-xl:gap-4 max-lg:text-sm max-md:hidden'>
             <Link href='/categories'>Transcripts</Link>
             <Link href='/about' className='hidden'>
diff --git a/src/components/layout/Wrapper.tsx b/src/components/layout/Wrapper.tsx
index 46ef379..3c80a51 100644
--- a/src/components/layout/Wrapper.tsx
+++ b/src/components/layout/Wrapper.tsx
@@ -1,5 +1,5 @@
 import React from "react";
 
 export default function Wrapper({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
-  return <div className={`px-[60px] max-xl:px-5 max-lg:px-4 max-w-[1920px] ${className}`} {...props} />;
+  return <div className={`w-full max-w-[1920px] px-4 lg:px-10 2xl:px-[60px] mx-auto ${className}`} {...props} />;
 }