take out switchPanel to the shared and add it to header of Callpage

src/features/Participant/ui/ParticipantCard.tsx

@@ -51,14 +51,18 @@ interface Props {
   avatar: string;
   name: string;
   isActive: boolean;
+  displaySwitch?: boolean;
 }
 
 export const ParticipantCard: React.FC<Props> = ({
   avatar,
   name,
   isActive,
+  displaySwitch = false,
 }) => {
-  return (
+  return displaySwitch ? (
+    <div></div>
+  ) : (
     <Container>
       <UserInfo>
         <img src={avatar} alt="" style={{ width: "44px", height: "44px" }} />

src/shared/ui/switchDisplay/SwitchPanel.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+interface Props {
+  oneSwitch: string;
+  twoSwitch: string;
+  style: Object;
+  state: boolean;
+  onClick: (stateSwitch: boolean) => void;
+}
+
+const SwitchPanel: React.FC<Props> = (props) => {
+  const [displaySwitch, setDisplaySwitch] = useState(props.state);
+
+  function clickRight() {
+    props.onClick(true);
+    setDisplaySwitch(true);
+  }
+
+  function clickLeft() {
+    props.onClick(false);
+    setDisplaySwitch(false);
+  }
+
+  return (
+    <div className={styles.switchPanel} style={props.style}>
+      <div
+        className={
+          displaySwitch ? styles.switch : styles.switch + " " + styles.active
+        }
+        onClick={clickLeft}
+      >
+        <img src={props.oneSwitch} alt="" />
+      </div>
+      <div
+        className={
+          displaySwitch ? styles.switch + " " + styles.active : styles.switch
+        }
+        onClick={clickRight}
+      >
+        <img src={props.twoSwitch} alt="" />
+      </div>
+    </div>
+  );
+};
+
+export default SwitchPanel;

src/shared/ui/switchDisplay/styles.module.css

@@ -0,0 +1,27 @@
+.switchPanel {
+  display: flex;
+  padding: 3px;
+  align-items: center;
+  background: var(--white, #fff);
+  box-shadow: 0px 0px 2px 0px #c5ccd5;
+}
+
+.switch {
+  display: flex;
+  flex: 1 1;
+  aspect-ratio: 1 / 1;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  opacity: 0.5;
+}
+
+.switch:hover {
+  cursor: pointer;
+}
+
+.switch.active {
+  background: var(--grey-6, #f9fafe);
+  box-shadow: 0px 0px 2px 0px #c5ccd5;
+  opacity: 1;
+}

src/widgets/CallInfo.tsx

@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { CopyLink } from "../features/Copy";
+import SwitchPanel from "../shared/ui/switchDisplay/SwitchPanel";
+import oneSwitch from "../../public/icons/view-1.svg";
+import twoSwitch from "../../public/icons/view-2.svg";
+import sidebarState from "../pages/CallPageCustomUI/store/sidebarState";
 
 const Container = styled.div`
   display: flex;
@@ -35,14 +39,33 @@ const Paragraph = styled.p`
   line-height: normal;
 `;
 
+const styleSwitch = {
+  width: "84px",
+  height: "48px",
+  borderRadius: "35px",
+};
+
 const CallInfo: React.FC = () => {
+  const [displaySwitch, setDisplaySwitch] = useState(false);
+
+  function changeDisplay(state: boolean) {
+    setDisplaySwitch(state);
+  }
+
   return (
-    <Container>
+    <Container style={sidebarState.isActive ? {} : { paddingRight: "35px" }}>
       <Info>
         <Title>Информатика 4 класс</Title>
         <CopyLink />
         <Paragraph>18 участников|01:12:45 </Paragraph>
       </Info>
+      <SwitchPanel
+        oneSwitch={oneSwitch}
+        twoSwitch={twoSwitch}
+        style={styleSwitch}
+        onClick={changeDisplay}
+        state={displaySwitch}
+      />
     </Container>
   );
 };

src/widgets/ParticipantsList/ParticipantsList.tsx

@@ -15,9 +15,14 @@ const Container = styled.div`
 interface Props {
   isActive: boolean;
   peopleList: IUser[];
+  displaySwitch?: boolean;
 }
 
-const ParticipantsList: React.FC<Props> = ({ isActive, peopleList }) => {
+const ParticipantsList: React.FC<Props> = ({
+  isActive,
+  peopleList,
+  displaySwitch = false,
+}) => {
   return (
     <Container style={isActive ? { opacity: "1" } : { opacity: "0.5" }}>
       {peopleList.map((people, index) => (
@@ -26,6 +31,7 @@ const ParticipantsList: React.FC<Props> = ({ isActive, peopleList }) => {
           name={people.name}
           isActive={isActive}
           key={index}
+          displaySwitch={displaySwitch}
         />
       ))}
     </Container>

src/widgets/layout/Sidebar/Sidebar.tsx

@@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite";
 import styles from "./styles.module.css";
 import { IUser } from "../../../shared/api/models";
 import ParticipantsList from "../../ParticipantsList/ParticipantsList";
+import SwitchPanel from "../../../shared/ui/switchDisplay/SwitchPanel";
 
 const OpenButton = styled.div`
   position: absolute;
@@ -48,6 +49,12 @@ const Container = styled.div`
   background: rgba(255, 255, 255, 0.95);
 `;
 
+const styleSwitch = {
+  width: "66px",
+  height: "34px",
+  borderRadius: "18px",
+};
+
 interface Props {
   peopleList: IUser[];
 }
@@ -61,12 +68,8 @@ const Sidebar: React.FC<Props> = observer(({ peopleList }) => {
       : store.openSidebar();
   }
 
-  function rightDisplay() {
-    setDisplaySwitch(true);
-  }
-
-  function leftDisplay() {
-    setDisplaySwitch(false);
+  function changeDisplay(state: boolean) {
+    setDisplaySwitch(state);
   }
 
   function changeSelected() {
@@ -106,31 +109,20 @@ const Sidebar: React.FC<Props> = observer(({ peopleList }) => {
           <>
             <div className={styles.joinedHead}>
               <div className={styles.countJoined}>Подключены (12)</div>
-              <div className={styles.switchPanel}>
-                <div
-                  className={
-                    displaySwitch
-                      ? styles.switch
-                      : styles.switch + " " + styles.active
-                  }
-                  onClick={leftDisplay}
-                >
-                  <img src={oneSwitch} alt="" />
-                </div>
-                <div
-                  className={
-                    displaySwitch
-                      ? styles.switch + " " + styles.active
-                      : styles.switch
-                  }
-                  onClick={rightDisplay}
-                >
-                  <img src={twoSwitch} alt="" />
-                </div>
-              </div>
+              <SwitchPanel
+                oneSwitch={oneSwitch}
+                twoSwitch={twoSwitch}
+                style={styleSwitch}
+                state={displaySwitch}
+                onClick={changeDisplay}
+              />
             </div>
             <div className={styles.list}>
-              <ParticipantsList peopleList={peopleList} isActive={true} />
+              <ParticipantsList
+                peopleList={peopleList}
+                isActive={true}
+                displaySwitch={displaySwitch}
+              />
             </div>
             <div className={styles.joinedHead}>
               <div className={styles.countJoined}>Не подключены (4)</div>

src/widgets/layout/Sidebar/styles.module.css

@@ -49,38 +49,6 @@
   font-weight: 600;
 }
 
-.switchPanel {
-  display: flex;
-  width: 66px;
-  height: 34px;
-  padding: 0px 4px;
-  align-items: center;
-  gap: 6px;
-  border-radius: 18px;
-  background: var(--white, #fff);
-  box-shadow: 0px 0px 2px 0px #c5ccd5;
-}
-
-.switch {
-  display: flex;
-  width: 28px;
-  height: 28px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 18px;
-  opacity: 0.5;
-}
-
-.switch:hover {
-  cursor: pointer;
-}
-
-.switch.active {
-  background: var(--grey-6, #f9fafe);
-  box-shadow: 0px 0px 2px 0px #c5ccd5;
-  opacity: 1;
-}
-
 .list {
   overflow-y: auto;
   align-self: flex-start;