add menu person

src/components/Btn_notification/Btn_notification.js

@@ -0,0 +1,12 @@
+import "./Btn_notification.scss";
+
+
+const click = () => console.log ("Кнопка нажата");
+
+export const Btn_notification = () => {
+  return (
+    <div className="Btn_notification">
+      <button className="notification" onClick = {click}><div className="badge"/></button>
+    </div>
+  );
+};

src/components/Btn_notification/Btn_notification.scss

@@ -0,0 +1,21 @@
+.notification {
+    position: absolute;
+    background: url(../../assets/bell.svg) no-repeat;
+    width:24px;
+    Height: 24px;
+    margin-left: 23px;
+    margin-top: 28px;
+    border:none;
+    cursor:pointer;
+}
+
+.badge {
+    position:relative;
+    background: #FE6470;
+    width: 6px;
+    height: 6px;
+    border-radius: 50px;
+    margin-left: 9px;
+    margin-bottom: 15px;
+}
+

src/components/Btn_notification/index.js

@@ -0,0 +1 @@
+export * from "./Btn_notification";

src/components/Btn_sms/Btn_sms.js

@@ -0,0 +1,12 @@
+import "./Btn_sms.scss";
+
+
+const clickSms = () => console.log ("Кнопка смс нажата");
+
+export const Btn_sms = () => {
+  return (
+    <div className="Btn_sms">
+      <button className="sms" onClick = {clickSms}/>
+    </div>
+  );
+};

src/components/Btn_sms/Btn_sms.scss

@@ -0,0 +1,10 @@
+.sms {
+    position: absolute;
+    background: url(../../assets/sms.svg) no-repeat;
+    width:24px;
+    height: 24px;
+    margin-left: 67px;
+    margin-top: 29px;
+    border:none;
+    cursor:pointer;
+}

src/components/Btn_sms/index.js

@@ -0,0 +1 @@
+export * from "./Btn_sms";

src/components/Dropdown_person/Btn_down/Btn_down.js

@@ -0,0 +1,16 @@
+import "./Btn_down.scss";
+import btn_down from "../../../assets/down.svg";
+
+
+
+export const Btn_down = () => {
+
+  return (
+    <div className="Btn_down">    
+            <button className="BtnDown"><img src={btn_down} className="Down_icon" alt="image"/></button>
+
+        </div>            
+  )
+
+
+};

src/components/Dropdown_person/Btn_down/Btn_down.scss

@@ -0,0 +1,9 @@
+.BtnDown{
+    width: 40px;
+    height: 40px;
+    background: none;
+    border:none;
+    margin-top: 15px;
+    cursor:pointer;
+
+}

src/components/Dropdown_person/Btn_down/index.js

@@ -0,0 +1 @@
+export * from "./Btn_down";

src/components/Dropdown_person/Dropdown_person.js

@@ -0,0 +1,51 @@
+import "./Dropdown_person.scss";
+import React, { useState } from 'react';
+import person from "../../assets/image 51.svg";
+/* import {Dropmenu} from "./Dropmenu"; */
+import {Btn_sms} from "../Btn_sms";
+import {Btn_notification} from "../Btn_notification";
+import {Btn_down} from "./Btn_down";
+import personOne from "../../assets/image 54.svg";
+import personTwo from "../../assets/image 54.svg";
+import persona from "../../assets/image 55.svg";
+
+
+
+
+export const Dropdown_person = () => {
+
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => {
+    setOpen(!open);
+  };
+  const iconOupen = function () {
+    console.log('../../assets/image 54.svg');
+  };
+  const iconOupenTwo = function () {
+    console.log('../../assets/image 54.svg');
+  };
+  const iconOupenThree = function () {
+    console.log('../../assets/image 55.svg');
+  };
+
+  return (
+    <div className="Dropdown_person">    
+      <Btn_notification />
+      <Btn_sms />
+        <button  id="menu" className={open ? 'Dropdown-Button active' : 'Dropdown-Button'} onClick={handleOpen}><img src={person} className="person" alt="image"/>  
+          {open ? (
+          <div className="New">
+        <div  onClick={iconOupen}  className="submenu-dropdown"><img src={personOne} className="person" alt="image"/></div>
+        <div onClick={iconOupenTwo} className="submenu-dropdown" ><img src={personTwo} className="person" alt="image"/></div>
+        <div onClick={iconOupenThree} className="submenu-dropdown" ><img src={persona} className="person" alt="image"/></div>
+        </div>
+      ) : null}
+    </button>   
+
+      <Btn_down />
+    </div>
+  )
+
+
+};

src/components/Dropdown_person/Dropdown_person.scss

@@ -0,0 +1,28 @@
+.Dropdown_person {
+    display: flex;
+    max-width: 300px;
+    margin-left: 980px
+}
+#menu {
+    margin-left: 200px;
+    margin-bottom: 28px;
+    background: none;
+    border: none;
+    cursor:pointer;
+
+}
+
+.person {
+    width: 32px;
+    height: 29px;
+    border-radius: 50%;
+    border: none;   
+}
+#menu {
+    margin-top: 22px;
+    margin-bottom: 28px;
+    position: relative;
+    background: none;
+    border: none;
+}
+

src/components/Dropdown_person/Dropmenu/Dropmenu.js

@@ -0,0 +1,26 @@
+/* import "./Dropmenu.scss";
+import personOne from "../../../assets/image 53.svg";
+import personTwo from "../../../assets/image 54.svg";
+import persona from "../../../assets/image 55.svg";
+
+
+
+
+
+export const Dropmenu = () => {
+  let clickIcon = console.assertl ('../../../assets/image 53.svg');
+  let clickIconTwo = console.log ('../../../assets/image 54.svg')
+  let clickIconThree = console.log ('../../../assets/image 55.svg')
+
+  return (
+    <div className="Dropmenu">   
+        <div className="wrapper_drop">
+            <div onClick={clickIcon} className="submenu-dropdown"><img src={personOne} className="person" alt="image"/></div>
+            <div onClick={clickIconTwo} className="submenu-dropdown" ><img src={personTwo} className="person" alt="image"/></div>
+            <div onClick={clickIconThree} className="submenu-dropdown" ><img src={persona} className="person" alt="image"/></div>
+        </div> 
+    </div>
+  )
+
+
+}; */

src/components/Dropdown_person/Dropmenu/Dropmenu.scss

@@ -0,0 +1,8 @@
+/* .person {
+    width: 32px;
+    height: 29px;
+    border-radius: 50%;
+    border: none;   
+}
+
+ */

src/components/Dropdown_person/Dropmenu/index.js

@@ -0,0 +1,2 @@
+/* export * from "./Dropmenu";
+ */

src/components/Dropdown_person/index.js

@@ -0,0 +1 @@
+export * from "./Dropdown_person.js";

src/pages/Home/Home.js

@@ -1,11 +1,13 @@
 import "./Home.scss";
 import { LeftMenu } from "../../components/LeftMenu/LeftMenu";
+import {Dropdown_person} from "../../components/Dropdown_person"
 
 export const Home = () => {
   return (
 
     <div className="Home">
     <LeftMenu />
+    <Dropdown_person />
 
 
     </div>