@kadconsulting/dry
Version:
KAD Reusable Component Library
28 lines • 2.01 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import './VerticalNavContent.scss';
import { Accordion } from '../../Accordion';
import SubNavigationComponent from '../SubNavigation';
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import useWindowSize from '../../../hooks/useWindowSize';
const NAV_BAR_HEIGHT = 68;
const VerticalNavContent = ({ navRoutes }) => {
const ctaRef = useRef(null);
const listRef = useRef(null);
const { height } = useWindowSize();
const [minListHeight, setMinListHeight] = useState('100%');
/** Recalculate the minListHeight on accordion state change */
const onOpenStateChange = useCallback(() => {
setMinListHeight(`calc(${height}px - ${NAV_BAR_HEIGHT}px - ${ctaRef.current?.getBoundingClientRect().height ?? 0}px)`);
}, [height]);
/** Ensure the CTA is always at the bottom of the screen, even when the content doesn't fill it up. */
useLayoutEffect(() => {
if (!ctaRef.current)
return;
onOpenStateChange();
}, [ctaRef, height, onOpenStateChange]);
return (_jsx(_Fragment, { children: _jsx("ul", { ref: listRef, style: {
minHeight: minListHeight,
}, className: 'vertical-nav-content', children: Object.keys(navRoutes).map((key) => navRoutes[key].visibleInNav ? (_jsx("li", { className: 'parent-list-item', children: navRoutes[key].subNavigation ? (_jsx(Accordion, { onOpenStateChange: onOpenStateChange, parentContent: _jsx(_Fragment, { children: navRoutes[key].path ? (_jsx("a", { href: navRoutes[key].path, children: navRoutes[key].name })) : (_jsx("p", { children: navRoutes[key].name })) }), children: _jsx(SubNavigationComponent, { onOpenStateChange: onOpenStateChange, subNavigation: navRoutes[key].subNavigation }) }, key)) : (_jsx("a", { href: navRoutes[key].path ?? '/', children: navRoutes[key].name })) }, key)) : null) }) }));
};
export default VerticalNavContent;
//# sourceMappingURL=VerticalNavContent.js.map