Header: toggleable tab options

Author: nirnejak

components/Header.tsx

@@ -6,6 +6,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 
 import classNames from "@/utils/classNames"
+import useLinkHighlight from "@/hooks/useLinkHighlight"
 
 const links = [
   { label: "Features", path: "/" },
@@ -16,6 +17,9 @@ const links = [
 const Header: React.FC = () => {
   const pathname = usePathname()
 
+  const [activeTab, setActiveTab] = React.useState(0)
+  const { wrapperRef, highlightStyles } = useLinkHighlight(activeTab)
+
   return (
     <section className="px-3 pt-3">
       <motion.header
@@ -31,17 +35,23 @@ const Header: React.FC = () => {
       >
         <div className="mr-auto text-base font-bold">SVG Gallery</div>
         <div className="order-3 col-span-3 flex justify-center md:order-2 md:col-span-1">
-          <div className="toggle-group flex gap-1 rounded-3xl bg-gray-200 p-1">
+          <div
+            className="toggle-group relative flex gap-1 rounded-3xl bg-gray-200 p-1"
+            ref={wrapperRef}
+          >
+            <div
+              style={{ ...highlightStyles, height: 32 }}
+              className="absolute left-0 rounded-3xl transition-all duration-300 bg-white toggle-selected-item"
+            />
             {links.map((link, index) => (
               <Link
                 key={index}
                 className={classNames(
-                  "rounded-3xl px-3 py-1.5 font-semibold transition-all hover:text-gray-900",
-                  pathname === link.path
-                    ? "toggle-selected-item bg-white text-gray-900"
-                    : "text-gray-500"
+                  "relative rounded-3xl px-3 py-1.5 font-semibold transition-all hover:text-gray-900",
+                  pathname === link.path ? "text-gray-900" : "text-gray-500"
                 )}
                 href={link.path}
+                onClick={() => setActiveTab(index)}
               >
                 {link.label}
               </Link>

hooks/useLinkHighlight.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+
+import useWindowSize from "./useWindowSize"
+
+interface HighlightProperties {
+  wrapperRef: React.RefObject<HTMLDivElement | null>
+  highlightStyles: React.CSSProperties
+}
+
+const useLinkHighlight = (activeTab: number): HighlightProperties => {
+  const size = useWindowSize()
+
+  const wrapperRef = React.useRef<HTMLDivElement | null>(null)
+
+  const [highlightStyles, setHighlightStyles] =
+    React.useState<React.CSSProperties>({ opacity: 0 })
+
+  React.useEffect(() => {
+    if (wrapperRef?.current !== null) {
+      const elements = wrapperRef.current?.getElementsByTagName("a")
+
+      if (elements?.length !== 0) {
+        const dimensions = elements[activeTab].getBoundingClientRect()
+        const wrapperDimensions = wrapperRef.current.getBoundingClientRect()
+
+        setHighlightStyles({
+          opacity: 1,
+          width: `${dimensions.width}px`,
+          transform: `translate(${dimensions.left - wrapperDimensions.left}px)`,
+        })
+      }
+    }
+  }, [activeTab, size])
+
+  return { wrapperRef, highlightStyles }
+}
+
+export default useLinkHighlight

hooks/useWindowSize.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+
+interface Dimensions {
+  width: number | null
+  height: number | null
+}
+
+const useWindowSize = (): Dimensions => {
+  const [size, setSize] = React.useState<Dimensions>({
+    width: null,
+    height: null,
+  })
+
+  React.useLayoutEffect(() => {
+    const handleResize = (): void => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    handleResize()
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [])
+
+  return size
+}
+
+export default useWindowSize