268-feat: Rework mobile menu

src/app/layouts/base-layout/components/footer/footer.test.tsx

@@ -1,7 +1,7 @@
 import { type Mock, describe, expect, it } from 'vitest';
 import { Footer } from './footer';
 import { renderWithRouter } from '@/shared/__tests__/utils';
 import { useWindowSize } from '@/shared/hooks/use-window-size';
 
 vi.mock('@/shared/hooks/use-window-size', () => ({ useWindowSize: vi.fn().mockImplementation(() => ({ width: 1200 })) }));
 vi.mock('@/shared/hooks/use-data-by-name', () => ({ useDataByName: vi.fn().mockImplementation(() => ({ data: [] })) }));
@@ -36,23 +36,22 @@
     expect(desktopView).toBeInTheDocument();
   });
 
-  it('should render mobile view and have correct class - mobile-view', () => {
+  it('should render mobile view', () => {
     (useWindowSize as Mock).mockReturnValueOnce({ width: 800 });
 
     const { getByTestId } = renderWithRouter(<Footer />);
     const mobileView = getByTestId('mobile-view');
 
     expect(mobileView).toBeInTheDocument();
-    expect(mobileView).toHaveClass('mobile-view');
   });
 
-  it('should render "About Community" link and correct href in mobile view', () => {
+  it('should render "Community" link and correct href in mobile view', () => {
     (useWindowSize as Mock).mockReturnValueOnce({ width: 800 });
 
     const { getByText } = renderWithRouter(<Footer />);
-    const aboutLink = getByText('About Community');
+    const communityLink = getByText('Community');
 
-    expect(aboutLink).toBeInTheDocument();
-    expect(aboutLink).toHaveAttribute('href', '/community/#about');
+    expect(communityLink).toBeInTheDocument();
+    expect(communityLink).toHaveAttribute('href', '/community');
   });
 });

src/widgets/mobile-view/ui/mobile-view.module.scss

@@ -0,0 +1,29 @@
+.mobile-view {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 16px;
+  align-items: baseline;
+  justify-content: flex-start;
+
+  width: 100%;
+}
+
+.category-link {
+  font-size: 24px;
+  font-weight: $font-weight-bold;
+}
+
+.divider {
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid currentcolor;
+}
+
+.dark {
+  color: $color-gray-600;
+}
+
+.light {
+  color: $color-gray-100;
+}

src/widgets/mobile-view/ui/mobile-view.tsx

@@ -1,59 +1,58 @@
+import classNames from 'classnames/bind';
 import { Link } from 'react-router-dom';
 import { ROUTES } from '@/app/const';
 import { Logo } from '@/shared/ui/logo';
 import { SchoolMenu } from '@/widgets/school-menu';
 
-import './mobile-view.scss';
+import styles from './mobile-view.module.scss';
 
-interface MobileViewProps {
-  type: 'header' | 'footer';
-}
+const cx = classNames.bind(styles);
+
+type DividerProps = {
+  color: 'light' | 'dark';
+};
 
-const Divider = ({ type }: MobileViewProps) => (
-  <div className={`divider ${type === 'header' ? 'dark' : 'light'}`} />
+const Divider = ({ color }: DividerProps) => (
+  <hr className={cx('divider', color)} />
 );
 
+type MobileViewProps = {
+  type: 'header' | 'footer';
+};
+
 export const MobileView = ({ type }: MobileViewProps) => {
   const color = type === 'header' ? 'dark' : 'light';
   const logoView = type === 'header' ? null : 'with-border';
 
   return (
-    <div className="mobile-view" data-testid="mobile-view">
+    <nav className={cx('mobile-view')} data-testid="mobile-view">
       <Link to={ROUTES.HOME}>
         <Logo type={logoView} />
       </Link>
 
-      <Link to={`/${ROUTES.COMMUNITY}/#about`} className={`main-link ${color}`}>
-        About Community
-      </Link>
-
-      <Divider type={type} />
-
-      <SchoolMenu heading="rs school" color={color} />
+      <Divider color={color} />
 
-      <Divider type={type} />
+      <Link to={ROUTES.HOME} className={cx('category-link', color)}>
+        RS School
+      </Link>
 
-      <SchoolMenu heading="all courses" color={color} />
+      <SchoolMenu heading="rs school" hasTitle={false} color={color} />
 
-      <Divider type={type} />
+      <Divider color={color} />
 
-      <Link to={`/${ROUTES.COMMUNITY}/#community`} className={`main-link mt ${color}`}>
-        Community
+      <Link to={ROUTES.COURSES} className={cx('category-link', color)}>
+        Courses
       </Link>
 
-      <Divider type={type} />
+      <SchoolMenu heading="all courses" hasTitle={false} color={color} />
 
-      <Link to={`/${ROUTES.COMMUNITY}/#events`} className={`main-link ${color}`}>
-        Events
-      </Link>
-
-      <Divider type={type} />
+      <Divider color={color} />
 
-      <Link to={`/${ROUTES.COMMUNITY}/#merch`} className={`main-link ${color}`}>
-        Merch
+      <Link to={ROUTES.COMMUNITY} className={cx('category-link', color)}>
+        Community
       </Link>
 
-      <Divider type={type} />
-    </div>
+      <SchoolMenu heading="community" hasTitle={false} color={color} />
+    </nav>
   );
 };