Popup button component

src/app/about/approach/page.tsx

@@ -0,0 +1,33 @@
+import Banner from '#components/Banner';
+import Divider from '#components/Divider';
+import Page from '#components/Page';
+import AboutUsImage from '#public/aboutUsImage.jpg';
+
+import Goals from './Goals';
+import Values from './Values';
+import VisionMission from './VisionMission';
+
+import styles from './page.module.css';
+
+export default function About() {
+    return (
+        <Page>
+            <Banner
+                // NOTE: We need to replace with the real image as mentioned in figma
+                bannerImageSrc={AboutUsImage}
+                eyebrowHeading="Our Approach"
+                heading={(
+                    <>
+                        Empowering Change Through
+                        <br />
+                        <span>Gender-Equal Citizenship</span>
+                    </>
+                )}
+            />
+            <VisionMission />
+            <Divider />
+            <Goals />
+            <Values />
+        </Page>
+    );
+}

src/app/about/page.tsx

@@ -1,33 +1,5 @@
-import Banner from '#components/Banner';
-import Divider from '#components/Divider';
-import Page from '#components/Page';
-import AboutUsImage from '#public/aboutUsImage.jpg';
+import { redirect } from 'next/navigation';
 
-import Goals from './Goals';
-import Values from './Values';
-import VisionMission from './VisionMission';
-
-import styles from './page.module.css';
-
-export default function About() {
-    return (
-        <Page>
-            <Banner
-                // NOTE: We need to replace with the real image as mentioned in figma
-                bannerImageSrc={AboutUsImage}
-                eyebrowHeading="Our Approach"
-                heading={(
-                    <>
-                        Empowering Change Through
-                        <br />
-                        <span>Gender-Equal Citizenship</span>
-                    </>
-                )}
-            />
-            <VisionMission />
-            <Divider />
-            <Goals />
-            <Values />
-        </Page>
-    );
+export default function AboutRedirect() {
+    redirect('/about/approach');
 }

src/app/globals.css

@@ -41,6 +41,10 @@
     --border-radius-small: 12px;
     --border-radius-extra-small: 8px;
 
+    --border-radius-popup: 3px;
+    --blur-radius-popup: 1px;
+    --color-shadow: rgba(0,0,0,.5);
+
         /* Font size */
     --font-size-super-small: calc(var(--font-size-base) / (var(--multiplier) * var(--multiplier) * var(--multiplier)));
     --font-size-extra-small: calc(var(--font-size-base) / (var(--multiplier) * var(--multiplier)));

src/components/Navbar/index.tsx

@@ -13,6 +13,8 @@ import Button from '#components/Button';
 import Link from '#components/Link';
 import logo from '#public/logo.png';
 
+import PopupButton from '../PopupButton';
+
 import styles from './styles.module.css';
 
 interface Props {
@@ -43,13 +45,32 @@ export default function Navbar(props: Props) {
                     />
                 </div>
                 <div className={_cs(isNavShown && styles.navShown, styles.links)}>
-                    <Link
-                        href="/about"
-                        variant="navigation"
-                        active={pathname === '/about/'}
+                    <PopupButton
+                        persistent={false}
+                        label="About"
                     >
-                        About
-                    </Link>
+                        <Link
+                            href="/about/approach"
+                            variant="navigation"
+                            active={pathname === '/about/approach/'}
+                        >
+                            Our Approach
+                        </Link>
+                        <Link
+                            href="/about"
+                            variant="navigation"
+                            active={pathname === '/about/'}
+                        >
+                            Our Journey
+                        </Link>
+                        <Link
+                            href="/about"
+                            variant="navigation"
+                            active={pathname === '/about/'}
+                        >
+                            Our Members
+                        </Link>
+                    </PopupButton>
                     <Link
                         href="/"
                         variant="navigation"

src/components/Popup/index.tsx

@@ -0,0 +1,170 @@
+import {
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useState,
+} from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import Portal from '../Portal';
+
+import styles from './styles.module.css';
+
+const defaultPlacement = {
+    top: 'unset',
+    right: 'unset',
+    bottom: 'unset',
+    left: 'unset',
+};
+
+interface FloatingPlacementProps {
+    placement: {
+        top: string | undefined;
+        right: string | undefined;
+        bottom: string | undefined;
+        left: string | undefined;
+    };
+    width: string | undefined;
+    horizontalPosition: 'left' | 'right' | undefined;
+    verticalPosition: 'top' | 'bottom' | undefined;
+    maxHeight: string | undefined;
+}
+
+function getFloatPlacement(parentRef: React.RefObject<HTMLElement | null>): FloatingPlacementProps {
+    const placement = {
+        ...defaultPlacement,
+    };
+
+    let horizontalPosition: 'left' | 'right' | undefined;
+    let verticalPosition: 'bottom' | 'top' | undefined;
+    let contentWidth = 'auto';
+    let maxHeight = 'auto';
+
+    if (parentRef?.current) {
+        const parentBCR = parentRef.current.getBoundingClientRect();
+        const {
+            x, y, width, height,
+        } = parentBCR;
+
+        const cX = window.innerWidth / 2;
+        const cY = window.innerHeight / 2;
+
+        horizontalPosition = (cX - parentBCR.x) > 0 ? 'right' : 'left';
+        verticalPosition = (cY - parentBCR.y) > 0 ? 'bottom' : 'top';
+
+        if (horizontalPosition === 'left') {
+            placement.right = `${window.innerWidth - x - width}px`;
+        } else if (horizontalPosition === 'right') {
+            placement.left = `${x}px`;
+        }
+
+        if (verticalPosition === 'top') {
+            placement.bottom = `${window.innerHeight - y + 10}px`;
+        } else if (verticalPosition === 'bottom') {
+            placement.top = `${y + height + 10}px`;
+        }
+
+        contentWidth = `${width}px`;
+        maxHeight = `calc(50vh - ${height / 2}px)`;
+    }
+
+    return {
+        placement,
+        width: contentWidth,
+        horizontalPosition,
+        verticalPosition,
+        maxHeight,
+    };
+}
+
+function useAttachedFloatingPlacement(parentRef: React.RefObject<HTMLElement | null>) {
+    const [placement, setPlacement] = useState<FloatingPlacementProps>({
+        placement: defaultPlacement,
+        width: 'auto',
+        maxHeight: 'auto',
+        horizontalPosition: 'left',
+        verticalPosition: 'top',
+    });
+
+    useLayoutEffect(() => {
+        setPlacement(getFloatPlacement(parentRef));
+    }, [setPlacement, parentRef]);
+
+    // FIXME: throttle
+    const handleScroll = useCallback(() => {
+        setPlacement(getFloatPlacement(parentRef));
+    }, [setPlacement, parentRef]);
+
+    // FIXME: throttle
+    const handleResize = useCallback(() => {
+        setPlacement(getFloatPlacement(parentRef));
+    }, [setPlacement, parentRef]);
+
+    useEffect(() => {
+        document.addEventListener('scroll', handleScroll, true);
+        window.addEventListener('resize', handleResize, true);
+
+        return () => {
+            document.removeEventListener('scroll', handleScroll, true);
+            window.removeEventListener('resize', handleResize, true);
+        };
+    }, [handleScroll, handleResize]);
+
+    return placement;
+}
+
+export interface PopupProps {
+    className?: string;
+    contentClassName?: string;
+    parentRef: React.RefObject<HTMLElement | null>;
+    elementRef?: React.RefObject<HTMLDivElement | null>;
+    children: React.ReactNode;
+    freeWidth?: boolean;
+}
+
+function Popup(props: PopupProps) {
+    const {
+        parentRef,
+        children,
+        className,
+        contentClassName,
+        freeWidth,
+        elementRef,
+    } = props;
+
+    const {
+        placement,
+        width,
+        horizontalPosition,
+        verticalPosition,
+        maxHeight,
+    } = useAttachedFloatingPlacement(parentRef);
+
+    return (
+        <Portal>
+            <div
+                style={placement}
+                ref={elementRef}
+                className={_cs(
+                    styles.popup,
+                    className,
+                    horizontalPosition === 'left' ? styles.left : styles.right,
+                    verticalPosition === 'top' ? styles.top : styles.bottom,
+                )}
+            >
+                <div className={styles.tip} />
+                <div
+                    className={_cs(styles.content, contentClassName)}
+                    style={{
+                        minWidth: !freeWidth ? width : undefined,
+                        maxHeight,
+                    }}
+                >
+                    {children}
+                </div>
+            </div>
+        </Portal>
+    );
+}
+
+export default Popup;

src/components/Popup/styles.module.css

@@ -0,0 +1,54 @@
+.popup {
+    position: fixed;
+    z-index: 999999;
+    border-radius: var(--border-radius-popup);
+    background-color: var(--color-background);
+    filter: drop-shadow(0 0 var(--blur-radius-popup) var(--color-shadow));
+    max-width: calc(100vw - 2 * var(--spacing-medium));
+
+    --height-tip: 10px;
+    --width-tip: 20px;
+
+    .tip {
+        position: absolute;
+        top: unset;
+        right: unset;
+        bottom: unset;
+        left: unset;
+        background-color: #fff;
+        width: var(--width-tip);
+        height: var(--height-tip);
+    }
+
+    &.top {
+        .tip {
+            bottom: calc(-1 * var(--height-tip));
+            clip-path: polygon(100% 0%, 0 0, 50% 100%);
+        }
+    }
+
+    &.bottom {
+        .tip {
+            top: calc(-1 * var(--height-tip));
+            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+        }
+    }
+
+    &.left {
+        .tip {
+            right: var(--width-tip);
+        }
+    }
+
+    &.right {
+        .tip {
+            left: var(--width-tip);
+        }
+    }
+
+    .content {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+    }
+}