@syscore/ui-library 1.3.6 → 1.4.0

package/client/components/ui/standard-navigation.tsx

@@ -0,0 +1,578 @@
+import * as React from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { cn } from "@/lib/utils";
+import { UtilityClose } from "../icons/UtilityClose";
+import { NavBullet } from "../icons/NavBullet";
+import { Button } from "@/components/ui/button";
+import { StandardLogo } from "../icons/StandardLogo";
+import { NavLogo } from "../icons/NavLogo";
+
+const ALPHA_PATH =
+  "M5.3387 0.0229882C5.37971 0.0229882 5.45295 0.0199228 5.5584 0.0137925C5.66386 0.00459714 5.74442 0 5.80007 0C6.72867 0 7.49908 0.269732 8.11131 0.809196C8.72354 1.34559 9.14097 2.09195 9.3636 3.04828C9.44855 3.47433 9.49835 3.96628 9.513 4.52414V5.16782C10.2014 4.07663 10.7287 2.85517 11.0948 1.50345C11.1505 1.29808 11.1959 1.17701 11.2311 1.14023C11.2662 1.10345 11.3761 1.08506 11.5606 1.08506C11.8535 1.08506 12 1.13563 12 1.23678C12 1.25211 11.9722 1.37778 11.9165 1.61379C11.5093 3.24751 10.7931 4.77701 9.76785 6.2023L9.53497 6.51034L9.55694 7.04368C9.59795 8.23295 9.72391 8.9318 9.93482 9.14023C9.97583 9.16782 10.0388 9.18161 10.1238 9.18161C10.32 9.15402 10.5031 9.06973 10.673 8.92874C10.8429 8.78774 10.963 8.62222 11.0333 8.43218C11.0597 8.32797 11.0948 8.26513 11.1388 8.24368C11.1798 8.22222 11.2852 8.21149 11.4551 8.21149C11.7364 8.21149 11.877 8.27739 11.877 8.40919C11.877 8.49808 11.8345 8.63142 11.7495 8.8092C11.5943 9.13103 11.3687 9.4069 11.0729 9.63678C10.777 9.8636 10.4475 9.97701 10.0842 9.97701H9.93482C8.97986 9.97701 8.3398 9.44674 8.01465 8.38621L7.95313 8.23448C7.20615 8.74942 6.79165 9.02835 6.70963 9.07126C5.66679 9.69042 4.61809 10 3.56353 10C2.56756 10 1.76346 9.70575 1.15123 9.11724C0.538997 8.52874 0.162578 7.75632 0.02197 6.8C0.0073233 6.71111 0 6.54866 0 6.31264C0 5.9295 0.02197 5.62146 0.0659099 5.38851C0.276822 4.06437 0.887587 2.8751 1.89821 1.82069C2.91175 0.769348 4.05859 0.170115 5.3387 0.0229882ZM1.83669 7.10805C1.83669 7.73946 1.9978 8.24368 2.32003 8.62069C2.64518 8.99464 3.09484 9.18161 3.66899 9.18161C4.03515 9.18161 4.44379 9.12337 4.89491 9.0069C5.6829 8.80153 6.44892 8.4046 7.19297 7.81609C7.29257 7.74253 7.38777 7.66437 7.47858 7.58161C7.56939 7.50192 7.64262 7.43295 7.69828 7.37471L7.78176 7.28276L7.76419 7.08506C7.76419 6.95326 7.75979 6.75862 7.75101 6.50115C7.74515 6.24368 7.74222 5.98927 7.74222 5.73793C7.72757 5.18008 7.71732 4.74636 7.71146 4.43678C7.70267 4.1272 7.67338 3.74866 7.62358 3.30115C7.57671 2.85364 7.5108 2.50728 7.42585 2.26207C7.3409 2.01992 7.22519 1.77471 7.07873 1.52644C6.92933 1.2751 6.73892 1.09425 6.50751 0.983908C6.27609 0.873563 6.00513 0.81839 5.69462 0.81839C4.72501 0.81839 3.87404 1.35479 3.14171 2.42759C2.79019 2.97318 2.49579 3.71647 2.25851 4.65747C1.9773 5.73333 1.83669 6.55019 1.83669 7.10805Z";
+
+const PATH_LENGTH = 60;
+
+const AlphaIcon = ({ dark }: { dark?: boolean }) => {
+  if (dark) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="10"
+        viewBox="0 0 12 10"
+        fill="none"
+        className="mt-1.5"
+        style={{ overflow: "visible" }}
+      >
+        <path d={ALPHA_PATH} fill="currentColor" />
+        {/* Animated stroke trace */}
+        {/* <motion.path
+          d={ALPHA_PATH}
+          fill="none"
+          stroke="#282A31"
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          initial={{ strokeDashoffset: PATH_LENGTH }}
+          animate={{ strokeDashoffset: -PATH_LENGTH }}
+          style={{ strokeDasharray: `8 ${PATH_LENGTH - 8}` }}
+          transition={{
+            duration: 4,
+            repeat: Infinity,
+            ease: "linear",
+          }}
+        /> */}
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="10"
+      viewBox="0 0 12 10"
+      fill="none"
+      className="mt-1.5"
+      style={{ overflow: "visible" }}
+    >
+      {/* Base fill with gradient */}
+      <path
+        d={ALPHA_PATH}
+        fill="url(#paint0_linear_10081_30848)"
+        opacity="0.4"
+      />
+      {/* Animated stroke trace with gradient */}
+      <motion.path
+        d={ALPHA_PATH}
+        fill="none"
+        stroke="url(#stroke_gradient)"
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        initial={{ strokeDashoffset: PATH_LENGTH }}
+        animate={{ strokeDashoffset: -PATH_LENGTH }}
+        style={{ strokeDasharray: `8 ${PATH_LENGTH - 8}` }}
+        transition={{
+          duration: 2,
+          repeat: Infinity,
+          repeatDelay: 8,
+          ease: "linear",
+        }}
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_10081_30848"
+          x1="-3.27254"
+          y1="4.99923"
+          x2="6.36738"
+          y2="-2.36962"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#8AEFDB" />
+          <stop offset="0.5" stopColor="#D4BACE" />
+          <stop offset="1" stopColor="#CBE0F1" />
+        </linearGradient>
+        <linearGradient
+          id="stroke_gradient"
+          x1="0"
+          y1="0"
+          x2="12"
+          y2="10"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#8AEFDB" />
+          <stop offset="0.5" stopColor="#D4BACE" />
+          <stop offset="1" stopColor="#CBE0F1" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+// Define a Link component type that matches common routing patterns
+export type LinkComponent = React.ComponentType<{
+  href: string;
+  className?: string;
+  "aria-label"?: string;
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent) => void;
+}>;
+
+// Navigation link structure supporting nested links
+export interface NavLinkItem {
+  label: string;
+  href?: string;
+  badge?: string;
+  bulletColor?: string;
+  children?: NavLinkItem[];
+}
+
+// Navigation section structure for tray content
+export interface NavSection {
+  heading?: string;
+  headingGradient?: string;
+  columns?: NavColumn[];
+}
+
+export interface NavColumn {
+  title?: string;
+  links: NavLinkItem[];
+}
+
+// Main navigation item that can have nested content
+export interface NavItem {
+  label: string;
+  href?: string;
+  section?: NavSection;
+}
+
+interface NavigationProps {
+  navLinks?: NavItem[];
+  logo?: React.ComponentType<{ className?: string; dark?: boolean }>;
+  userIcon?: React.ComponentType<{ className?: string }>;
+  beforeActions?: React.ReactNode; // Slot for custom items before user icon (e.g., language switcher)
+  userDropdown?: React.ReactNode; // Dropdown content to show when user icon is clicked
+  isStrategy?: boolean;
+  Link?: LinkComponent; // Optional Link component from routing library
+  onLinkClick?: (href: string) => void; // Fallback callback for navigation
+  onClose?: () => void;
+}
+
+export const StandardNavigation: React.FC<NavigationProps> = ({
+  navLinks = [],
+  logo: Logo,
+  userIcon: UserIcon,
+  beforeActions,
+  userDropdown,
+  isStrategy = false,
+  Link: LinkComponent,
+  onLinkClick,
+  onClose,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState<number | null>(null);
+  const [isUserDropdownOpen, setIsUserDropdownOpen] = React.useState(false);
+
+  const containerRef = React.useRef<HTMLElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const menuItemsRef = React.useRef<HTMLDivElement>(null);
+  const overlayRef = React.useRef<HTMLDivElement>(null);
+  const userDropdownRef = React.useRef<HTMLDivElement>(null);
+
+  const handleMouseLeave = () => {
+    setIsOpen(false);
+    setActiveItem(null);
+  };
+
+  const handleNavItemMouseEnter = (index: number) => {
+    const item = navLinks[index];
+    if (item?.section) {
+      setIsOpen(true);
+      setActiveItem(index + 1);
+    }
+  };
+
+  const handleUserIconClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (userDropdown) {
+      setIsUserDropdownOpen(!isUserDropdownOpen);
+    }
+  };
+
+  // Close user dropdown when clicking outside
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (
+        userDropdownRef.current &&
+        !userDropdownRef.current.contains(target)
+      ) {
+        setIsUserDropdownOpen(false);
+      }
+    };
+
+    if (isUserDropdownOpen) {
+      // Use setTimeout to avoid immediate closure on the click that opened it
+      setTimeout(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+      }, 0);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }
+  }, [isUserDropdownOpen]);
+
+  // Internal NavLink component that handles different routing scenarios
+  const NavLink: React.FC<{
+    href: string;
+    className?: string;
+    "aria-label"?: string;
+    children: React.ReactNode;
+  }> = ({ href, className, "aria-label": ariaLabel, children }) => {
+    // If Link component is provided, use it
+    if (LinkComponent) {
+      return (
+        <LinkComponent href={href} className={className} aria-label={ariaLabel}>
+          {children}
+        </LinkComponent>
+      );
+    }
+
+    // If onLinkClick callback is provided, use anchor with click handler
+    if (onLinkClick) {
+      return (
+        <a
+          href={href}
+          className={className}
+          aria-label={ariaLabel}
+          onClick={(e) => {
+            e.preventDefault();
+            onLinkClick(href);
+          }}
+        >
+          {children}
+        </a>
+      );
+    }
+
+    // Default: plain anchor tag (browser navigation)
+    return (
+      <a href={href} className={className} aria-label={ariaLabel}>
+        {children}
+      </a>
+    );
+  };
+
+  // Render a navigation link item
+  const renderNavLinkItem = (link: NavLinkItem) => {
+    const href = link.href || "#";
+    const hasBullet = link.bulletColor !== undefined;
+    const hasBadge = !!link.badge;
+    const isSmall = hasBullet || link.children;
+
+    if (hasBullet) {
+      return (
+        <div className="navigation-tray-bullet-item">
+          {link.bulletColor && link.bulletColor !== "" ? (
+            <NavBullet color={link.bulletColor} />
+          ) : (
+            <div className="navigation-tray-bullet" />
+          )}
+          <NavLink
+            href={href}
+            className="navigation-tray-link-small"
+          >
+            {link.label}
+          </NavLink>
+        </div>
+      );
+    }
+
+    if (hasBadge) {
+      return (
+        <NavLink
+          href={href}
+          className="navigation-tray-link navigation-tray-link--with-badge"
+        >
+          {link.label}
+          <span className="navigation-tray-badge">{link.badge}</span>
+        </NavLink>
+      );
+    }
+
+    return (
+      <NavLink
+        href={href}
+        className={isSmall ? "navigation-tray-link-small" : "navigation-tray-link"}
+      >
+        {link.label}
+      </NavLink>
+    );
+  };
+
+  // Render a navigation column
+  const renderNavColumn = (column: NavColumn) => {
+    if (!column.links || column.links.length === 0) return null;
+
+    const hasSpacing = column.links.some(
+      (link) => !link.bulletColor && !link.children,
+    );
+
+    return (
+      <div key={column.title || "column"} className="navigation-tray-column">
+        {column.title && (
+          <h3 className="navigation-tray-column-title">{column.title}</h3>
+        )}
+        <ul
+          className={cn(
+            "navigation-tray-column-list",
+            hasSpacing && "navigation-tray-column-list--spacing-5",
+          )}
+        >
+          {column.links.map((link, idx) => (
+            <li key={idx}>{renderNavLinkItem(link)}</li>
+          ))}
+        </ul>
+      </div>
+    );
+  };
+
+  // Render the active tray section
+  const renderTraySection = () => {
+    if (!activeItem) return null;
+
+    const activeNavItem = navLinks[activeItem - 1];
+    if (!activeNavItem?.section) return null;
+
+    const section = activeNavItem.section;
+
+    return (
+      <div className="navigation-tray-section">
+        {section.heading && (
+          <h2
+            className="navigation-tray-heading"
+            style={
+              section.headingGradient
+                ? {
+                    background: section.headingGradient,
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    backgroundClip: "text",
+                  }
+                : undefined
+            }
+          >
+            {section.heading}
+          </h2>
+        )}
+
+        {section.columns && section.columns.length > 0 && (
+          <div className="navigation-tray-columns">
+            {section.columns.map((column, idx) => renderNavColumn(column))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <nav
+      ref={containerRef}
+      className={cn("navigation", isStrategy && "navigation--strategy")}
+      data-strategy={isStrategy}
+      onMouseLeave={handleMouseLeave}
+    >
+      {!isStrategy && (
+        <div
+          ref={overlayRef}
+          className="navigation-overlay"
+          data-open={isOpen}
+        />
+      )}
+
+      <div className="navigation-container">
+        <div className="navigation-logo-container">
+          {isStrategy ? (
+            <Button
+              className="navigation-close-button"
+              size="icon"
+              onClick={(e) => {
+                e.preventDefault();
+                if (onClose) {
+                  onClose();
+                } else if (onLinkClick) {
+                  onLinkClick("/");
+                }
+              }}
+            >
+              <UtilityClose className="navigation-close-icon" />
+            </Button>
+          ) : null}
+
+          <NavLink
+            href="/"
+            className={cn(
+              "navigation-logo-link",
+              isStrategy && "navigation-logo-link--strategy",
+            )}
+            data-strategy={isStrategy}
+            aria-label="Home"
+          >
+            {Logo ? (
+              <>
+            
+             <NavLogo dark={isStrategy} />
+             <StandardLogo className={cn(!isStrategy ? "text-white" : "text-black")} />
+             <AlphaIcon dark={isStrategy} />
+             </>
+           
+            ) : null}
+            </NavLink>
+        </div>
+
+        {!isStrategy ? (
+          <div className="navigation-nav-container">
+            <ul className="navigation-nav-list">
+              {navLinks.map((item, index) => (
+                <li
+                  key={index}
+                  className="navigation-nav-item"
+                  onMouseEnter={() => handleNavItemMouseEnter(index)}
+                >
+                  {item.href ? (
+                    <NavLink href={item.href} className="navigation-nav-link">
+                      {item.label}
+                    </NavLink>
+                  ) : (
+                    <span className="navigation-nav-link">{item.label}</span>
+                  )}
+
+                  {/* Underline */}
+                  {activeItem === index + 1 && (
+                    <motion.div
+                      id="underline"
+                      className="navigation-underline"
+                      layoutId="underline"
+                      transition={{ duration: 0.2, ease: "easeOut" }}
+                    >
+                      <div
+                        className="navigation-underline-circle navigation-underline-circle--gradient"
+                        style={{
+                          width: "10px",
+                          height: "5px",
+                          borderBottomLeftRadius: "100px",
+                          borderBottomRightRadius: "100px",
+                          borderBottom: "0",
+                          boxSizing: "border-box",
+                        }}
+                      />
+                    </motion.div>
+                  )}
+                  {index === 0 && (
+                    <div
+                      className="navigation-underline navigation-underline--static"
+                      style={{ transition: "all 0.2s ease-out" }}
+                    >
+                      <div
+                        className="navigation-underline-circle navigation-underline-circle--white"
+                        style={{
+                          width: "10px",
+                          height: "5px",
+                          borderTopLeftRadius: "100px",
+                          borderTopRightRadius: "100px",
+                          borderBottom: "0",
+                          boxSizing: "border-box",
+                        }}
+                      />
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+
+        <div className="navigation-actions">
+          {beforeActions && (
+            <div className="navigation-actions-before">{beforeActions}</div>
+          )}
+          <div className="navigation-account-wrapper" ref={userDropdownRef}>
+            {userDropdown ? (
+              <button
+                type="button"
+                aria-label="Account menu"
+                aria-expanded={isUserDropdownOpen}
+                className={cn(
+                  "navigation-account-link",
+                  isUserDropdownOpen && "navigation-account-link--open",
+                )}
+                data-open={isOpen}
+                data-strategy={isStrategy}
+                onClick={handleUserIconClick}
+              >
+                {UserIcon ? (
+                  <UserIcon
+                    className={cn(
+                      "navigation-account-icon",
+                      isStrategy
+                        ? "navigation-account-icon--strategy"
+                        : "navigation-account-icon--default",
+                    )}
+                  />
+                ) : (
+                  <div className="navigation-account-icon-placeholder">User</div>
+                )}
+              </button>
+            ) : (
+              <NavLink
+                href="/"
+                aria-label="Account link"
+                className="navigation-account-link"
+                data-open={isOpen}
+                data-strategy={isStrategy}
+              >
+                {UserIcon ? (
+                  <UserIcon
+                    className={cn(
+                      "navigation-account-icon",
+                      isStrategy
+                        ? "navigation-account-icon--strategy"
+                        : "navigation-account-icon--default",
+                    )}
+                  />
+                ) : (
+                  <div className="navigation-account-icon-placeholder">User</div>
+                )}
+              </NavLink>
+            )}
+            {isUserDropdownOpen && userDropdown && (
+              <div className="navigation-user-dropdown">{userDropdown}</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {isOpen && <div className="navigation-divider" />}
+
+      {/* Tray */}
+      <div ref={menuRef} className="navigation-tray" data-open={isOpen}>
+        <div className="navigation-tray-content">
+          <div ref={menuItemsRef} className="navigation-tray-grid">
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={activeItem ? activeItem : "empty"}
+                initial={{ y: 10, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: -10, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                {renderTraySection()}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};

package/client/global.css

@@ -6054,7 +6054,7 @@ body {
 }
 
 .navigation-overlay[data-open="false"] {
-  transform: translateY(calc(-100% + 56px));
+  transform: translateY(calc(-100% + 64px));
   background-color: rgba(0, 0, 0, 0.16);
 }
 
@@ -6066,11 +6066,16 @@ body {
   padding-left: 2rem;
   padding-right: 2rem;
   display: flex;
-  height: 3.5rem;
+  height: 4rem;
   align-items: center;
   justify-content: space-between;
 }
 
+.navigation--strategy {
+  background-color: var(--color-gray-50, #f9f9fa);
+  border-bottom: 1px solid var(--color-gray-100, #eff1f2);
+}
+
 .navigation-logo-container {
   display: flex;
   height: 100%;
@@ -6088,6 +6093,7 @@ body {
   align-items: center;
   transition: transform 300ms ease-in-out;
   will-change: transform;
+  gap: 6px;
 }
 
 .navigation-logo-link[data-strategy="true"] {
@@ -6154,10 +6160,16 @@ body {
   justify-content: center;
   border-radius: 9999px;
   transition: background-color 200ms;
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.navigation-account-link--strategy {
+  background-color: var(--color-white, #fff);
+  border: 1px solid var(--color-gray-100, #eff1f2);
 }
 
 .navigation-account-link[data-open="false"] {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: rgba(255, 255, 255, 0.12);
 }
 
 .navigation-account-link[data-open="true"] {