Mobile: Inprogress

src/components/pages/Stream/AdditionalButton/AdditionalButton.tsx

@@ -0,0 +1,21 @@
+import { Button } from "components/shared/Button/Button";
+import more from "images/icons/More.svg";
+
+
+export const AdditionalButton: React.FC<any> = ({ active, onClick }) => {
+  const button = {
+    icon: more,
+    inactive: "",
+    active: "",
+    type: "",
+  };
+  return (
+    <div
+      style={active ? { background: "#2E3038" } : { background: "transparent" }}
+      className="toolbar-button-area"
+      onClick={() => onClick()}
+    >
+      <Button button={button}></Button>
+    </div>
+  );
+};

src/components/pages/Stream/ControlButton/ControlButton.tsx

@@ -6,11 +6,13 @@ import { useTranslation } from "react-i18next";
 
 import { Button } from "components/shared/Button/Button";
 
-
+export const ControlButton: React.FC<any> = ({
-export const ControlButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
+  onClick,
+  isSidebarWide,
+  isActive,
+}) => {
   const { t } = useTranslation();
 
-  const [active, setActive] = useState(false);
   const [button, setButton] = useState({
     icon: control,
     active: "request-control-btn",
@@ -19,23 +21,19 @@ export const ControlButton: React.FC<any> = ({ onClick, isSidebarWide }) => {
   });
 
   useEffect(() => {
-    setButton({ ...button, icon: active ? control : controlOff });
+    setButton({ ...button, icon: isActive ? control : controlOff });
-  }, [active]);
+  }, [isActive]);
 
   function handleClick() {
     onClick();
-    setActive((prev) => !prev);
   }
 
   return (
-    <div
+    <div onClick={handleClick} className="toolbar-button-area">
-      onClick={handleClick}
-      className="toolbar-button-area"
-    >
       <Button
         isSidebarWide={isSidebarWide}
         button={button}
-        active={active}
+        active={isActive}
       ></Button>
     </div>
   );

src/components/pages/Stream/ControlPanel/ControlPanel.tsx

@@ -8,15 +8,18 @@ export const ControlPanel: React.FC<any> = ({
   handleOpenSharePopup,
   handleOpenExitPopup,
   handleMuteClick,
+  handleControlClick,
+
   isMuted,
+  isControl,
   isSidebarWide
 }) => {
   
   return (
     <div className="toolbar-field-part">
       <div className="toolbar-button-container-border-line"></div>
-      <ControlButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></ControlButton>
+      <ControlButton isActive={isControl} isSidebarWide={isSidebarWide} onClick={handleControlClick}></ControlButton>
-      <MicroButton isSidebarWide={isSidebarWide} isMuted={isMuted} onClick={handleMuteClick}></MicroButton>
+      <MicroButton isSidebarWide={isSidebarWide} isActive={isMuted} onClick={handleMuteClick}></MicroButton>
       <div className="toolbar-button-container-border-line"></div>
       <ShareButton isSidebarWide={isSidebarWide} onClick={handleOpenSharePopup}></ShareButton>
       <LanguageButton isSidebarWide={isSidebarWide} onClick={() => console.log("click!")}></LanguageButton>

src/components/pages/Stream/MicroButton/MicroButton.tsx

@@ -8,7 +8,7 @@ import { Button } from "components/shared/Button/Button";
 
 export const MicroButton: React.FC<any> = ({
   onClick,
-  isMuted,
+  isActive,
   isSidebarWide,
 }) => {
   const { t } = useTranslation();
@@ -19,27 +19,20 @@ export const MicroButton: React.FC<any> = ({
     type: "microphone",
   });
 
-  const [active, setActive] = useState(false);
-
   useEffect(() => {
-    setButton({ ...button, icon: active ? microOn : microOff });
+    setButton({ ...button, icon: isActive ? microOn : microOff });
-  }, [active]);
+  }, [isActive]);
 
   function handleClick() {
     onClick();
-    setActive((prev) => !prev);
   }
 
   return (
-    <div
+    <div tabIndex={-1} onClick={handleClick} className="toolbar-button-area">
-      tabIndex={-1}
-      onClick={handleClick}
-      className="toolbar-button-area"
-    >
       <Button
         isSidebarWide={isSidebarWide}
         button={button}
-        active={isMuted}
+        active={isActive}
       ></Button>
     </div>
   );

src/components/pages/Stream/PlayerComponent/PlayerComponent.tsx

@@ -1,7 +1,9 @@
 import "./PlayerStyles.css";
 import React, { useEffect, useState } from "react";
-import { useHistory, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import useWindowDimensions from "hooks/useWindowDimensions";
 
+import useMobile from "hooks/useMobile";
 import { Sidebar } from "components/pages/Stream/Sidebar/Sidebar";
 
 import { connectSession } from "store/reducers/ActionCreator";
@@ -13,11 +15,18 @@ type link = {
 };
 
 export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
+  const { isMobile } = useMobile();
+  const windowDimensions = useWindowDimensions();
+  const width = windowDimensions.width;
+  const height = windowDimensions.height;
+  const [popup, setPopup] = useState(false);
+
+  console.log(popup);
+
   const { id } = useParams<link>();
-  const [click, setClick] = useState(false)
+  const [click, setClick] = useState(false);
   const dispatch = useAppDispatch();
   const { cleanErrors } = sessionSlice.actions;
-  const history = useHistory();
 
   useEffect(() => {
     dispatch(connectSession(id)).then((res: any) => {
@@ -27,19 +36,37 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
     });
     return () => {
       dispatch(cleanErrors());
+      window.removeEventListener("change ", (event: any) => {
+        setPopup(false);
+      });
     };
   }, []);
 
   const { url } = useAppSelector((state) => state.sessionReducer);
 
   const exitPopup = () => {
-    setClick(prev => !prev)
+    setClick((prev) => !prev);
-  }
+  };
+
+  useEffect(() => {
+    if (isMobile) {
+      if (width < height) {
+        setPopup(true);
+      } else {
+        setPopup(false);
+      }
+    }
+  }, [width, height, isMobile]);
 
   return (
     <>
+      {popup && (
+        <div className="popup-screen" style={{ height: height }}>
+          <h2>Переверните устройство</h2>
+        </div>
+      )}
       <iframe
-        onLoad={(e: any) => e.target.focus()} 
+        onLoad={(e: any) => e.target.focus()}
         id="player"
         onBlur={(e) => e.target.focus()} /// element loosing focus and keyboard input doesn't work
         src={url}
@@ -48,7 +75,12 @@ export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
         allowFullScreen={true}
       ></iframe>
 
-      <Sidebar exitPopup={click} closeStream={closeStream}></Sidebar>
+      <Sidebar
+        heightDevice={height}
+        isMobile={isMobile}
+        exitPopup={click}
+        closeStream={closeStream}
+      ></Sidebar>
     </>
   );
 };

src/components/pages/Stream/PlayerComponent/PlayerStyles.css

@@ -5,4 +5,22 @@
 
 .playerOff {
    pointer-events: none;
-}
+}
+
+.popup-screen {
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   display: flex;
+   z-index: 99;
+   background: #1C1D21;
+   font-style: normal;
+   font-weight: 400;
+   font-size: 24px;
+   line-height: 125%;
+   align-items: center;
+   justify-content: center;
+  
+}
+

src/components/pages/Stream/Sidebar/Sidebar.css

@@ -105,6 +105,8 @@
 }
 
 .toolbar-button-area {
+  border-radius: 4px;
+
   cursor: pointer;
   align-items: center;
   position: relative;

src/components/pages/Stream/Sidebar/Sidebar.tsx

@@ -1,175 +1,49 @@
 import "./Sidebar.css";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
 
-import { UserList } from "components/pages/Stream/UserList/UserList";
+import { SidebarDesktop } from "../SidebarDesktop/SidebarDesktop";
-import { FullscreenButton } from "components/pages/Stream/FullscreenButton/FullscreenButton";
+import { SidebarMobile } from "../SidebarMobile/SidebarMobile";
-import { PopupShare } from "components/pages/Stream/PopupShare/PopupShare";
-import { PopupExit } from "components/pages/Stream/PopupExit/PopupExit";
-import { ControlPanel } from "../ControlPanel/ControlPanel";
-import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton";
-
-import {
-  sidebarVariants,
-  popupAnimation,
-  wideSidebarVariants,
-  wideSidebarAdminVariants,
-} from "utils/animationProps";
-
-export const Sidebar: React.FC<any> = ({ closeStream, exitPopup }) => {
-  const [open, setOpen] = useState(false);
-  const [popup, setPopup] = useState({
-    popup1: false,
-    popup2: false,
-  });
 
 
-  useEffect(() => {
+export const Sidebar: React.FC<any> = ({ closeStream, exitPopup, isMobile, heightDevice }) => {
-    console.log('test')
-  }, [exitPopup])
-
-  const isAdmin = true;
-
-  const [selected, setSelected] = useState(false);
-  const [wideSidebar, setWideSidebar] = useState(false);
-
   const [isMuted, setMuted] = useState(true);
+  const [isControl, setControl] = useState(false);
+  const [height, setHeight] = useState(heightDevice);
+
+
+
+
+  console.log(isMobile);
 
   const handleMuteClick = () => {
     setMuted((prev) => !prev);
   };
 
-  function handleClosePopups() {
+  const handleControlClick = () => {
-    setPopup({
+    setControl((prev) => !prev);
-      popup1: false,
-      popup2: false,
-    });
-  }
-
-  function handleOpenSharePopup() {
-    setPopup({
-      popup1: true,
-      popup2: false,
-    });
-  }
-
-  function handleOpenExitPopup() {
-    setPopup({
-      popup1: false,
-      popup2: true,
-    });
-  }
-
-  function closeSideBar() {
-    setSelected(false);
-    setOpen(false);
-    setWideSidebar(false);
-  }
-
-  useEffect(() => () => unmountComponent(), []);
-
-
-  function unmountComponent() {
-    setOpen(false);
-    setPopup({
-      popup1: false,
-      popup2: false,
-    });
-  }
-
-  const setAnimation = () => {
-    if (isAdmin) return wideSidebarAdminVariants;
-    else {
-      return wideSidebarVariants;
-    }
   };
 
   return (
     <>
-      <motion.div
+      {isMobile ? (
-       /// onHoverEnd={() => /// closeSideBar()}
+        <SidebarMobile
-        initial={false}
+          height={height}
-        animate={open ? "open" : "closed"}
+          isMuted={isMuted}
-        variants={wideSidebar ? setAnimation() : sidebarVariants}
+          isControl={isControl}
-        className="toolbar-container"
+          handleMuteClick={handleMuteClick}
-      >
+          handleControlClick={handleControlClick}
-        <div
+          closeStream={closeStream}
-          style={wideSidebar ? { overflow: "hidden" } : { overflow: "visible" }}
+        ></SidebarMobile>
-          className="toolbar-field"
+      ) : (
-        >
+        <SidebarDesktop
-          <div className="toolbar-field-part">
+          isMuted={isMuted}
-            <FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
+          isControl={isControl}
-            <div className="toolbar-button-container-border-line"></div>
+          handleMuteClick={handleMuteClick}
-            <UserList
+          handleControlClick={handleControlClick}
-              closeSidebar={closeSideBar}
+          closeStream={closeStream}
-              isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
+          exitPopup={exitPopup}
-              isAdmin={isAdmin}
+        ></SidebarDesktop>
-            ></UserList>
+      )}
-          </div>
-          <motion.div
-            onHoverStart={() => setWideSidebar(true)}
-            className="toolbar-field-part"
-          >
-            <WideSidebarButton
-              isSidebarWide={wideSidebar}
-              close={closeSideBar}
-            ></WideSidebarButton>
-          </motion.div>
-          <ControlPanel
-            isSidebarWide={wideSidebar}
-            isMuted={isMuted}
-            handleMuteClick={handleMuteClick}
-            handleOpenSharePopup={handleOpenSharePopup}
-            handleOpenExitPopup={handleOpenExitPopup}
-          ></ControlPanel>
-        </div>
-        <AnimatePresence>
-          {!open && (
-            <motion.div
-              variants={popupAnimation}
-              initial={"hidden"}
-              animate={"show"}
-              exit={"hidden"}
-              onClick={() => setOpen(true)}
-              className="toolbar-open-button"
-            >
-              <span className="toolbar-open-button-icon"></span>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </motion.div>
-      <AnimatePresence>
-        {popup.popup1 && (
-          <motion.div
-            key={1}
-            variants={popupAnimation}
-            initial={"hidden"}
-            animate={"show"}
-            exit={"hidden"}
-          >
-            <PopupShare setClose={handleClosePopups}></PopupShare>
-          </motion.div>
-        )}
-
-        {popup.popup2 && (
-          <motion.div
-            key={2}
-            variants={popupAnimation}
-            initial={"hidden"}
-            animate={"show"}
-            exit={"hidden"}
-          >
-            <PopupExit
-              onExit={closeStream}
-              setClose={handleClosePopups}
-            ></PopupExit>
-          </motion.div>
-        )}
-      </AnimatePresence>
     </>
   );
 };
-function getElementById(arg0: string) {
-  throw new Error("Function not implemented.");
-}
-

src/components/pages/Stream/SidebarDesktop/SidebarDesktop.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { UserList } from "components/pages/Stream/UserList/UserList";
+import { FullscreenButton } from "components/pages/Stream/FullscreenButton/FullscreenButton";
+import { PopupShare } from "components/pages/Stream/PopupShare/PopupShare";
+import { PopupExit } from "components/pages/Stream/PopupExit/PopupExit";
+import { ControlPanel } from "../ControlPanel/ControlPanel";
+import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton";
+
+import {
+  sidebarVariants,
+  popupAnimation,
+  wideSidebarVariants,
+  wideSidebarAdminVariants,
+} from "utils/animationProps";
+
+export const SidebarDesktop: React.FC<any> = ({
+  closeStream,
+  exitPopup,
+  isMuted,
+  isControl,
+  handleMuteClick,
+  handleControlClick,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [popup, setPopup] = useState({
+    popup1: false,
+    popup2: false,
+  });
+
+  useEffect(() => {
+    console.log("test");
+  }, [exitPopup]);
+
+  const isAdmin = true;
+
+  const [wideSidebar, setWideSidebar] = useState(false);
+
+  function handleClosePopups() {
+    setPopup({
+      popup1: false,
+      popup2: false,
+    });
+  }
+
+  function handleOpenSharePopup() {
+    setPopup({
+      popup1: true,
+      popup2: false,
+    });
+  }
+
+  function handleOpenExitPopup() {
+    setPopup({
+      popup1: false,
+      popup2: true,
+    });
+  }
+
+  function closeSideBar() {
+    setOpen(false);
+    setWideSidebar(false);
+  }
+
+  useEffect(() => () => unmountComponent(), []);
+
+  function unmountComponent() {
+    setOpen(false);
+    setPopup({
+      popup1: false,
+      popup2: false,
+    });
+  }
+
+  const setAnimation = () => {
+    if (isAdmin) return wideSidebarAdminVariants;
+    else {
+      return wideSidebarVariants;
+    }
+  };
+
+  return (
+    <>
+      <motion.div
+        /// onHoverEnd={() => /// closeSideBar()}
+        initial={false}
+        animate={open ? "open" : "closed"}
+        variants={wideSidebar ? setAnimation() : sidebarVariants}
+        className="toolbar-container"
+      >
+        <div
+          style={wideSidebar ? { overflow: "hidden" } : { overflow: "visible" }}
+          className="toolbar-field"
+        >
+          <div className="toolbar-field-part">
+            <FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
+            <div className="toolbar-button-container-border-line"></div>
+            <UserList
+              closeSidebar={closeSideBar}
+              isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
+              isAdmin={isAdmin}
+            ></UserList>
+          </div>
+          <motion.div
+            onHoverStart={() => setWideSidebar(true)}
+            className="toolbar-field-part"
+          >
+            <WideSidebarButton
+              isSidebarWide={wideSidebar}
+              close={closeSideBar}
+            ></WideSidebarButton>
+          </motion.div>
+          <ControlPanel
+            isControl={isControl}
+            handleControlClick={handleControlClick}
+            isSidebarWide={wideSidebar}
+            isMuted={isMuted}
+            handleMuteClick={handleMuteClick}
+            handleOpenSharePopup={handleOpenSharePopup}
+            handleOpenExitPopup={handleOpenExitPopup}
+          ></ControlPanel>
+        </div>
+        <AnimatePresence>
+          {!open && (
+            <motion.div
+              variants={popupAnimation}
+              initial={"hidden"}
+              animate={"show"}
+              exit={"hidden"}
+              onClick={() => setOpen(true)}
+              className="toolbar-open-button"
+            >
+              <span className="toolbar-open-button-icon"></span>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
+      <AnimatePresence>
+        {popup.popup1 && (
+          <motion.div
+            key={1}
+            variants={popupAnimation}
+            initial={"hidden"}
+            animate={"show"}
+            exit={"hidden"}
+          >
+            <PopupShare setClose={handleClosePopups}></PopupShare>
+          </motion.div>
+        )}
+
+        {popup.popup2 && (
+          <motion.div
+            key={2}
+            variants={popupAnimation}
+            initial={"hidden"}
+            animate={"show"}
+            exit={"hidden"}
+          >
+            <PopupExit
+              onExit={closeStream}
+              setClose={handleClosePopups}
+            ></PopupExit>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};

src/components/pages/Stream/SidebarMobile/SidebarMobile.tsx

@@ -0,0 +1,64 @@
+import { FullscreenButton } from "../FullscreenButton/FullscreenButton";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  sidebarVariants,
+  popupAnimation,
+  wideSidebarVariants,
+  wideSidebarAdminVariants,
+} from "utils/animationProps";
+import { useState } from "react";
+import { WideSidebarButton } from "../WideSidebarButton/WideSidebarButton";
+import { UserButtonMobile } from "../UserButtonMobile/UserButtonMobile";
+import { ControlButton } from "../ControlButton/ControlButton";
+import { MicroButton } from "../MicroButton/MicroButton";
+import { AdditionalButton } from "../AdditionalButton/AdditionalButton";
+
+export const SidebarMobile: React.FC<any> = ({ height }) => {
+  const [open, setOpen] = useState(false);
+  const [userList, setUserList] = useState(false);
+  const [popupAdditional, setPopupAdditipnal] = useState(false);
+  return (
+    <motion.div
+      initial={false}
+      animate={open ? "open" : "closed"}
+      variants={sidebarVariants}
+      style={{ height: height}}
+      className="toolbar-container"
+    >
+      <div className="toolbar-field">
+        <div className="toolbar-field-part">
+          <FullscreenButton isSidebarWide={false}> </FullscreenButton>
+          <WideSidebarButton close={() => setOpen(false)}></WideSidebarButton>
+          <div className="toolbar-button-container-border-line"></div>
+          <UserButtonMobile
+            active={userList}
+            onClick={() => setUserList(true)}
+          ></UserButtonMobile>
+        </div>
+        <div className="toolbar-field-part">
+          <ControlButton></ControlButton>
+          <MicroButton></MicroButton>
+          <div className="toolbar-button-container-border-line"></div>
+          <AdditionalButton
+            active={popupAdditional}
+            onClick={() => setPopupAdditipnal(true)}
+          ></AdditionalButton>
+        </div>
+        <AnimatePresence>
+          {!open && (
+            <motion.div
+              variants={popupAnimation}
+              initial={"hidden"}
+              animate={"show"}
+              exit={"hidden"}
+              onClick={() => setOpen(true)}
+              className="toolbar-open-button"
+            >
+              <span className="toolbar-open-button-icon"></span>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </motion.div>
+  );
+};

src/components/pages/Stream/UserButtonMobile/UserButtonMobile.tsx

@@ -0,0 +1,20 @@
+import persons from "images/icons/Persons.svg";
+import { Button } from "components/shared/Button/Button";
+
+export const UserButtonMobile: React.FC<any> = ({ active, onClick }) => {
+  const button = {
+    icon: persons,
+    inactive: "",
+    active: "",
+    type: "",
+  };
+  return (
+    <div
+      style={active ? { background: "#2E3038" } : { background: "transparent" }}
+      className="toolbar-button-area"
+      onClick={() => onClick()}
+    >
+      <Button button={button}></Button>
+    </div>
+  );
+};

src/hooks/useMobile.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+
+export default function useDeviceDetect() {
+  const [isMobile, setMobile] = useState(false);
+
+  useEffect(() => {
+    const userAgent =
+      typeof window.navigator === "undefined" ? "" : navigator.userAgent;
+    const mobile = Boolean(
+      userAgent.match(
+        /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
+      )
+    );
+    setMobile(mobile);
+  }, []);
+
+  return { isMobile };
+}

src/hooks/useWindowDimensions.ts

@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+
+function getWindowDimensions() {
+  const { width: width, height: height } = window.visualViewport;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowDimensions;
+}

src/images/icons/More.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12Z" fill="white"/>
+<path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="white"/>
+<path d="M22 12C22 13.1046 21.1046 14 20 14C18.8954 14 18 13.1046 18 12C18 10.8954 18.8954 10 20 10C21.1046 10 22 10.8954 22 12Z" fill="white"/>
+</svg>

src/images/icons/Persons.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.4495 8.63457C17.4495 10.6419 15.9051 12.7428 13.9999 12.7428C12.0948 12.7428 10.5504 10.6419 10.5504 8.63457C10.5504 6.62725 12.0948 5 13.9999 5C15.9051 5 17.4495 6.62725 17.4495 8.63457Z" fill="#C5C7CE"/>
+<path d="M14 19.9999C17.4171 19.9999 18.4866 20.0186 19.3999 19.4209C19.8272 19.1412 20.0379 18.6262 19.9944 18.0927C19.935 17.364 19.6934 16.6363 19.4474 16.0591C19.1244 15.3012 18.9916 14.9503 18.4873 14.416C17.2309 13.0848 15.7818 14.9671 14 14.9671C12.2182 14.9671 10.7691 13.0848 9.51271 14.416C9.00842 14.9503 8.87561 15.3012 8.55259 16.0591C8.30658 16.6363 8.06495 17.364 8.0056 18.0927C7.96214 18.6262 8.17276 19.1412 8.6001 19.4209C9.51336 20.0186 10.5829 19.9999 14 19.9999Z" fill="#C5C7CE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8041 10.0751C11.7912 9.29544 12.4495 7.94506 12.4495 6.63457C12.4495 6.23357 12.3879 5.84773 12.274 5.48701C11.2435 6.11561 10.5503 7.28985 10.5503 8.63469C10.5503 9.11967 10.6405 9.61012 10.8041 10.0751ZM8.91837 10.7415C7.0509 10.6827 5.55037 8.61317 5.55037 6.63457C5.55037 4.62725 7.09478 3 8.99993 3C9.82378 3 10.5802 3.3043 11.1734 3.81204C9.57742 4.81661 8.55031 6.64022 8.55031 8.63469C8.55031 9.35547 8.68173 10.0702 8.91837 10.7415ZM6.0089 17.9735C4.79527 17.9257 4.16752 17.7923 3.6001 17.4209C3.17276 17.1412 2.96214 16.6262 3.0056 16.0927C3.06495 15.364 3.30658 14.6363 3.55259 14.0591L3.60475 13.9365C3.89151 13.2617 4.03642 12.9206 4.51271 12.416C5.27428 11.6091 6.10665 11.9829 7.041 12.4025C7.42296 12.574 7.82195 12.7532 8.24012 12.8625C8.17815 12.9202 8.11747 12.9805 8.05815 13.0434C7.33114 13.8137 7.06365 14.4459 6.77613 15.1255L6.71268 15.2751C6.42491 15.9502 6.09598 16.9012 6.01215 17.9304C6.01098 17.9447 6.0099 17.9591 6.0089 17.9735ZM14.7454 14.8664C14.8661 15.2559 14.9603 15.6741 14.9944 16.0927C15.0379 16.6262 14.8272 17.1412 14.3999 17.4209C13.5141 18.0007 12.4811 18.0005 9.30138 18L9 17.9999L8.69862 18C8.45849 18 8.2306 18 8.01409 17.9998C8.08546 17.3025 8.31698 16.6119 8.55254 16.0592L8.60469 15.9366C8.89145 15.2618 9.03637 14.9208 9.51265 14.4161C10.2742 13.6092 11.1066 13.983 12.0409 14.4026C12.648 14.6753 13.2982 14.9672 13.9999 14.9672C14.2551 14.9672 14.5035 14.9286 14.7454 14.8664ZM13.7595 12.7318C13.1417 12.6743 12.5687 12.3982 12.083 11.9825C12.579 11.877 13.0451 11.9475 13.4873 12.416C13.5925 12.5274 13.6815 12.6309 13.7595 12.7318Z" fill="#C5C7CE"/>
+</svg>

src/images/icons/collapseButton.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 17L11 12L16 7" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 22L7 12L7 2" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/index.css

@@ -27,7 +27,7 @@ button {
 }
 
 .main {
-  margin: 240px auto 0 auto;
+  margin: 0 auto;
   width: 1440px;
   box-sizing: border-box;
 }