Add more section to dropdown

Author: Rikthepixel

src/assets/state/contactMethods.tsx

@@ -11,23 +11,27 @@ interface IContactMethod {
   title: ReactNode;
   href?: string;
   icon: React.ForwardRefExoticComponent<any>;
+  iconAlt: string;
 }
 
 const contactMethods: IContactMethod[] = [
   {
     title: "Newsletter Signup",
     href: "/#sign-up",
-    icon: NewsIcon
+    icon: NewsIcon,
+    iconAlt: "Newspaper icon",
   },
   {
     title: "feedback@commitrocket.com",
     href: "mailto:feedback@commitrocket.com",
-    icon: EnvelopeIcon
+    icon: EnvelopeIcon,
+    iconAlt: "Envelope icon"
   },
   {
     title: "Feedback Form",
     href: "/contribute#feedback",
-    icon: PencilSquareIcon
+    icon: PencilSquareIcon,
+    iconAlt: "Form icon"
   },
   {
     title: <>
@@ -36,7 +40,8 @@ const contactMethods: IContactMethod[] = [
         (Coming Soon™)
       </span>
     </>,
-    icon: DiscordIcon
+    icon: DiscordIcon,
+    iconAlt: "Discord icon"
   }
 ];
 

src/components/navigation/Header.tsx

@@ -8,6 +8,7 @@ import Link from "./Link";
 import Button from "../controls/Button";
 import NavLink from "./NavLink";
 import useOutsideClick from "@/hooks/useOutsideClick";
+import NavDropdown from "./NavDropdown";
 
 const Header = () => {
   const router = useRouter();
@@ -37,6 +38,7 @@ const Header = () => {
         ref={buttonRef}
         className="p-2 ml-auto rounded-full md:hidden"
         color="secondary"
+        aria-label="Expands the header"
         aria-expanded={open}
         aria-controls="header-items"
         onClick={() => setOpen(!open)}
@@ -45,7 +47,7 @@ const Header = () => {
       </Button>
       <div
         ref={itemsContainerRef}
-        className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-md shadow shadow-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:shadow-none md:static md:bg-transparent md:gap-12"
+        className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-md border-2 border-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
         id="header-items"
         data-expanded={open}
       >
@@ -58,12 +60,14 @@ const Header = () => {
         <NavLink href="/blog" currentHref={router.pathname}>
           Blog
         </NavLink>
-        <NavLink href="/about" currentHref={router.pathname}>
-          About
-        </NavLink>
-        <NavLink href="/contact" currentHref={router.pathname}>
-          Contact
-        </NavLink>
+        <NavDropdown summary="More">
+          <NavLink href="/about" currentHref={router.pathname}>
+            About
+          </NavLink>
+          <NavLink href="/contact" currentHref={router.pathname}>
+            Contact
+          </NavLink>
+        </NavDropdown>
       </div>
     </header>
   );

src/components/navigation/NavDropdown.tsx

@@ -0,0 +1,64 @@
+import { ReactNode, SyntheticEvent, useCallback, useEffect, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import ChevronDownIcon from "@heroicons/react/24/solid/ChevronDownIcon";
+
+import { style as navlinkStyle } from "./NavLink";
+import { style as linkStyle } from "./Link";
+import useOutsideClick from "@/hooks/useOutsideClick";
+import useHover from "@/hooks/useHover";
+
+export interface NavDropdownProps {
+  summary: ReactNode;
+  children: ReactNode;
+}
+
+const SUMMARY_CLASSNAME = twMerge(
+  navlinkStyle() + " " + linkStyle({ color: "primary" }),
+  "flex items-center"
+);
+
+const NavDropdown = ({ summary, children }: NavDropdownProps) => {
+  const summaryRef = useRef<HTMLDetailsElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [open, setOpen] = useState<boolean | undefined>(false);
+
+  const handleToggle = useCallback((e: SyntheticEvent<HTMLDetailsElement, Event>) => {
+    const target = e.target as HTMLDetailsElement;
+    setOpen(target.open);
+  }, []);
+
+  const isSummaryHovering = useHover(summaryRef);
+  const isContainerHovering = useHover(containerRef);
+
+  useEffect(() => {
+    const isHovering = isSummaryHovering || isContainerHovering;
+    if (!isHovering) {
+      setOpen(false);
+      return;
+    }
+
+    setOpen(true);
+  }, [isSummaryHovering, isContainerHovering]);
+
+  useOutsideClick([summaryRef, containerRef], () => {
+    setOpen(false);
+  });
+
+  return (
+    <details className="relative group/details" open={open} onToggle={handleToggle}>
+      <summary ref={summaryRef} className={SUMMARY_CLASSNAME}>
+        {summary}
+        <ChevronDownIcon
+          className="w-5 h-5 data-[open='true']:rotate-180 transition-all"
+          data-open={open}
+        />
+      </summary>
+      <div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-md group/dropdown border-primary bg-fill md:w-fit" data-in-group>
+        {children}
+      </div>
+    </details>
+  );
+};
+
+export default NavDropdown;

src/components/navigation/NavLink.tsx

@@ -1,3 +1,4 @@
+import { cva } from "class-variance-authority";
 import { ReactNode } from "react";
 import Link from "./Link";
 
@@ -7,11 +8,19 @@ export interface NavLinkProps {
   children: ReactNode;
 }
 
+export const style = cva(`
+  text-lg font-bold py-2
+  aria-[current='page']:text-primary-light 
+  group-data-[in-group='true']/dropdown:text-base group-data-[in-group='true']/dropdown:py-0
+`);
+
+const CLASSNAME = style();
+
 const NavLink = ({ href, currentHref, children }: NavLinkProps) => {
   const active = currentHref === href;
   return (
     <Link
-      className="text-lg font-bold py-2 border-y border-primary hover:border-primary-dark aria-[current='page']:text-primary-light aria-[current='page']:border-primary first-of-type:border-t-2 last-of-type:border-b-2 md:border-0 md:first-of-type:border-t-0 md:last-of-type:border-b-0"
+      className={CLASSNAME}
       aria-current={active ? "page" : undefined}
       color="primary"
       href={href}
@@ -22,4 +31,4 @@ const NavLink = ({ href, currentHref, children }: NavLinkProps) => {
 };
 
 
-export default NavLink
+export default NavLink;

src/hooks/useHover.ts

@@ -0,0 +1,27 @@
+import { MutableRefObject, useEffect, useRef, RefObject, useState } from "react";
+
+const useHover = (ref: (RefObject<Element> | MutableRefObject<Element>)) => {
+
+  const [isHovering, setIsHovering] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const handleMouseOver = () => setIsHovering(true);
+    const handleMouseOut = () => setIsHovering(false);
+
+    ref.current.addEventListener("mouseover", handleMouseOver);
+    ref.current.addEventListener("mouseout", handleMouseOut);
+
+    return () => {
+      if (!ref.current) return;
+      ref.current.removeEventListener("mouseover", handleMouseOver);
+      ref.current.removeEventListener("mouseout", handleMouseOut);
+    };
+  }, [ref.current, setIsHovering]);
+
+
+  return isHovering;
+};
+
+export default useHover;

src/hooks/useOutsideClick.ts

@@ -10,6 +10,7 @@ const useOutsideClick = (refs: (RefObject<Element> | MutableRefObject<Element>)[
         if (!event.target || !ref.current) return true;
         return ref.current.contains(event.target as Element);
       });
+
       if (isContained) return;
 
       handlerRef.current(event);

src/pages/contact.tsx

@@ -23,11 +23,12 @@ const ContactPage: Page = ({ }) => {
                   className={`flex flex-col items-center ${method.href ? "" : style({ color: "primary", underline: true })}`}
                   //@ts-ignore
                   href={method.href}
-                  scroll={true}
-                  underline={Boolean(method.href)}
+                  scroll={method.href ? true : undefined}
+                  underline={method.href ? true : undefined}
                 >
                   <method.icon
                     className="w-16 h-16 md:w-24 md:h-24"
+                    aria-label={method.iconAlt}
                   />
                   <p className="font-bold text-center md:text-lg">
                     {method.title}

src/styles/main.css

@@ -13,6 +13,14 @@ html {
   @apply bg-fill text-fill-contrast;
 }
 
+details>summary {
+  list-style: none;
+}
+
+details>summary::-webkit-details-marker {
+  display: none;
+}
+
 div.swal2-popup.swal2-toast {
   @apply p-3 shadow shadow-black/25 bg-white/50 backdrop-blur-sm;
 }