@notionhive/menus 0.1.0

package/templates/components/molecules/EquipmentMegaMenu/EquipmentMegaMenu.jsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useEffect } from "react";
+import SafeImage from "../../atoms/SafeImage";
+import {
+  equipmentMegaMenuDefaultProps,
+  equipmentMegaMenuPropTypes,
+} from "./EquipmentMegaMenu.propTypes";
+
+function MegaMenuLink({ link }) {
+  const className = [
+    "block w-full text-left text-sm leading-5 transition-colors duration-200 ease-out hover:text-brand-500",
+    link.highlighted ? "font-medium text-brand-500" : "text-neutral-700",
+  ].join(" ");
+
+  if (link.href) {
+    return (
+      <a href={link.href} className={className}>
+        {link.label}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" onClick={link.onClick} className={className}>
+      {link.label}
+    </button>
+  );
+}
+
+function CategoryColumn({ category }) {
+  return (
+    <div className="flex min-w-[180px] flex-1 flex-col gap-6 sm:min-w-[200px] sm:gap-8">
+      {category.imageSrc ? (
+        <div className="relative h-[100px] w-full overflow-hidden rounded sm:h-[125px] sm:w-[200px]">
+          <SafeImage
+            src={category.imageSrc}
+            alt={category.imageAlt || category.title}
+            fill
+            className="object-contain object-left"
+            sizes="200px"
+          />
+        </div>
+      ) : null}
+
+      <div className="flex flex-col gap-3 sm:gap-4">
+        <p
+          className={[
+            "text-base font-bold leading-5 sm:text-lg",
+            category.titleHighlighted ? "text-brand-500" : "text-neutral-800",
+          ].join(" ")}
+        >
+          {category.title}
+        </p>
+
+        {category.links?.length ? (
+          <ul className="flex flex-col gap-2 sm:gap-3">
+            {category.links.map((link) => (
+              <li key={link.label}>
+                <MegaMenuLink link={link} />
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function PromoBlock({ promo, titleHighlighted = false }) {
+  if (!promo) return null;
+
+  const titleClass = [
+    "text-base font-bold leading-5 sm:text-lg",
+    titleHighlighted ? "text-brand-500" : "text-neutral-800",
+  ].join(" ");
+
+  if (promo.href) {
+    return (
+      <div className="flex flex-col gap-6 sm:gap-8">
+        {promo.imageSrc ? (
+          <div className="relative h-[100px] w-full overflow-hidden rounded sm:h-[125px] sm:w-[200px]">
+            <SafeImage
+              src={promo.imageSrc}
+              alt={promo.imageAlt || promo.title}
+              fill
+              className="object-cover object-center"
+              sizes="200px"
+            />
+          </div>
+        ) : null}
+        <a href={promo.href} className={`${titleClass} transition-opacity duration-200 hover:opacity-80`}>
+          {promo.title}
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6 sm:gap-8">
+      {promo.imageSrc ? (
+        <div className="relative h-[100px] w-full overflow-hidden rounded sm:h-[125px] sm:w-[200px]">
+          <SafeImage
+            src={promo.imageSrc}
+            alt={promo.imageAlt || promo.title}
+            fill
+            className="object-cover object-center"
+            sizes="200px"
+          />
+        </div>
+      ) : null}
+      <button type="button" onClick={promo.onClick} className={`text-left ${titleClass}`}>
+        {promo.title}
+      </button>
+    </div>
+  );
+}
+
+/**
+ * EquipmentMegaMenu — full-width Koenig Equipment mega menu dropdown.
+ *
+ * @param {object} props - See EquipmentMegaMenu.propTypes.js.
+ */
+export function EquipmentMegaMenu({
+  isOpen = equipmentMegaMenuDefaultProps.isOpen,
+  onClose,
+  categories = equipmentMegaMenuDefaultProps.categories,
+  buildYourOwn = equipmentMegaMenuDefaultProps.buildYourOwn,
+  promotions = equipmentMegaMenuDefaultProps.promotions,
+  showAdPlaceholder = equipmentMegaMenuDefaultProps.showAdPlaceholder,
+  adPlaceholderText = equipmentMegaMenuDefaultProps.adPlaceholderText,
+  className = "",
+}) {
+  useEffect(() => {
+    if (!isOpen) return undefined;
+
+    const handler = (event) => {
+      if (event.key === "Escape") onClose?.();
+    };
+
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const adLines = adPlaceholderText.split("\n");
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Close menu"
+        onClick={onClose}
+        className="fixed inset-0 z-30 hidden bg-black/20 lg:block"
+      />
+
+      <div
+        className={[
+          "absolute left-0 right-0 top-full z-40 hidden border-b border-neutral-100 bg-white px-4 py-8 shadow-lg sm:px-6 md:px-10 lg:block lg:px-16 lg:py-11",
+          "animate-fade-in motion-reduce:animate-none",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        role="dialog"
+        aria-modal="true"
+        aria-label="New Equipment menu"
+      >
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-8 xl:max-w-[1410px]">
+          <div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between lg:gap-6 xl:gap-8">
+            {categories.map((category) => (
+              <CategoryColumn key={category.title} category={category} />
+            ))}
+
+            <div className="flex min-w-[180px] flex-1 flex-col gap-8 sm:min-w-[200px] sm:gap-10">
+              <PromoBlock promo={buildYourOwn} titleHighlighted />
+              <PromoBlock promo={promotions} />
+            </div>
+
+            {showAdPlaceholder ? (
+              <div className="hidden min-h-[280px] w-full max-w-[276px] shrink-0 items-center justify-center self-stretch rounded border border-dashed border-neutral-400 bg-neutral-100 lg:flex">
+                <p className="px-4 text-center text-sm font-bold leading-6 text-neutral-400">
+                  {adLines.map((line, index) => (
+                    <span key={line}>
+                      {line}
+                      {index < adLines.length - 1 ? <br /> : null}
+                    </span>
+                  ))}
+                </p>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+EquipmentMegaMenu.propTypes = equipmentMegaMenuPropTypes;
+
+export default EquipmentMegaMenu;

package/templates/components/molecules/EquipmentMegaMenu/EquipmentMegaMenu.propTypes.js

@@ -0,0 +1,104 @@
+import PropTypes from "prop-types";
+
+const linkShape = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  onClick: PropTypes.func,
+  highlighted: PropTypes.bool,
+});
+
+const categoryShape = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  imageAlt: PropTypes.string,
+  titleHighlighted: PropTypes.bool,
+  links: PropTypes.arrayOf(linkShape),
+});
+
+export const equipmentMegaMenuPropTypes = {
+  isOpen: PropTypes.bool,
+  onClose: PropTypes.func,
+  categories: PropTypes.arrayOf(categoryShape),
+  buildYourOwn: PropTypes.shape({
+    imageSrc: PropTypes.string,
+    imageAlt: PropTypes.string,
+    title: PropTypes.string,
+    href: PropTypes.string,
+    onClick: PropTypes.func,
+  }),
+  promotions: PropTypes.shape({
+    imageSrc: PropTypes.string,
+    imageAlt: PropTypes.string,
+    title: PropTypes.string,
+    href: PropTypes.string,
+    onClick: PropTypes.func,
+  }),
+  showAdPlaceholder: PropTypes.bool,
+  adPlaceholderText: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export const equipmentMegaMenuDefaultProps = {
+  isOpen: false,
+  categories: [
+    {
+      title: "Agriculture",
+      imageSrc: "/menus/menu01/agriculture.png",
+      imageAlt: "John Deere tractor",
+      links: [
+        { label: "Tractors", href: "#" },
+        { label: "Harvesting", href: "#" },
+        { label: "Spraying & Application", href: "#" },
+        { label: "Planting & Seeding", href: "#" },
+        { label: "Tillage", href: "#" },
+        { label: "Precision Ag Technology", href: "#" },
+        { label: "Hay & Forage", href: "#" },
+        { label: "All Brands", href: "#" },
+      ],
+    },
+    {
+      title: "Compact Construction Equipment",
+      imageSrc: "/menus/menu01/construction.png",
+      imageAlt: "Compact construction skid steer",
+      links: [
+        { label: "Skid Steers", href: "#" },
+        { label: "Track Loaders", href: "#" },
+        { label: "Excavators", href: "#" },
+        { label: "Wheel Loaders", href: "#", highlighted: true },
+        { label: "Attachments", href: "#" },
+      ],
+    },
+    {
+      title: "Lawn & Grounds Care",
+      imageSrc: "/menus/menu01/lawn-care.png",
+      imageAlt: "Lawn and grounds care mower",
+      links: [
+        { label: "Tractor Packages", href: "#" },
+        { label: "Compact Utility Tractors & Attachments", href: "#" },
+        { label: "Lawn & Garden Tractors", href: "#" },
+        { label: "Residential Zero Turn Mowers", href: "#" },
+        { label: "Walk Behind Mowers", href: "#" },
+        { label: "Commercial Mowing", href: "#" },
+        { label: "Gator Utility Vehicles", href: "#" },
+        { label: "EGO", href: "#" },
+        { label: "Stihl", href: "#" },
+        { label: "Ventrac", href: "#" },
+        { label: "All Brands", href: "#" },
+      ],
+    },
+  ],
+  buildYourOwn: {
+    imageSrc: "/menus/menu01/build-your-own.png",
+    imageAlt: "Build your own equipment",
+    title: "Build Your Own",
+    href: "#",
+  },
+  promotions: {
+    imageSrc: "/menus/menu01/promotions.png",
+    imageAlt: "Equipment promotions",
+    title: "Promotions",
+    href: "#",
+  },
+  showAdPlaceholder: true,
+  adPlaceholderText: "PLACEHOLDER\nFOR ADs",
+};

package/templates/components/molecules/EquipmentMegaMenu/index.js

@@ -0,0 +1,5 @@
+export { EquipmentMegaMenu, default } from "./EquipmentMegaMenu";
+export {
+  equipmentMegaMenuDefaultProps,
+  equipmentMegaMenuPropTypes,
+} from "./EquipmentMegaMenu.propTypes";

package/templates/components/molecules/FullScreenNavOverlay/FullScreenNavOverlay.jsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  fullScreenNavOverlayDefaultProps,
+  fullScreenNavOverlayPropTypes,
+} from "./FullScreenNavOverlay.propTypes";
+
+const SLIDE_CLASSES = {
+  right: {
+    open: "translate-x-0",
+    closed: "translate-x-full",
+  },
+  left: {
+    open: "translate-x-0",
+    closed: "-translate-x-full",
+  },
+  top: {
+    open: "translate-y-0",
+    closed: "-translate-y-full",
+  },
+  none: {
+    open: "translate-x-0 translate-y-0 opacity-100",
+    closed: "translate-x-0 translate-y-0 opacity-0",
+  },
+};
+
+/**
+ * FullScreenNavOverlay — fixed full-viewport navigation shell with slide transitions.
+ * Handles body scroll lock and Escape-to-close.
+ *
+ * @param {object} props - See FullScreenNavOverlay.propTypes.js
+ */
+export function FullScreenNavOverlay({
+  isOpen = fullScreenNavOverlayDefaultProps.isOpen,
+  onClose,
+  slideFrom = fullScreenNavOverlayDefaultProps.slideFrom,
+  mode = fullScreenNavOverlayDefaultProps.mode,
+  showBackdrop = fullScreenNavOverlayDefaultProps.showBackdrop,
+  ariaLabel = fullScreenNavOverlayDefaultProps.ariaLabel,
+  className = "",
+  panelClassName = "",
+  backdropClassName = "",
+  children,
+}) {
+  const slide = SLIDE_CLASSES[slideFrom] ?? SLIDE_CLASSES.right;
+  const isFixed = mode === "fixed";
+
+  useEffect(() => {
+    if (!isFixed || !isOpen) return undefined;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isFixed, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const handler = (event) => {
+      if (event.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, onClose]);
+
+  if (!isOpen && slideFrom === "none") return null;
+
+  return (
+    <div
+      className={[
+        isFixed ? "fixed inset-0 z-50" : "absolute inset-0 z-20",
+        isOpen ? "pointer-events-auto" : "pointer-events-none",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      aria-hidden={!isOpen}
+    >
+      {showBackdrop ? (
+        <div
+          aria-hidden="true"
+          onClick={onClose}
+          className={[
+            "absolute inset-0 bg-black/40 transition-opacity duration-500 ease-out motion-reduce:transition-none",
+            isOpen ? "opacity-100" : "opacity-0",
+            backdropClassName,
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        />
+      ) : null}
+
+      <nav
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        aria-hidden={!isOpen}
+        className={[
+          "absolute inset-0 flex transition-transform duration-500 ease-out motion-reduce:transition-none",
+          slideFrom === "none"
+            ? "transition-opacity duration-500 ease-out motion-reduce:transition-none"
+            : "",
+          isOpen ? slide.open : slide.closed,
+          panelClassName,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {children}
+      </nav>
+    </div>
+  );
+}
+
+FullScreenNavOverlay.propTypes = fullScreenNavOverlayPropTypes;
+
+export default FullScreenNavOverlay;

package/templates/components/molecules/FullScreenNavOverlay/FullScreenNavOverlay.propTypes.js

@@ -0,0 +1,34 @@
+import PropTypes from "prop-types";
+
+export const fullScreenNavOverlayPropTypes = {
+  /** Controls overlay visibility. */
+  isOpen: PropTypes.bool,
+  /** Called when the overlay should close (Escape, optional backdrop). */
+  onClose: PropTypes.func,
+  /** Slide direction on enter/exit: right, left, top, or none (fade only). */
+  slideFrom: PropTypes.oneOf(["right", "left", "top", "none"]),
+  /**
+   * `contained` — absolute within a relative parent (gallery / Storybook safe).
+   * `fixed` — full viewport overlay (production page use).
+   */
+  mode: PropTypes.oneOf(["contained", "fixed"]),
+  /** Render a dimmed backdrop behind the panel. */
+  showBackdrop: PropTypes.bool,
+  /** Accessible label for the dialog region. */
+  ariaLabel: PropTypes.string,
+  /** Extra classes on the outer fixed wrapper. */
+  className: PropTypes.string,
+  /** Extra classes on the sliding panel. */
+  panelClassName: PropTypes.string,
+  /** Extra classes on the backdrop. */
+  backdropClassName: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export const fullScreenNavOverlayDefaultProps = {
+  isOpen: false,
+  slideFrom: "right",
+  mode: "contained",
+  showBackdrop: false,
+  ariaLabel: "Navigation menu",
+};

package/templates/components/molecules/FullScreenNavOverlay/index.js

@@ -0,0 +1,2 @@
+export { FullScreenNavOverlay } from "./FullScreenNavOverlay";
+export { default } from "./FullScreenNavOverlay";

package/templates/components/molecules/MobileNavDrawer/MobileNavDrawer.jsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useEffect } from "react";
+
+function CloseIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <path
+        d="M18 6L6 18M6 6L18 18"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+/**
+ * MobileNavDrawer — slide-in navigation panel from the right edge.
+ * Renders a semi-transparent backdrop and a white drawer with nav links.
+ *
+ * @param {object}   props
+ * @param {boolean}  props.isOpen     - Controls visibility.
+ * @param {Function} props.onClose    - Called when backdrop or close button is clicked.
+ * @param {Array}    props.navItems   - [{ label, href?, onClick? }]
+ * @param {string}   [props.accentColor] - Optional border/highlight colour (hex or CSS value).
+ */
+export function MobileNavDrawer({ isOpen, onClose, navItems = [], accentColor }) {
+  /* Prevent body scroll while drawer is open */
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  /* Close on Escape key */
+  useEffect(() => {
+    if (!isOpen) return undefined;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [isOpen, onClose]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        aria-hidden="true"
+        onClick={onClose}
+        className={[
+          "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-300 ease-out",
+          isOpen ? "opacity-100" : "pointer-events-none opacity-0",
+        ].join(" ")}
+      />
+
+      {/* Drawer panel */}
+      <nav
+        role="dialog"
+        aria-modal="true"
+        aria-label="Navigation menu"
+        className={[
+          "fixed right-0 top-0 z-50 flex h-full w-72 flex-col bg-white shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none sm:w-80",
+          isOpen ? "translate-x-0" : "translate-x-full",
+        ].join(" ")}
+      >
+        {/* Accent stripe */}
+        {accentColor ? (
+          <div className="h-1 w-full shrink-0" style={{ backgroundColor: accentColor }} />
+        ) : null}
+
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-neutral-100 px-6 py-5">
+          <span className="text-sm font-semibold uppercase tracking-[0.08em] text-neutral-400">
+            Menu
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close menu"
+            className="rounded-lg p-2 text-neutral-500 transition-colors duration-200 ease-out hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            <CloseIcon />
+          </button>
+        </div>
+
+        {/* Nav links */}
+        <ul className="flex-1 overflow-y-auto px-6 py-6">
+          {navItems.map((item, index) => {
+            const baseClass =
+              "flex w-full items-center py-4 text-base font-medium leading-none text-neutral-800 transition-colors duration-200 ease-out hover:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2";
+
+            const isLast = index === navItems.length - 1;
+            const wrapperClass = isLast
+              ? ""
+              : "border-b border-neutral-100";
+
+            if (item.href) {
+              return (
+                <li key={item.label} className={wrapperClass}>
+                  <a href={item.href} className={baseClass} onClick={onClose}>
+                    {item.label}
+                  </a>
+                </li>
+              );
+            }
+
+            return (
+              <li key={item.label} className={wrapperClass}>
+                <button
+                  type="button"
+                  className={baseClass}
+                  onClick={() => {
+                    item.onClick?.();
+                    onClose?.();
+                  }}
+                >
+                  {item.label}
+                </button>
+              </li>
+            );
+          })}
+
+          {navItems.length === 0 && (
+            <li className="py-4 text-sm text-neutral-400">No items</li>
+          )}
+        </ul>
+      </nav>
+    </>
+  );
+}
+
+export default MobileNavDrawer;

package/templates/components/molecules/MobileNavDrawer/index.js

@@ -0,0 +1,2 @@
+export { MobileNavDrawer } from "./MobileNavDrawer";
+export { default } from "./MobileNavDrawer";