Add a sticky navigation

Caption tag can only reside in specific context, this change

makes it more generic, so it can be used freely

app/frontend/src/components/Navigation/MainNavigation.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { defineMessages, useIntl } from "react-intl";
 
 import { CONTACT_EMAIL, CONTACT_PHONE } from "../../config/environment";
@@ -30,10 +30,85 @@ const messages = defineMessages({
   },
 });
 
+const getTopOffset = (input: HTMLElement) => {
+  let el: HTMLElement | Element | null = input;
+  let o = 0;
+  do {
+    if (!(el instanceof HTMLElement)) {
+      break;
+    }
+
+    if (!isNaN(el.offsetTop)) {
+      o += el.offsetTop;
+    }
+  } while ((el = el.offsetParent));
+
+  return o;
+};
+
 const MainNavigation: React.FC = () => {
   const intl = useIntl();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) {
+      return;
+    }
+
+    let { height } = d.getBoundingClientRect();
+
+    const ro = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        height = entries[0].contentRect.height;
+      }
+    });
+
+    ro.observe(d);
+
+    let scrollPrev = window.scrollY;
+
+    const listener = () => {
+      const down = scrollPrev < window.scrollY;
+      scrollPrev = window.scrollY;
+      const top = getTopOffset(d);
+
+      if (window.innerHeight > height) {
+        d.style.marginTop = `${Math.max(window.scrollY, 0)}px`;
+        return;
+      }
+
+      if (down) {
+        const delta = top + height;
+        const wDelta = window.scrollY + window.innerHeight;
+
+        const diff = wDelta - delta;
+        if (diff > 0) {
+          const sizeDelta = Math.min(window.innerHeight - height, 0);
+          d.style.marginTop = `${Math.max(top + diff + sizeDelta, 0)}px`;
+        }
+      } else {
+        const delta = top;
+        const wDelta = window.scrollY;
+
+        const diff = wDelta - delta;
+        if (diff < 0) {
+          d.style.marginTop = `${Math.max(top + diff, 0)}px`;
+        }
+      }
+    };
+
+    window.addEventListener("scroll", listener);
+
+    return () => {
+      window.removeEventListener("scroll", listener);
+      ro.disconnect();
+    };
+  }, []);
+
   return (
-    <>
+    <div ref={ref}>
       <NavigationHeadline>
         {intl.formatMessage(messages.contact)}
       </NavigationHeadline>
@@ -42,11 +117,11 @@ const MainNavigation: React.FC = () => {
 
       <Contact email={CONTACT_EMAIL} phoneNumber={CONTACT_PHONE} />
 
-      <NavigationHeadline to="#objective">
+      <NavigationHeadline href="#objective">
         {intl.formatMessage(messages.objective)}
       </NavigationHeadline>
 
-      <NavigationHeadline to="#skills">
+      <NavigationHeadline href="#skills">
         {intl.formatMessage(messages.topSkills)}
       </NavigationHeadline>
 
@@ -63,7 +138,7 @@ const MainNavigation: React.FC = () => {
 
       <Spacer spacing={0} withDivider />
 
-      <NavigationHeadline to="#certifications">
+      <NavigationHeadline>
         {intl.formatMessage(messages.certifications)}
       </NavigationHeadline>
 
@@ -76,10 +151,10 @@ const MainNavigation: React.FC = () => {
 
       <Spacer spacing={0} withDivider />
 
-      <NavigationHeadline to="#experience">
+      <NavigationHeadline href="#experience">
         {intl.formatMessage(messages.experience)}
       </NavigationHeadline>
-    </>
+    </div>
   );
 };
 

app/frontend/src/components/Navigation/NavigationHeadline.tsx

@@ -15,17 +15,25 @@ const Link = styled(RouterLink)({
   textDecoration: "none",
 });
 
-type NavigationHeadlineProps = Partial<Pick<RouterLinkProps, "to">>;
+type NavigationHeadlineProps =
+  | (Partial<Pick<RouterLinkProps, "to">> & {
+      href?: undefined;
+    })
+  | {
+      href?: string;
+      to?: undefined;
+    };
 
 const NavigationHeadline: React.FC<
   React.PropsWithChildren<NavigationHeadlineProps>
 > = (props) => {
-  const { children, to } = props;
+  const { children, href, to } = props;
 
   return (
     <Headline>
       {to && <Link to={to}>{children}</Link>}
-      {!to && children}
+      {href && <a href={href}>{children}</a>}
+      {!to && !href && children}
     </Headline>
   );
 };

app/frontend/src/components/common/Text/Caption.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 
-const Caption = styled("caption")(({ theme }) => ({
+const Caption = styled("div")(({ theme }) => ({
   color: theme.palette.text.secondary,
   fontSize: "0.75rem",
   lineHeight: 1.5,

app/frontend/src/views/Dashboard.tsx

@@ -55,7 +55,7 @@ const Dashboard: React.FC = () => {
         <Summary />
       </Content>
 
-      <div id="experience" />
+      <div id="skills" />
       <Spacer withDivider />
 
       <Headline level={2}>{intl.formatMessage(messages.skillsTitle)}</Headline>