@stackshift-ui/navigation 6.0.13 → 6.1.0-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/navigation",
   "description": "",
-  "version": "6.0.13",
+  "version": "6.1.0-alpha.1",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,20 +29,28 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.10",
-    "@stackshift-ui/eslint-config": "6.0.10"
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
     "@portabletext/react": "^3.1.0",
-    "@stackshift-ui/text": "6.0.11",
+    "@react-spring/web": "^10.0.1",
+    "@uidotdev/usehooks": "^2.4.1",
+    "react-icons": "^5.3.0",
+    "react-sticky-el": "^2.1.1",
+    "@stackshift-ui/container": "6.0.11",
     "@stackshift-ui/button": "6.0.11",
     "@stackshift-ui/scripts": "6.0.10",
     "@stackshift-ui/link": "6.0.11",
-    "@stackshift-ui/image": "6.0.11",
-    "@stackshift-ui/section": "6.0.11",
     "@stackshift-ui/flex": "6.0.11",
-    "@stackshift-ui/container": "6.0.11",
-    "@stackshift-ui/system": "6.0.11"
+    "@stackshift-ui/section": "6.0.11",
+    "@stackshift-ui/text": "6.0.11",
+    "@stackshift-ui/grid": "6.0.11",
+    "@stackshift-ui/image": "6.0.11",
+    "@stackshift-ui/system": "6.0.11",
+    "@stackshift-ui/heading": "6.0.11",
+    "@stackshift-ui/social-icons": "6.0.12"
   },
   "peerDependencies": {
     "@stackshift-ui/system": ">=6.0.11",

package/src/context/megaNavContext.tsx

@@ -0,0 +1,78 @@
+import { Context, createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+
+export interface MegaNavContextValues {
+  currentDropdown: string;
+  showDropdown: boolean;
+  showMobileMenu: boolean;
+  setShowDropdown: (state: boolean) => void;
+  setCurrentDropdown: (dropdown: string) => void;
+  setShowMobileMenu: (state: boolean) => void;
+}
+
+export const MegaNavContext: Context<MegaNavContextValues> = createContext<MegaNavContextValues>({
+  currentDropdown: "",
+  showDropdown: false,
+  showMobileMenu: false,
+  setShowDropdown: () => {},
+  setCurrentDropdown: () => {},
+  setShowMobileMenu: () => {},
+});
+
+export function MegaNavContextProvider({ children }: { children: React.ReactNode }) {
+  const [currentDropdown, setCurrentDropdown] = useState<string>("");
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [showMobileMenu, setShowMobileMenu] = useState(false);
+  const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleDropdownClick = () => {
+    setShowDropdown(!showDropdown);
+  };
+
+  const handleCurrentDropdown = (dropdown: string) => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+    }
+
+    if (dropdown === "") {
+      closeTimeoutRef.current = setTimeout(() => {
+        setCurrentDropdown("");
+      }, 200);
+    } else {
+      setCurrentDropdown(dropdown);
+    }
+  };
+
+  const handleMobileMenuClick = () => {
+    setShowMobileMenu(!showMobileMenu);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const values = useMemo(
+    () => ({
+      currentDropdown,
+      showDropdown,
+      showMobileMenu,
+      setShowDropdown: handleDropdownClick,
+      setCurrentDropdown: handleCurrentDropdown,
+      setShowMobileMenu: handleMobileMenuClick,
+    }),
+    [currentDropdown, showDropdown, showMobileMenu],
+  );
+
+  return <MegaNavContext.Provider value={values}>{children}</MegaNavContext.Provider>;
+}
+
+export function useMegaNavContext() {
+  const context = useContext(MegaNavContext);
+  if (context === undefined) {
+    throw new Error("useMegaNavContext must be used within a MegaNavContextProvider");
+  }
+  return context;
+}

package/src/helper/index.tsx

@@ -0,0 +1,130 @@
+import { Link } from "@stackshift-ui/link";
+import { ConditionalLinkTypes, Logo } from "../types";
+
+export const logoLink = (logo: Logo) => {
+  if (logo?.internalLink && logo?.type === "linkInternal") {
+    if (logo?.internalLink?.toLowerCase()?.includes("home")) {
+      return "/";
+    }
+    return `/${logo.internalLink}`;
+  } else if (logo?.externalLink && logo?.type === "linkExternal") {
+    return logo?.externalLink ?? "/";
+  } else {
+    return "/";
+  }
+};
+
+export const ConditionalLink = ({
+  className,
+  ariaLabel,
+  style = {},
+  children,
+  link,
+  target,
+}: ConditionalLinkTypes) => {
+  const defaultStyle =
+    "inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-primary hover:bg-primary-foreground text-gray-50 font-bold leading-loose outline-none transition duration-200";
+
+  if (!link?.internalLink && !link?.externalLink) {
+    return (
+      <a
+        className={className ?? defaultStyle}
+        aria-label={ariaLabel}
+        //style={style}
+        target={target}
+        href="/page-not-found">
+        {children}
+      </a>
+    );
+  } else if (
+    link?.type === "linkInternal" &&
+    // link?.internalLink?.toLowerCase()?.includes("home")
+    link?.internalLink?.toLowerCase() === "home"
+  ) {
+    return (
+      <Link
+        href={link?.referenceType === "projects" ? "/projects" : "/"}
+        aria-label={ariaLabel}
+        className={className ?? defaultStyle}
+        //style={style}
+        target={target}>
+        {children}
+      </Link>
+    );
+  } else if (link?.type === "linkInternal") {
+    let hrefPath = "";
+
+    switch (link?.referenceType) {
+      case "projects":
+        hrefPath = `/projects/${link?.internalLink}`;
+        break;
+      case "commercial":
+        hrefPath = `/projects/commercial/${link?.internalLink}`;
+        break;
+      case "residential":
+        hrefPath = `/projects/residential/${link?.internalLink}`;
+        break;
+      case "landscape":
+        hrefPath = `/projects/landscape/${link?.internalLink}`;
+        break;
+      case "public":
+        hrefPath = `/projects/public/${link?.internalLink}`;
+        break;
+      case "teaching":
+        hrefPath = `/projects/teaching/${link?.internalLink}`;
+        break;
+      case "designInMotion":
+        hrefPath = `/projects/future-projects/${link?.internalLink}`;
+        break;
+      case "renovation":
+        hrefPath = `/projects/residential/renovation/${link?.internalLink}`;
+        break;
+      case "newConstruction":
+        hrefPath = `/projects/residential/new-construction/${link?.internalLink}`;
+        break;
+      case "ourTeam":
+        hrefPath = `/our-team/${link?.internalLink}`;
+        break;
+      case "recognition":
+        hrefPath = `/recognition/${link?.internalLink}`;
+        break;
+
+      default:
+        hrefPath = `/${link?.internalLink}`;
+    }
+
+    return (
+      <Link
+        href={hrefPath}
+        aria-label={ariaLabel}
+        className={className ?? defaultStyle}
+        //style={style}
+        target={target}>
+        {children}
+      </Link>
+    );
+  } else if (link?.type === "linkExternal") {
+    return (
+      <a
+        aria-label={ariaLabel}
+        className={className ?? defaultStyle}
+        //style={style}
+        href={link?.externalLink ?? ""}
+        target={target}
+        rel={link?.linkTarget === "_blank" ? "noopener noreferrer" : undefined}>
+        {children}
+      </a>
+    );
+  } else {
+    return (
+      <Link
+        href="/"
+        aria-label={ariaLabel}
+        className={className ?? defaultStyle}
+        //style={style}
+        target={target}>
+        {children}
+      </Link>
+    );
+  }
+};

package/src/helper.ts

@@ -0,0 +1,14 @@
+import { Logo } from "./types";
+
+export function logoLink(logo?: Logo): string {
+  if (!logo) return "/";
+  return logo.linkExternal || "/";
+}
+
+export function getImageProperty(image?: any) {
+  if (!image) return { width: 0, height: 0 };
+  return {
+    width: image.width || 0,
+    height: image.height || 0,
+  };
+}

package/src/index.ts

@@ -7,3 +7,6 @@ export * from "./navigation_b";
 export * from "./navigation_c";
 export * from "./navigation_d";
 // export * from "./navigation_e";
+export * from "./navigation_f";
+export * from "./navigation_g";
+export * from "./navigation_h";

package/src/navigation.tsx

@@ -1,11 +1,22 @@
 import { lazy } from "react";
-import { LabeledRoute, LabeledRouteWithKey, Logo, SectionsProps } from "./types";
+import {
+  LabeledRoute,
+  LabeledRouteWithKey,
+  Logo,
+  Logos,
+  MegaMenu,
+  SectionsProps,
+  SocialLink,
+} from "./types";
 
 const Variants = {
   variant_a: lazy(() => import("./navigation_a")),
   variant_b: lazy(() => import("./navigation_b")),
   variant_c: lazy(() => import("./navigation_c")),
   variant_d: lazy(() => import("./navigation_d")),
+  variant_f: lazy(() => import("./navigation_f")),
+  variant_g: lazy(() => import("./navigation_g")),
+  variant_h: lazy(() => import("./navigation_h")),
 };
 
 export interface ResponsiveNavLinksProps {
@@ -19,10 +30,18 @@ export interface ResponsiveNavLinksProps {
 export interface NavigationProps {
   template?: any;
   logo?: Logo;
+  smallLogo?: Logo;
+  logos?: Logos[];
   links?: LabeledRouteWithKey[];
   primaryButton?: LabeledRoute;
   secondaryButton?: LabeledRoute;
   banner?: any;
+  multipleLinks?: any;
+  title?: string;
+  socialMedia?: SocialLink[];
+  dropdownMenu?: LabeledRouteWithKey[];
+  iconLinks?: LabeledRouteWithKey[];
+  megaMenu?: MegaMenu[];
 }
 
 const displayName = "Navigation";
@@ -33,10 +52,19 @@ export const Navigation: React.FC<SectionsProps> = ({ data }) => {
 
   const props = {
     logo: data?.variants?.logo ?? undefined,
+    smallLogo: data?.variants?.smallLogo ?? undefined,
     links: data?.variants?.routes ?? undefined,
     primaryButton: data?.variants?.primaryButton ?? undefined,
     secondaryButton: data?.variants?.secondaryButton ?? undefined,
     banner: data?.variants?.banner ?? undefined,
+    multipleLinks: data?.variants?.multipleLinks ?? undefined,
+    title: data?.variants?.title ?? undefined,
+    dropdownMenu: data?.variants?.dropdownMenu ?? undefined,
+    logos: data?.variants?.logos ?? undefined,
+    socialMedia: data?.variants?.socialMedia ?? undefined,
+    socialLinks: data?.variants?.socialLinks ?? undefined,
+    iconLinks: data?.variants?.iconLinks ?? undefined,
+    megaMenu: data?.variants?.megaMenu ?? undefined,
   };
 
   return Variant ? <Variant {...props} /> : null;