const navRef = useRef<any>(null);
const [visibilityMap, setVisibilityMap] = useState<Record<string, boolean>>({});
const [numHidden, setNumHidden] = useState(() => findNumHidden(visibilityMap));
-
const prevNumHidden = useRef(numHidden);
-
+
const handleIntersection = (entries) => {
const updatedEntries: Record<string, boolean> = {};
entries.forEach((entry) => {
const targetid = entry.target.dataset.targetid as string;
+ //if true, the element is visible
if (entry.isIntersecting) {
updatedEntries[targetid] = true;
} else {
}));
};
+ //ensures that the last element is always visible if the second to last is visible
useEffect(() => {
- if (prevNumHidden.current === 2 && numHidden === 1) {
+ if ((prevNumHidden.current > 1 || prevNumHidden.current === 0) && numHidden === 1) {
setVisibilityMap((prev) => ({
...prev,
[lastEntryId]: true,
visibilityMap={visibilityMap}
className={classes.overflowStyle}
>
- {children}
+ {children.filter((child) => !child.props['data-targetid'].includes("Divider"))}
</OverflowMenu>
)}
</div>