Merge pull request #566 from Studio-Yandex-Practicum/feature/issue-55…

…7/donation-rout-active-style Feature/issue 557/donation rout active style
Studio-Yandex-Practicum · Sep 8, 2024 · ab74c38 · ab74c38
2 parents 1a21723 + 8ecfd77
commit ab74c38
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/donation-link/donation-link.module.css b/src/components/donation-link/donation-link.module.css
@@ -32,7 +32,8 @@
     border-top-right-radius: 200% 100%;
   }
 
-  &:hover {
+  &:hover,
+  &.active { 
     &::before,
     &::after {
       visibility: visible;

diff --git a/src/components/donation-link/donation-link.tsx b/src/components/donation-link/donation-link.tsx
@@ -1,5 +1,6 @@
 import cn from 'classnames/bind';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 import { Icon } from 'components/ui/icon';
 
@@ -11,10 +12,12 @@ const cx = cn.bind(styles);
 
 export const DonationLink = (props: Pick<LinkProps, 'href'>): JSX.Element => {
   const { href } = props;
+  const router = useRouter();
+  const isActive = router.asPath === href;
 
   return (
     <Link href={href}>
-      <a className={cx('link')}>
+      <a className={cx('link', { active: isActive })}>
         <Icon glyph="plus" className={cx('icon')}/>
         <span className={cx('text')}>
           Поддержать