[MOL-16700][AM] Add local nav dropdown and local nav menu components

src/local-nav/index.ts

@@ -0,0 +1,3 @@
+export * from "./local-nav-dropdown/local-nav-dropdown";
+export * from "./local-nav-menu/local-nav-menu";
+export * from "./types";

src/local-nav/internal-types.tsx

@@ -0,0 +1,13 @@
+import { LocalNavItemProps } from "./types";
+
+export interface LocalNavItemComponentProps {
+    handleClick: React.MouseEventHandler<HTMLLIElement>;
+    isSelected: boolean;
+    item: LocalNavItemProps;
+    renderItem?:
+        | ((
+              item: LocalNavItemProps,
+              renderProps: { selected: boolean }
+          ) => React.ReactNode)
+        | undefined;
+}

src/local-nav/local-nav-dropdown/local-nav-dropdown.styles.tsx

@@ -0,0 +1,127 @@
+import { ChevronDownIcon } from "@lifesg/react-icons/chevron-down";
+import { TickIcon } from "@lifesg/react-icons/tick";
+import styled, { css } from "styled-components";
+import { Color } from "../../color";
+import { Text } from "../../text/text";
+
+// =============================================================================
+// STYLE INTERFACES, transient props are denoted with $
+// See more https://styled-components.com/docs/api#transient-props
+// =============================================================================
+interface DropdownNavStyleProps {
+    $isStickied?: boolean;
+    $stickyOffset: number;
+    $sideMargin?: number;
+}
+interface NavItemListStyleProps {
+    $viewportHeight?: number;
+}
+
+interface NavItemStyleProps {
+    $isSelected?: boolean;
+}
+interface DropdownExpandedProps {
+    $isDropdownExpanded: boolean;
+}
+
+interface NavIconStyleProps extends DropdownExpandedProps {}
+interface NavLabelStyleProps extends DropdownExpandedProps {}
+// =============================================================================
+// STYLING
+// =============================================================================
+// use #rrggbbaa format for color (D9 is 0.85 alpha)
+// LINK: https://rgbacolorpicker.com/rgba-to-hex
+export const Backdrop = styled.div`
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: ${Color.Neutral[1]}D9;
+    z-index: -1;
+`;
+
+export const LabelText = styled(Text.BodySmall)<NavItemStyleProps>`
+    margin: 0;
+    ${(props) =>
+        props.$isSelected &&
+        css`
+            color: ${Color.Primary};
+        `}
+`;
+
+export const StyledTickIcon = styled(TickIcon)`
+    color: ${Color.Primary};
+    margin: 0 8px;
+`;
+
+export const NavIcon = styled(ChevronDownIcon)<NavIconStyleProps>`
+    color: ${Color.Primary};
+    transition: transform 250ms ease-in-out;
+    transform: rotate(${(props) => (props.$isDropdownExpanded ? 180 : 0)}deg);
+`;
+
+export const NavLabel = styled.div<NavLabelStyleProps>`
+    cursor: pointer;
+    background: ${Color.Neutral[8]};
+    padding: 12px 16px;
+    box-shadow: 0px 0px 1px 1px ${Color.Neutral[5]};
+    overflow: hidden;
+    border-radius: ${(props) => (props.$isDropdownExpanded ? "0" : "4px")};
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 200ms linear;
+`;
+
+export const NavItem = styled.li<NavItemStyleProps>`
+    padding: ${(props) =>
+        props.$isSelected ? "12px 8px 12px 0" : "12px 8px 12px 32px"};
+    background: ${(props) =>
+        props.$isSelected ? Color.Accent.Light[5] : Color.Neutral[8]};
+    position: relative; /* Ensures that the tick mark is positioned relative to the selected item */
+    display: flex;
+    align-items: center; /* Vertically align text and tick */
+`;
+
+export const NavItemList = styled.ul<NavItemListStyleProps>`
+    transition: all 300ms;
+    transform-origin: top;
+    list-style-type: none;
+    padding: 0px 8px 0px 8px;
+    margin: 0;
+    background: ${Color.Neutral[8]};
+    cursor: pointer;
+    box-shadow: 0px 0px 1px 1px ${Color.Neutral[5]};
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    overflow-y: auto; /* Enables vertical scrolling */
+    max-height: ${(props) =>
+        props.$viewportHeight}px; /* Set a max height for the dropdown list */
+`;
+
+export const NavWrapper = styled.nav<DropdownNavStyleProps>`
+    display: block;
+    position: sticky;
+    top: ${(props) => props.$stickyOffset}px;
+    width: 100%;
+    z-index: 10;
+
+    ${(props) =>
+        props.$isStickied &&
+        `${NavLabel} {
+            ${props.$sideMargin && `margin: 0 -${props.$sideMargin}px;`}
+			padding: 12px 16px;
+			border-radius: 0;
+		}
+
+		${NavItemList} {
+            ${props.$sideMargin && `margin-left: -${props.$sideMargin}px;`}
+            ${props.$sideMargin && `margin-right: -${props.$sideMargin}px;`}
+			border-radius-bottom-left: 4px;
+			border-radius-bottom-right: 4px;
+
+		}
+
+		`}
+`;

src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx

@@ -0,0 +1,213 @@
+/* eslint-disable react/display-name */
+import React, { useEffect, useRef, useState } from "react";
+import { LocalNavItemComponentProps } from "../internal-types";
+import { LocalNavDropdownProps, LocalNavItemProps } from "../types";
+import {
+    Backdrop,
+    LabelText,
+    NavIcon,
+    NavItem,
+    NavItemList,
+    NavLabel,
+    NavWrapper,
+    StyledTickIcon,
+} from "./local-nav-dropdown.styles";
+
+const Component = ({
+    defaultLabel,
+    stickyOffset = 0,
+    onNavItemSelect,
+    items,
+    selectedItemIndex,
+    id,
+    "data-testid": testId,
+    className,
+    renderItem,
+}: LocalNavDropdownProps): JSX.Element => {
+    // =============================================================================
+    // CONST, STATE, REF
+    // =============================================================================
+    const detectStickyRef = useRef<HTMLSpanElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const [isStickied, setIsStickied] = useState<boolean>(false);
+    const navWrapperRef = useRef<HTMLElement>(null);
+    const [isDropdownExpanded, setIsDropdownExpanded] =
+        useState<boolean>(false);
+    const [viewportHeight, setViewportHeight] = useState(0);
+    const [dropdowntHeight, setDropdownHeight] = useState(0);
+    const [dynamicMargin, setDynamicMargin] = useState(0);
+    const navTestId = testId || "local-nav-dropdown";
+
+    const labelText =
+        selectedItemIndex >= 0 && isStickied
+            ? items[selectedItemIndex].title
+            : defaultLabel;
+
+    // =============================================================================
+    // EFFECTS, EVENT LISTENERS
+    // ============================================================================
+
+    useEffect(() => {
+        if (dropdownRef.current) {
+            const dropdownHeight =
+                dropdownRef.current.getBoundingClientRect().height;
+            setDropdownHeight(dropdownHeight);
+        }
+    }, []);
+
+    useEffect(() => {
+        setViewportHeight(window.innerHeight);
+        const handleResize = () => {
+            setViewportHeight(window.innerHeight);
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    useEffect(() => {
+        const callback = (entries: IntersectionObserverEntry[]) => {
+            const [entry] = entries;
+            setIsStickied(!entry.isIntersecting);
+        };
+
+        const observer = new IntersectionObserver(callback, {
+            threshold: 1,
+            rootMargin: `-${stickyOffset}px 0px 0px 0px`,
+        });
+
+        if (detectStickyRef.current) {
+            observer.observe(detectStickyRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, [stickyOffset]);
+
+    useEffect(() => {
+        document.body.style.overflow =
+            isDropdownExpanded && isStickied ? "hidden" : "auto";
+    }, [isDropdownExpanded, isStickied]);
+
+    useEffect(() => {
+        const adjustPadding = () => {
+            const dropdown = navWrapperRef?.current;
+            if (dropdown) {
+                const dropdownRect = dropdown.getBoundingClientRect();
+                const spaceToRight = window.innerWidth - dropdownRect.right;
+                const spaceToLeft = dropdownRect.left;
+                // Calculate the padding needed to balance the dropdown in the viewport
+                const sidePadding = Math.max(spaceToRight, spaceToLeft);
+                setDynamicMargin(sidePadding);
+            }
+        };
+        adjustPadding();
+
+        window.addEventListener("resize", adjustPadding);
+
+        return () => {
+            window.removeEventListener("resize", adjustPadding);
+        };
+    }, []);
+
+    // =============================================================================
+    // EVENT HANDLERS
+    // =============================================================================
+
+    const handleToggleDropdown = () => {
+        setIsDropdownExpanded((prev) => !prev);
+    };
+
+    const handleDismissBackdrop = () => {
+        setIsDropdownExpanded(false);
+    };
+
+    const handleNavItemClick = (
+        e: React.MouseEvent,
+        item: LocalNavItemProps,
+        index: number
+    ) => {
+        if (onNavItemSelect) {
+            onNavItemSelect(e, item, index);
+        }
+        setIsDropdownExpanded(false);
+    };
+
+    // =============================================================================
+    // RENDER FUNCTIONS
+    // =============================================================================
+
+    const renderDropdownNavItem = ({
+        handleClick,
+        isSelected,
+        item,
+        renderItem,
+    }: LocalNavItemComponentProps) => {
+        const { id, title } = item;
+
+        const renderTitle = () => {
+            if (renderItem) {
+                return renderItem(item, { selected: isSelected });
+            }
+            return (
+                <>
+                    {isSelected && <StyledTickIcon />}
+                    <LabelText $isSelected={isSelected}>{title}</LabelText>
+                </>
+            );
+        };
+
+        return (
+            <NavItem id={id} $isSelected={isSelected} onClick={handleClick}>
+                {renderTitle()}
+            </NavItem>
+        );
+    };
+
+    return (
+        <>
+            <span ref={detectStickyRef} data-testid={"sticky-ref"} />
+            <NavWrapper
+                $isStickied={isStickied}
+                $sideMargin={dynamicMargin}
+                $stickyOffset={stickyOffset}
+                ref={navWrapperRef}
+                id={id}
+                data-testid={navTestId}
+                className={className}
+            >
+                <NavLabel
+                    ref={dropdownRef}
+                    onClick={handleToggleDropdown}
+                    data-testid={`${navTestId}-label`}
+                    $isDropdownExpanded={isDropdownExpanded}
+                >
+                    <LabelText weight="bold">{labelText}</LabelText>
+                    <NavIcon $isDropdownExpanded={isDropdownExpanded} />
+                </NavLabel>
+                {isDropdownExpanded && (
+                    <NavItemList
+                        data-testid={`${navTestId}-dropdown-list`}
+                        $viewportHeight={
+                            viewportHeight - dropdowntHeight - stickyOffset
+                        }
+                    >
+                        {items.map((item, i) =>
+                            renderDropdownNavItem({
+                                handleClick: (e) =>
+                                    handleNavItemClick(e, item, i),
+                                isSelected:
+                                    i === selectedItemIndex && isStickied,
+                                item,
+                                renderItem,
+                            })
+                        )}
+                    </NavItemList>
+                )}
+                {isDropdownExpanded && isStickied && (
+                    <Backdrop onClick={handleDismissBackdrop} />
+                )}
+            </NavWrapper>
+        </>
+    );
+};
+
+export const LocalNavDropdown = React.forwardRef(Component);