Запустить анимацию свертывания навигационной панели

Question

Я использую response- bootstrap, и я отображаю Navbar. Внутри я отображаю специальную кнопку, которая переключает языки, благодаря i18n. Ожидаемое поведение будет таким, что на мобильном устройстве при нажатии на элемент навигационной панели происходит сбой анимации. По какой-то причине она не работает с этой кнопкой.

Я нашел обходной путь: я имитирую щелчок по кнопке переключения, но это приводит к проблеме: сваливается навигационная панель, но без более быстрой анимации. Возможно, это потому, что реагирует на повторный рендеринг всего сайта с переведенным контентом.
Так что у меня было бы ожидаемое поведение: на мобильном телефоне, когда я нажимаю на кнопку перевода, он бы сворачивал панель навигации с анимацией свертывания.

Надеюсь, я прояснил ситуацию.

Вот моя кнопка перевода: Компонент:

/**
 * Translation button, that translate the whole page. It switches between english (by default) and french
 */
function TranslationButton(props: { onClick: () => void; }): ReactElement {
  const { t, i18n } = useTranslation();
  const [state, setState] = useState<{ isEnglish: boolean, buttonLabel: string }>({
    isEnglish: i18n.language.includes("en"),
    buttonLabel: i18n.language.includes("en") ? "en" : "fr",
  });

  /**
   * Switch language between en and fr
   */
  const changeLanguage = useCallback(
    (lng: string): void => {
      if (!i18n) {
        return;
      }
      i18n.changeLanguage(lng);
    },
    [i18n]
  );

  /**
   * When we click on the translate button, we switch the button label, and switch the language
   */
  const handleClick = (): void => {
    const isEnglish: boolean = !state.isEnglish;
    const buttonLabel: string = isEnglish ? "en" : "fr";
    setState({
      isEnglish,
      buttonLabel,
    });
    changeLanguage(buttonLabel);
    // Toggle navbar
    props.onClick();
  };

  return (
    <OverlayTrigger
      placement="bottom"
      delay={{ show: 0, hide: 0 }}
      overlay={renderTooltip(t("translationTooltip"))}
    >
      <Button className="m-auto buttons" variant="outline-light" onClick={handleClick}>
        <MdTranslate className="mr-2" />
        {state.buttonLabel.toUpperCase()}
      </Button>
    </OverlayTrigger>
  );
}

Вот мой компонент Navbar

/**
 * The Navbar, containing the different section of the website, and the translate button
 */
function MyNavbar(): ReactElement {
  const { t }: { t: TFunction } = useTranslation();
  // Toggle component
  const toggle: MutableRefObject<any> = useRef();
  // Collapse component
  const collapse: MutableRefObject<any> = useRef();
  // Navbar component
  const nav: MutableRefObject<any> = useRef();

  // Triger toggle navbar if collapsed
  const onClick = (): void => {
    if (collapse.current.className.includes("show")) {
      toggle.current.click();
    }
  };

  // If we click outside the navbar, we close it
  const handleClick = (e: MouseEvent): void => {
    if (!nav.current.contains(e.target)) {
      onClick();
    }
  };

  useEffect((): (() => void) => {
    // add when mounted
    document.addEventListener("mousedown", handleClick);
    // return function to be called when unmounted
    return (): void => {
      document.removeEventListener("mousedown", handleClick);
    };
  });

  const scrollOptions = {
    smooth: true,
    offset: -40,
    duration: 500,
  };

  return (
    <Navbar id="nav" ref={nav} collapseOnSelect={true} expand="md" bg="dark" variant="dark" className="pt-0 pb-0" fixed="top">
      <Nav.Link href="#App" onSelect={(): void => scroller.scrollTo("App", scrollOptions)}>
        <img
          alt=""
          src={logo}
          width="40%"
          height="40%"
          className="d-inline-block align-top"
        />{" "}

      </Nav.Link>
      <Navbar.Toggle ref={toggle} aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse ref={collapse} id="responsive-navbar-nav" className="pb-3 pb-md-0">
        <Nav className="mr-auto">
          <Nav.Link className="" href="#Skills" onSelect={(): void => scroller.scrollTo("Skills", scrollOptions)}>
            {t("navbar.skill")}
          </Nav.Link>
          <Nav.Link className="" href="#Projects" onSelect={(): void => scroller.scrollTo("Projects", scrollOptions)}>
            {t("navbar.projects")}
          </Nav.Link>
          <Nav.Link className="" href="#History" onSelect={(): void => scroller.scrollTo("History", scrollOptions)}>
            {t("navbar.history")}
          </Nav.Link>
          <Nav.Link className="" href="#Travels" onSelect={(): void => scroller.scrollTo("Travels", scrollOptions)}>
            {t("navbar.travel")}
          </Nav.Link>
        </Nav>
        <Nav >

          <Nav.Link href="#">
            <TranslationButton onClick={onClick} />
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar >
  );
}