From f062cdbed2f432c2cca403ffb3ac8d033ba9ea1b Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 9 Feb 2023 08:22:36 -0800
Subject: [PATCH] Updated sticky header logic.

---
 components/helpers/StickyHeader.js         |  8 +++++++-
 components/layout/AppLayout.js             |  2 +-
 components/layout/AppLayout.module.css     |  3 +--
 components/metrics/MetricCard.module.css   |  8 ++++++--
 components/metrics/MetricsBar.module.css   |  5 +----
 components/metrics/WebsiteChart.js         |  2 +-
 components/metrics/WebsiteChart.module.css |  4 ++--
 hooks/useSticky.js                         | 23 +++++++++++-----------
 8 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/components/helpers/StickyHeader.js b/components/helpers/StickyHeader.js
index f46dd3c2..12cab515 100644
--- a/components/helpers/StickyHeader.js
+++ b/components/helpers/StickyHeader.js
@@ -1,15 +1,21 @@
+import { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import useSticky from 'hooks/useSticky';
 
 export default function StickyHeader({ className, stickyClassName, stickyStyle, children }) {
   const { ref, isSticky } = useSticky();
+  const initialWidth = useRef(0);
+
+  useEffect(() => {
+    initialWidth.current = ref.current.clientWidth;
+  }, [ref]);
 
   return (
     <div
       ref={ref}
       data-sticky={isSticky}
       className={classNames(className, { [stickyClassName]: isSticky })}
-      style={isSticky ? { ...stickyStyle, width: ref?.current?.clientWidth } : null}
+      style={isSticky ? { ...stickyStyle, width: initialWidth.current } : null}
     >
       {children}
     </div>
diff --git a/components/layout/AppLayout.js b/components/layout/AppLayout.js
index 2b5f0b92..835f64d4 100644
--- a/components/layout/AppLayout.js
+++ b/components/layout/AppLayout.js
@@ -19,7 +19,7 @@ export default function AppLayout({ title, children }) {
       <div className={styles.nav}>
         <NavBar />
       </div>
-      <div className={styles.body}>
+      <div className={styles.body} id="layout-body">
         <Container>
           <main>{children}</main>
         </Container>
diff --git a/components/layout/AppLayout.module.css b/components/layout/AppLayout.module.css
index 7b83a24a..746ada39 100644
--- a/components/layout/AppLayout.module.css
+++ b/components/layout/AppLayout.module.css
@@ -6,11 +6,10 @@
 
 .nav {
   grid-row: 1 / 3;
-  height: 100vh;
-  position: fixed;
 }
 
 .body {
   grid-area: 1 / 2;
   overflow: auto;
+  height: 100vh;
 }
diff --git a/components/metrics/MetricCard.module.css b/components/metrics/MetricCard.module.css
index 905f4d86..7a033209 100644
--- a/components/metrics/MetricCard.module.css
+++ b/components/metrics/MetricCard.module.css
@@ -2,21 +2,25 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-height: 90px;
   min-width: 140px;
 }
 
 .value {
-  min-height: 36px;
+  display: flex;
+  align-items: center;
   font-size: 36px;
   font-weight: 700;
   white-space: nowrap;
+  min-height: 60px;
 }
 
 .label {
-  white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 5px;
+  white-space: nowrap;
+  min-height: 30px;
 }
 
 .change {
diff --git a/components/metrics/MetricsBar.module.css b/components/metrics/MetricsBar.module.css
index 7e90ba12..c96fab26 100644
--- a/components/metrics/MetricsBar.module.css
+++ b/components/metrics/MetricsBar.module.css
@@ -2,10 +2,7 @@
   display: flex;
   cursor: pointer;
   min-height: 80px;
-}
-
-.bar > div + div {
-  padding-left: 20px;
+  gap: 20px;
 }
 
 @media only screen and (max-width: 992px) {
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 8b44439f..9e4cec4f 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { Button, Icon, Text, Row, Column, Loading } from 'react-basics';
+import { Button, Icon, Text, Row, Column, Container } from 'react-basics';
 import Link from 'next/link';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
diff --git a/components/metrics/WebsiteChart.module.css b/components/metrics/WebsiteChart.module.css
index d108366e..92c58d6c 100644
--- a/components/metrics/WebsiteChart.module.css
+++ b/components/metrics/WebsiteChart.module.css
@@ -18,6 +18,7 @@
 
 .header {
   min-height: 90px;
+  margin-bottom: 20px;
 }
 
 .metrics {
@@ -25,16 +26,15 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 0;
 }
 
 .sticky {
   position: fixed;
   top: 0;
-  margin: auto;
   background: var(--base50);
   border-bottom: 1px solid var(--base300);
   z-index: 3;
+  width: inherit;
 }
 
 .filter {
diff --git a/hooks/useSticky.js b/hooks/useSticky.js
index 13498a20..bd58da53 100644
--- a/hooks/useSticky.js
+++ b/hooks/useSticky.js
@@ -1,27 +1,28 @@
 import { useState, useEffect, useRef } from 'react';
 
-export default function useSticky(defaultSticky = false) {
+export default function useSticky(
+  element = document.getElementById('layout-body'),
+  defaultSticky = false,
+) {
   const [isSticky, setIsSticky] = useState(defaultSticky);
   const ref = useRef(null);
-  const initialTop = useRef(0);
+  const initialTop = useRef(null);
 
   useEffect(() => {
     const handleScroll = () => {
-      if (window.pageYOffset > initialTop.current) {
-        setIsSticky(true);
-      } else {
-        setIsSticky(false);
-      }
+      setIsSticky(element.scrollTop > initialTop.current);
     };
 
-    initialTop.current = ref.current.offsetTop;
+    if (initialTop.current === null) {
+      initialTop.current = ref.current.offsetTop;
+    }
 
-    window.addEventListener('scroll', handleScroll);
+    element.addEventListener('scroll', handleScroll);
 
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      element.removeEventListener('scroll', handleScroll);
     };
-  }, []);
+  }, [setIsSticky]);
 
   return { ref, isSticky };
 }