feat: Implement responsive main menu drawer with close button and integrate it into the header for small screens.

Author: MaximSamorukov

src/widgets/WebsiteLayoutWidgets/Header/ui/Logo/index.tsx

@@ -4,12 +4,13 @@ import Image from 'next/image';
 import Link from 'next/link';
 import React from 'react';
 import { getDimension } from './utils';
+import { MainMenuBurger } from '@/widgets/WebsiteLayoutWidgets/MainMenuBurger';
 
 export function Logo() {
   const width = useWindowWidth();
   const imgDim = getDimension(width);
   if (width <= 1070) {
-    return <div>M</div>;
+    return <MainMenuBurger />;
   }
   return (
     <Link href={'/3d_printing'}>

src/widgets/WebsiteLayoutWidgets/Header/ui/MenuItems/style.module.scss

@@ -3,4 +3,19 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media (max-width: 1070px) {
+    box-sizing: border-box;
+    font-size: 35px;
+    color: #e49e00;
+  }
+  @media (max-width: 630px) {
+    font-size: 30px;
+  }
+  @media (max-width: 590px) {
+    font-size: 25px;
+  }
+  @media (max-width: 530px) {
+    font-size: 20px;
+  }
 }

src/widgets/WebsiteLayoutWidgets/MainMenuBurger/index.tsx

@@ -1,21 +1,19 @@
 'use client';
 import cn from 'classnames';
-import { useRouter } from 'next/navigation';
-
-import s from './style.module.scss';
 import { MenuDrawer } from './ui/MenuDrawer';
 import { useCallback, useState } from 'react';
+import s from './style.module.scss';
 
 export const MainMenuBurger = () => {
   const [open, setOpen] = useState(false);
+
   const handleOpenModal = () => {
-    setOpen((v) => !v);
+    setOpen(() => true);
   };
   const handleCloseDrawer = useCallback(() => {
-    console.log('on close');
-    //setOpen(false);
+    setOpen(false);
   }, []);
-  console.log('open', open);
+
   return (
     <div className={s.container}>
       <button
@@ -25,7 +23,7 @@ export const MainMenuBurger = () => {
       >
         <div></div>
       </button>
-      <MenuDrawer open={false} onCloseDrawer={handleCloseDrawer} />
+      <MenuDrawer open={open} onCloseDrawer={handleCloseDrawer} />
     </div>
   );
 };

src/widgets/WebsiteLayoutWidgets/MainMenuBurger/ui/MainMenuCloseButton/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import s from './style.module.scss';
+type DrawerCloseButtonProps = {
+  handleCloseDrawer: () => void;
+};
+export function MainMenuDrawerCloseButton({
+  handleCloseDrawer,
+}: DrawerCloseButtonProps) {
+  return (
+    <button className={s.btnContainer} onClick={handleCloseDrawer}>
+      <div className={s.btnCross} />
+    </button>
+  );
+}

src/widgets/WebsiteLayoutWidgets/MainMenuBurger/ui/MainMenuCloseButton/style.module.scss

@@ -0,0 +1,40 @@
+.btn {
+  &Container {
+    all: unset;
+    height: auto;
+    width: auto;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+  &Cross {
+    color: #ebebeb;
+    width: 32px;
+    height: 32px;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      width: 2px;
+      height: 32px;
+      top: 0px;
+      left: 15px;
+      background-color: #ebebeb;
+      transform: rotate(45deg);
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      width: 2px;
+      height: 32px;
+      top: 0px;
+      left: 15px;
+      background-color: #ebebeb;
+      transform: rotate(-45deg);
+    }
+  }
+}

src/widgets/WebsiteLayoutWidgets/MainMenuBurger/ui/MenuDrawer/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+import Drawer from '@mui/material/Drawer';
+import { useRouter, usePathname } from 'next/navigation';
+import React from 'react';
+import cn from 'classnames';
+import { menuItems } from '@/shared/constants/mainMenu';
+import { MainMenuDrawerCloseButton } from '../MainMenuCloseButton';
+import s from './style.module.scss';
+
+type MenuDrawerProps = {
+  open: boolean;
+  onCloseDrawer: () => void;
+};
+export const MenuDrawer: React.FC<MenuDrawerProps> = ({
+  open,
+  onCloseDrawer,
+}) => {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const handleClickLink = (path: string) => {
+    router.push(path);
+    onCloseDrawer();
+  };
+  return (
+    <Drawer
+      onClose={onCloseDrawer}
+      slotProps={{
+        paper: {
+          style: {
+            backgroundColor: 'black',
+          },
+        },
+      }}
+      anchor="left"
+      open={open}
+    >
+      <div className={s.drawerContainer}>
+        <div className={s.drawerControlsContainer}>
+          <MainMenuDrawerCloseButton handleCloseDrawer={onCloseDrawer} />
+        </div>
+        <div className={s.drawerDataContainer}>
+          {menuItems.map((i) => (
+            <div key={i.href} className={s.menuItem}>
+              <button
+                className={cn(s.menuItemLabel, {
+                  [s.menuItemLabelActive]: pathname === i.href,
+                })}
+                onClick={() => handleClickLink(i.href)}
+              >
+                {i.label}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Drawer>
+  );
+};

src/widgets/WebsiteLayoutWidgets/MainMenuBurger/ui/MenuDrawer/style.module.scss

@@ -0,0 +1,54 @@
+@use 'sass:math';
+$WIDTH: 300px;
+
+.drawer {
+  &ControlsContainer {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    box-sizing: border-box;
+    padding-right: 5px;
+  }
+  &DataContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 30px;
+  }
+  &Container {
+    background-color: black;
+    width: $WIDTH;
+    height: auto;
+    &Loader {
+      position: fixed;
+      top: 50%;
+      right: math.div($WIDTH, 2);
+    }
+  }
+}
+
+.menuItem {
+  width: 100%;
+  height: 40px;
+  box-sizing: border-box;
+  padding-left: 50px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+
+  &Label {
+    all: unset;
+    color: #ededed;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 20px;
+    &Active {
+      color: #e49e00;
+    }
+  }
+}