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-menu.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

@@ -53,8 +53,10 @@ $color-gray-800: hsl(216deg 4% 23%); // #393b3e;
 $color-gray-700: hsl(204deg 3% 35%); // #575a5c;
 $color-gray-600: hsl(216deg 2% 43%); // #6b6d70;
 $color-gray-500: hsl(204deg 2% 59%); // #939698;
+$color-gray-450: hsl(210deg 9% 62%); // #969fa8
 $color-gray-400: hsl(204deg 3% 71%); // #b3b6b8;
 $color-gray-300: hsl(216deg 7% 85%); // #d7d9dc;
+$color-gray-250: hsl(212deg 19% 86%); // #d6dce3;
 $color-gray-200: hsl(210deg 14% 91%); // #e6e9ec;
 $color-gray-100: hsl(216deg 20% 95%); // #f0f2f5;
 $color-gray-50: hsl(210deg 50% 98%); // #f6f9fc;

src/core/styles/_mixins.scss

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

src/shared/constants.ts

@@ -42,7 +42,11 @@ export const COURSE_LINKS = {
   AWS_DEVOPS: 'https://rs.school/courses/aws-devops',
 };
 
-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',
@@ -85,6 +89,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',
+};
+
 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,24 @@
 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> & {
+    icon?: StaticImageData;
+  };
 
 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, icon = logo }: LogoProps) => {
   return (
     <Link
       href={ROUTES.HOME}
@@ -25,7 +28,7 @@ export const Logo = ({ type, className }: LogoProps) => {
       })}
       data-testid="logo"
     >
-      <Image src={logo} alt="RSS-logo" />
+      <Image src={icon} alt="RSS-logo" />
     </Link>
   );
 };

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

@@ -33,3 +33,11 @@
     padding: 24px;
   }
 }
+
+.mobile-breadcrumbs.breadcrumbs-content {
+  @include media-tablet-large {
+    width: 100%;
+    padding: 6px;
+    padding-left: 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();

src/widgets/header/header.module.scss

@@ -5,35 +5,23 @@
   left: 0;
 
   width: 100%;
-  height: 64px;
+  height: 70px;
   padding: 0 40px;
   border-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 
-  transition: background-color 0.2s;
-
-  &.gray {
-    background-color: $color-yellow-500;
-  }
+  opacity: 1;
+  background-color: rgb(255 255 255);
+  box-shadow: rgb(0 0 0 / 8.2%) 0 1.026px 8.0694px 0;
 
-  &.blue {
-    background: $gradient-blue-background;
-  }
+  transition: background-color 0.2s;
 
   &.none {
     display: none;
   }
 
-  &.white {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-
-    opacity: 1;
-    background-color: rgb(255 255 255);
-    box-shadow: rgb(0 0 0 / 8.2%) 0 1.026px 8.0694px 0;
-  }
-
   @include media-tablet-large {
-    height: 48px;
     padding: 0 16px;
   }
 }
@@ -52,10 +40,11 @@
   position: relative;
 
   display: flex;
-  gap: 28px;
+  gap: 33.8px;
   align-items: center;
 
   height: 100%;
+  padding-inline-start: 0;
 
   @include media-tablet-large {
     display: none;
@@ -99,6 +88,7 @@
 
   color: #000;
 
+  opacity: 0;
   background-color: #fff;
 
   transition: transform 0.4s ease-out;
@@ -107,8 +97,25 @@
 .mobile-menu.open {
   transform: translateY(0);
   display: none;
+  opacity: 1;
 
   @include media-tablet-large {
     display: block;
   }
 }
+
+.support-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  max-width: 470px;
+  margin-right: 62px;
+
+  font-size: 14px;
+  list-style-type: none;
+
+  @include media-laptop-large {
+    margin-right: 30px;
+  }
+}