ConceptPortal-public/rsconcept/frontend/src/components/Navigation/ToggleNavigationButton.tsx

import clsx from 'clsx';
import { motion } from 'framer-motion';
import { RiPushpinFill, RiUnpinLine } from 'react-icons/ri';

import { useConceptTheme } from '@/context/ThemeContext';
import { animateNavigationToggle } from '@/utils/animations';

function ToggleNavigationButton() {
  const { noNavigationAnimation, toggleNoNavigation } = useConceptTheme();
  return (
  <motion.button type='button' tabIndex={-1}
    title={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}
    className={clsx(
      'absolute top-0 right-0 z-navigation flex items-center justify-center',
      'clr-btn-nav',
      'select-none disabled:cursor-not-allowed'
    )}
    onClick={toggleNoNavigation}
    initial={false}
    animate={noNavigationAnimation ? 'off' : 'on'}
    variants={animateNavigationToggle}
  >
    {!noNavigationAnimation ? <RiPushpinFill /> : null}
    {noNavigationAnimation ? <RiUnpinLine /> : null}
  </motion.button>);
}

export default ToggleNavigationButton;