765-fix: Fix styles active menu item

dev-data/donate-options.data.ts

@@ -1,16 +1,23 @@
+import boostyIconMenu from '@/shared/assets/svg/boosty-icon.svg';
+import openCollective from '@/shared/assets/svg/opencollective-icon.svg';
 import { LINKS } from '@/shared/constants';
+import { BoostyIcon, OpenCollectiveIcon } from '@/shared/icons';
 
 export const donateOptions = [
   {
     id: 1,
-    linkLabel: 'Donate now',
-    icon: 'openCollective',
+    buttonLinkLabel: 'Donate now',
+    menuLinkLabel: 'Donate on Opencollective',
+    buttonIcon: OpenCollectiveIcon,
+    menuIcon: openCollective,
     href: LINKS.DONATE_OPEN_COLLECTIVE,
   },
   {
     id: 2,
-    linkLabel: 'Subscribe now',
-    icon: 'boosty',
+    buttonLinkLabel: 'Subscribe now',
+    menuLinkLabel: 'Subscribe on Boosty',
+    buttonIcon: BoostyIcon,
+    menuIcon: boostyIconMenu,
     href: LINKS.DONATE_BOOSTY,
   },
 ];

dev-data/school-menu-links.ts

@@ -11,11 +11,21 @@ export const schoolMenuStaticLinks = [
     detailsUrl: `/#${ANCHORS.UPCOMING_COURSES}`,
     description: 'Schedule your study',
   },
+  {
+    title: 'Support Us',
+    detailsUrl: `/#${ANCHORS.DONATE}`,
+    description: 'Every donation, big or small, helps!',
+  },
+  {
+    title: 'Mentors Wanted',
+    detailsUrl: `/#${ANCHORS.MENTORS_WANTED}`,
+    description: 'Help others to become professionals',
+  },
 ];
 
 export const communityMenuStaticLinks = [
   {
-    title: 'About',
+    title: 'About Community',
     detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.ABOUT_COMMUNITY}`,
     description: 'Who we are',
   },

src/core/styles/_constants.scss

@@ -1,4 +1,5 @@
 // In case of updating any of these variables, please update the viewports.ts file inside e2e/utils folder
+$large-laptop-width: 1441px;
 $content-width: 1440px;
 $medium-laptop-width: 1250px;
 $large-tablet-width: 1024px;

src/core/styles/_mixins.scss

@@ -1,5 +1,11 @@
 @use 'constants' as *;
 
+@mixin media-laptop-large {
+  @media (min-width: ($large-laptop-width)) {
+    @content;
+  }
+}
+
 @mixin media-laptop {
   @media (max-width: $content-width) {
     @content;

src/shared/constants.ts

@@ -46,7 +46,11 @@ export const COURSE_LINKS = {
   AWS_AI: 'https://rs.school/courses/aws-ai',
 };
 
-export const KEY_CODES = { ESCAPE: 'Escape' } as const;
+export const KEY_CODES = {
+  ESCAPE: 'Escape',
+  ENTER: 'Enter',
+  SPACE: 'Space',
+} as const;
 
 export const HTTP_METHOD = {
   GET: 'GET',
@@ -89,6 +93,15 @@ export const LINKS = {
   ANGULAR_MENTORING: 'https://github.com/rolling-scopes-school/tasks/tree/master/angular/mentoring',
 };
 
+export const NAV_MENU_LABELS = {
+  RS_SCHOOL: 'RS School',
+  COURSES: 'Courses',
+  COMMUNITY: 'Community',
+  MENTORSHIP: 'Mentorship',
+  DOCS: 'Docs',
+  SUPPORT_US: 'Support Us',
+} as const;
+
 export const ROUTES = {
   HOME: '/',
   COMMUNITY: 'community',

src/shared/hooks/use-outside-click/use-outside-click.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+export function useOutsideClick<T extends HTMLElement>(
+  ref: React.RefObject<T | null>,
+  callback: () => void,
+  isDropdownOpen: boolean,
+) {
+  useEffect(() => {
+    if (!isDropdownOpen) {
+      return;
+    }
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, callback, isDropdownOpen]);
+}

src/shared/ui/logo/logo.module.scss

@@ -1,16 +1,16 @@
 .logo {
   flex-shrink: 0;
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
 
   img {
     width: 100%;
     height: 100%;
   }
 
   @include media-tablet-large {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
   }
 }
 

src/shared/ui/logo/logo.tsx

@@ -1,21 +1,25 @@
 import { HTMLAttributes } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import classNames from 'classnames/bind';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import Link from 'next/link';
 
 import logo from '@/shared/assets/svg/rss-logo.svg';
 import { ROUTES } from '@/shared/constants';
 
 import styles from './logo.module.scss';
 
-type LogoProps = Pick<HTMLAttributes<HTMLElement>, 'className'> & VariantProps<typeof logoVariants>;
+type LogoProps = Pick<HTMLAttributes<HTMLElement>, 'className'> &
+  VariantProps<typeof logoVariants> & {
+    logoSrc?: StaticImageData;
+    onClick?: () => void;
+  };
 
 export const cx = classNames.bind(styles);
 
 const logoVariants = cva(cx('logo'), { variants: { type: { 'with-border': cx('with-border') } } });
 
-export const Logo = ({ type, className }: LogoProps) => {
+export const Logo = ({ type, className, logoSrc = logo, onClick }: LogoProps) => {
   return (
     <Link
       href={ROUTES.HOME}
@@ -24,8 +28,9 @@ export const Logo = ({ type, className }: LogoProps) => {
         className,
       })}
       data-testid="logo"
+      onClick={onClick}
     >
-      <Image src={logo} alt="RSS-logo" />
+      <Image src={logoSrc} alt="RSS-logo" />
     </Link>
   );
 };

src/shared/ui/paragraph/paragraph.module.scss

@@ -15,6 +15,12 @@
     font-weight: $font-weight-medium;
   }
 
+  &.small-font-size {
+    font-size: 14px;
+    font-weight: $font-weight-regular;
+    line-height: 24px;
+  }
+
   @include media-laptop {
     &.medium-font-size {
       font-size: 16px;
@@ -25,5 +31,9 @@
       font-size: 18px;
       font-weight: $font-weight-regular;
     }
+
+    &.small-font-size {
+      line-height: 22px;
+    }
   }
 }

src/shared/ui/paragraph/paragraph.tsx

@@ -15,6 +15,7 @@ const paragraphVariants = cva(cx('paragraph'), {
     fontSize: {
       medium: cx('medium-font-size'),
       large: cx('large-font-size'),
+      small: cx('small-font-size'),
     },
   },
   defaultVariants: { fontSize: 'medium' },

src/widgets/breadcrumbs/ui/breadcrumbs.module.scss

@@ -33,3 +33,10 @@
     padding: 24px;
   }
 }
+
+.mobile-breadcrumbs.breadcrumbs-content {
+  @include media-tablet-large {
+    width: 100%;
+    padding: 6px 6px 6px 0;
+  }
+}

src/widgets/breadcrumbs/ui/breadcrumbs.tsx

@@ -12,7 +12,11 @@ import styles from './breadcrumbs.module.scss';
 
 const cx = classNames.bind(styles);
 
-export const Breadcrumbs = () => {
+type BreadcrumbsProps = {
+  className?: string;
+};
+
+export const Breadcrumbs = ({ className }: BreadcrumbsProps) => {
   const pathname = usePathname();
   const crumbs = pathname.split('/').filter(Boolean) as RouteValues[];
 
@@ -24,7 +28,7 @@ export const Breadcrumbs = () => {
 
   return (
     <nav className={cx('container')}>
-      <div className={cx('content', 'breadcrumbs-content')}>
+      <div className={cx('content', 'breadcrumbs-content', className)}>
         <ul>
           <BreadcrumbItem linkTo={ROUTES.HOME} text="Home" />
           {transformedCrumbs.map((crumb, i) => (

src/widgets/footer/footer.test.tsx

@@ -7,6 +7,8 @@ import { Copyright } from '@/widgets/footer/ui/copyright';
 import { DesktopView } from '@/widgets/footer/ui/desktop-view';
 import { MobileView } from '@/widgets/mobile-view';
 
+vi.mock('next/navigation', () => ({ usePathname: () => '/' }));
+
 describe('Footer', () => {
   it('renders footer container', async () => {
     const { getByTestId } = renderWithRouter(<Footer courses={mockedCourses} />);
@@ -36,7 +38,9 @@ describe('Footer', () => {
 
   describe('MobileView', () => {
     it('should render mobile view', () => {
-      const { getByTestId } = renderWithRouter(<MobileView courses={mockedCourses} type="footer" />);
+      const { getByTestId } = renderWithRouter(
+        <MobileView courses={mockedCourses} type="footer" />,
+      );
       const mobileView = getByTestId('mobile-view');
 
       expect(mobileView).toBeInTheDocument();