@redocly/theme/src/core/hooks/use-navbar-height.ts

Shared UI components lib

import { useEffect, useState } from 'react';

import type { Location } from 'react-router-dom';

import { getNavbarElement } from '../utils/get-navbar-element';

export type UseNavbarHeightReturnType = number;

export function useNavbarHeight(location: Location): UseNavbarHeightReturnType {
  const [height, setHeight] = useState(0);

  useEffect(() => {
    const navbar = getNavbarElement();
    setHeight((navbar && navbar.clientHeight) || 0);
  }, [location.pathname]);

  useEffect(() => {
    window.requestAnimationFrame(() => {
      const navbar = getNavbarElement();
      setHeight((navbar && navbar.clientHeight) || 0);
    });
  }, []);

  return height;
}