563-refactor: Widget school menu

dev-data/index.ts

@@ -33,6 +33,7 @@ export { awsFundamentals } from './awsFundamentals.data';
 export { benefitMentorshipHome, benefitMentorshipMentors } from './benefit-mentorship.data';
 export { communicationText } from './widget-communication.data';
 export { communityGroups } from './community-media.data';
+export { communityMenuStaticLinks, schoolMenuStaticLinks } from './school-menu-links';
 export { contentMap } from './training-program.data';
 export { contentMapAbout, introLocalizedContent } from './about-course.data';
 export { contributeOptions } from './contribute-options.data';

dev-data/school-menu-links.ts

@@ -0,0 +1,37 @@
+import { ANCHORS, ROUTES } from '@/core/const';
+
+export const schoolMenuStaticLinks = [
+  {
+    title: 'About RS School',
+    detailsUrl: `/#${ANCHORS.ABOUT_SCHOOL}`,
+    description: 'Free online education',
+  },
+  {
+    title: 'Upcoming courses',
+    detailsUrl: `/#${ANCHORS.UPCOMING_COURSES}`,
+    description: 'Schedule your study',
+  },
+];
+
+export const communityMenuStaticLinks = [
+  {
+    title: 'About',
+    detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.ABOUT_COMMUNITY}`,
+    description: 'Who we are',
+  },
+  {
+    title: 'Events',
+    detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.EVENTS}`,
+    description: 'Meet us at events',
+  },
+  {
+    title: 'Merch',
+    detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.MERCH}`,
+    description: 'Sloths for your daily life',
+  },
+  {
+    title: 'Contribute',
+    detailsUrl: `/${ROUTES.COMMUNITY}/#${ANCHORS.CONTRIBUTE}`,
+    description: 'Assist us and improve yourself',
+  },
+];

src/core/base-layout/components/footer/desktop-view.tsx

@@ -1,6 +1,7 @@
 import { AboutList } from './about-list';
 import { getCourses } from '@/entities/course/api/course-api';
 import { SchoolMenu } from '@/widgets/school-menu';
+import { schoolMenuStaticLinks } from 'data';
 
 export const DesktopView = async () => {
   const courses = await getCourses();
@@ -9,11 +10,32 @@ export const DesktopView = async () => {
     <div className="desktop-view" data-testid="desktop-view">
       <div className="left">
         <AboutList />
-        <SchoolMenu courses={courses} heading="rs school" />
+        <SchoolMenu heading="rs school" color="light">
+          {schoolMenuStaticLinks.map((link, i) => (
+            <SchoolMenu.Item
+              key={i}
+              title={link.title}
+              description={link.description}
+              url={link.detailsUrl}
+              color="light"
+            />
+          ))}
+        </SchoolMenu>
       </div>
 
       <div className="right">
-        <SchoolMenu courses={courses} heading="all courses" />
+        <SchoolMenu heading="all courses" color="light">
+          {courses.map((course) => (
+            <SchoolMenu.Item
+              key={course.id}
+              icon={course.iconSmall}
+              title={course.title}
+              description={course.startDate}
+              url={course.detailsUrl}
+              color="light"
+            />
+          ))}
+        </SchoolMenu>
       </div>
     </div>
   );

src/core/base-layout/components/header/header.module.scss

@@ -92,8 +92,8 @@
 
   width: 100%;
   height: min-content;
-  min-height: 100vh;
-  max-height: 100vh;
+  min-height: 100dvh;
+  max-height: 100dvh;
   margin-top: 0;
   padding: 4px 24px 28px 16px;
 

src/core/base-layout/components/header/header.tsx

@@ -10,6 +10,7 @@ import { Course } from '@/entities/course';
 import { Logo } from '@/shared/ui/logo';
 import { MobileView } from '@/widgets/mobile-view';
 import { SchoolMenu } from '@/widgets/school-menu';
+import { communityMenuStaticLinks, mentorshipCourses, schoolMenuStaticLinks } from 'data';
 
 import styles from './header.module.scss';
 
@@ -19,34 +20,9 @@ type HeaderProps = {
   courses: Course[];
 };
 
-const navLinks = [
-  {
-    label: 'RS School',
-    href: ROUTES.HOME,
-    heading: 'rs school',
-  },
-  {
-    label: 'Courses',
-    href: `/${ROUTES.COURSES}`,
-    heading: 'all courses',
-  },
-  {
-    label: 'Community',
-    href: `/${ROUTES.COMMUNITY}`,
-    heading: 'community',
-  },
-  {
-    label: 'Mentorship',
-    href: `/${ROUTES.MENTORSHIP}`,
-    heading: 'mentorship',
-  },
-] as const;
-
 export const Header = ({ courses }: HeaderProps) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [color, setColor] = useState('gray');
-  const [hash, setHash] = useState('');
-  const [key, setKey] = useState('');
   const pathname = usePathname();
 
   // const headerAccentColor = pathname.includes(ROUTES.MENTORSHIP) ? 'blue' : 'gray';
@@ -60,6 +36,10 @@ export const Header = ({ courses }: HeaderProps) => {
     setMenuOpen((prev) => !prev);
   };
 
+  const handleMenuClose = () => {
+    setMenuOpen(false);
+  };
+
   useEffect(() => {
     const listenScrollEvent = () => {
       const scrollY = window.scrollY;
@@ -81,47 +61,69 @@ export const Header = ({ courses }: HeaderProps) => {
   }, [headerAccentColor]);
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      setHash(window.location.hash);
-      setKey(window.location.href);
-    }
-  }, [pathname]);
-
-  useEffect(() => {
-    if (location.pathname) {
-      setMenuOpen(false);
-      setColor(headerAccentColor);
-    }
-  }, [key, hash, pathname, headerAccentColor]);
+    setColor(headerAccentColor);
+  }, [pathname, headerAccentColor]);
 
   return (
     <nav className={cx('navbar', color)} data-testid="navigation">
       <section className={cx('navbar-content')}>
         <Logo />
 
         <menu className={cx('mobile-menu', { open: isMenuOpen })} data-testid="mobile-menu">
-          <MobileView courses={courses} type="header" />
+          <MobileView onClose={handleMenuClose} courses={courses} type="header" />
         </menu>
         <BurgerMenu isMenuOpen={isMenuOpen} toggleMenu={toggleMenu} />
 
         <menu className={cx('menu')}>
-          {navLinks.map((link) => {
-            return (
-              <NavItem
-                key={link.label}
-                label={link.label}
-                href={link.href}
-                dropdownInner={(
-                  <SchoolMenu
-                    courses={courses}
-                    heading={link.heading}
-                    color="dark"
-                    hasTitle={false}
-                  />
-                )}
-              />
-            );
-          })}
+          <NavItem label="RS School" href={ROUTES.HOME}>
+            <SchoolMenu>
+              {schoolMenuStaticLinks.map((link, i) => (
+                <SchoolMenu.Item
+                  key={i}
+                  title={link.title}
+                  description={link.description}
+                  url={link.detailsUrl}
+                />
+              ))}
+            </SchoolMenu>
+          </NavItem>
+          <NavItem label="Courses" href={ROUTES.COURSES}>
+            <SchoolMenu>
+              {courses.map((course) => (
+                <SchoolMenu.Item
+                  key={course.id}
+                  icon={course.iconSmall}
+                  title={course.title}
+                  description={course.startDate}
+                  url={course.detailsUrl}
+                />
+              ))}
+            </SchoolMenu>
+          </NavItem>
+          <NavItem label="Community" href={ROUTES.COMMUNITY}>
+            <SchoolMenu>
+              {communityMenuStaticLinks.map((link, i) => (
+                <SchoolMenu.Item
+                  key={i}
+                  title={link.title}
+                  description={link.description}
+                  url={link.detailsUrl}
+                />
+              ))}
+            </SchoolMenu>
+          </NavItem>
+          <NavItem label="Mentorship" href={ROUTES.MENTORSHIP}>
+            <SchoolMenu>
+              {mentorshipCourses.map((course) => (
+                <SchoolMenu.Item
+                  key={course.id}
+                  icon={course.iconSmall}
+                  title={course.title}
+                  url={course.detailsUrl}
+                />
+              ))}
+            </SchoolMenu>
+          </NavItem>
         </menu>
       </section>
     </nav>

src/core/base-layout/components/header/nav-item/nav-item.tsx

@@ -1,7 +1,7 @@
 import {
   FocusEvent,
   KeyboardEvent,
-  ReactNode,
+  PropsWithChildren,
   useEffect,
   useRef,
   useState,
@@ -16,13 +16,12 @@ import styles from './nav-item.module.scss';
 
 const cx = classNames.bind(styles);
 
-type NavItemProps = {
+type NavItemProps = PropsWithChildren & {
   label: string;
   href: string;
-  dropdownInner?: ReactNode;
 };
 
-export const NavItem = ({ label, href, dropdownInner }: NavItemProps) => {
+export const NavItem = ({ label, href, children }: NavItemProps) => {
   const [isDropdownOpen, setDropdownOpen] = useState(false);
 
   const dropdownToggleRef = useRef<HTMLButtonElement>(null);
@@ -58,20 +57,25 @@ export const NavItem = ({ label, href, dropdownInner }: NavItemProps) => {
   }, [pathname]);
 
   return (
-    <div className={cx('menu-item-wrapper')} onBlur={handleBlur} onKeyDown={handleEscKeyPress}>
+    <div
+      className={cx('menu-item-wrapper')}
+      onBlur={handleBlur}
+      onKeyDown={handleEscKeyPress}
+      data-testid="menu-item"
+    >
       <Link
-        href={href}
+        href={`/${href}`}
         className={cx(
           'menu-item',
           { active: isActive },
-          { 'dropdown-toggle': !!dropdownInner },
+          { 'dropdown-toggle': Boolean(children) },
           { rotate: isDropdownOpen },
         )}
         onMouseLeave={onClose}
         onMouseEnter={onOpen}
       >
         <span className={cx('label')}>{label}</span>
-        {dropdownInner && (
+        {children && (
           <button
             onKeyDown={handleConfirmKeyPress}
             ref={dropdownToggleRef}
@@ -82,9 +86,9 @@ export const NavItem = ({ label, href, dropdownInner }: NavItemProps) => {
           </button>
         )}
       </Link>
-      {dropdownInner && (
+      {children && (
         <DropdownWrapper onMouseLeave={onClose} onMouseEnter={onOpen} isOpen={isDropdownOpen}>
-          {dropdownInner}
+          {children}
         </DropdownWrapper>
       )}
     </div>

src/core/const/index.ts

@@ -2,6 +2,10 @@ export const ANCHORS = {
   ABOUT_COMMUNITY: 'about-community',
   ABOUT_SCHOOL: 'about-school',
   MENTORS_WANTED: 'mentors-wanted',
+  UPCOMING_COURSES: 'upcoming-courses',
+  EVENTS: 'events',
+  MERCH: 'merch',
+  CONTRIBUTE: 'contribute',
 };
 
 export const COURSE_STALE_AFTER_DAYS = 14;

src/shared/__tests__/visual/main.spec.ts

@@ -27,3 +27,15 @@ test('Main page mobile', async ({ page }) => {
   await page.getByTestId('burger').click();
   await expect(mobileMenu).not.toBeInViewport();
 });
+
+test('Main page desktop menu', async ({ page }) => {
+  await page.goto(ROUTES.HOME);
+
+  const elements = page.getByTestId('menu-item');
+  const elementsCount = await elements.count();
+
+  for (let i = 0; i < elementsCount; i++) {
+    await elements.nth(i).hover();
+    await takeScreenshot(page, `Main page desktop - menu open ${i + 1}`);
+  }
+});