From 0e993bc4f0c4482182ff2f389209f08891bc128d Mon Sep 17 00:00:00 2001 From: nadya12082012 <96071893+nadya12082012@users.noreply.github.com> Date: Fri, 25 Nov 2022 23:53:50 +0300 Subject: [PATCH] add menu person --- src/assets/bell.svg | 4 ++ src/assets/down.svg | 3 ++ src/assets/image 51.svg | 9 ++++ src/assets/image 53.svg | 9 ++++ src/assets/image 54.svg | 9 ++++ src/assets/image 55.svg | 9 ++++ src/assets/sms.svg | 3 ++ .../Btn_notification/Btn_notification.js | 12 +++++ .../Btn_notification/Btn_notification.scss | 21 ++++++++ src/components/Btn_notification/index.js | 1 + src/components/Btn_sms/Btn_sms.js | 12 +++++ src/components/Btn_sms/Btn_sms.scss | 10 ++++ src/components/Btn_sms/index.js | 1 + .../Dropdown_person/Btn_down/Btn_down.js | 16 ++++++ .../Dropdown_person/Btn_down/Btn_down.scss | 9 ++++ .../Dropdown_person/Btn_down/index.js | 1 + .../Dropdown_person/Dropdown_person.js | 51 +++++++++++++++++++ .../Dropdown_person/Dropdown_person.scss | 28 ++++++++++ .../Dropdown_person/Dropmenu/Dropmenu.js | 26 ++++++++++ .../Dropdown_person/Dropmenu/Dropmenu.scss | 8 +++ .../Dropdown_person/Dropmenu/index.js | 2 + src/components/Dropdown_person/index.js | 1 + src/pages/Home/Home.js | 2 + 23 files changed, 247 insertions(+) create mode 100644 src/assets/bell.svg create mode 100644 src/assets/down.svg create mode 100644 src/assets/image 51.svg create mode 100644 src/assets/image 53.svg create mode 100644 src/assets/image 54.svg create mode 100644 src/assets/image 55.svg create mode 100644 src/assets/sms.svg create mode 100644 src/components/Btn_notification/Btn_notification.js create mode 100644 src/components/Btn_notification/Btn_notification.scss create mode 100644 src/components/Btn_notification/index.js create mode 100644 src/components/Btn_sms/Btn_sms.js create mode 100644 src/components/Btn_sms/Btn_sms.scss create mode 100644 src/components/Btn_sms/index.js create mode 100644 src/components/Dropdown_person/Btn_down/Btn_down.js create mode 100644 src/components/Dropdown_person/Btn_down/Btn_down.scss create mode 100644 src/components/Dropdown_person/Btn_down/index.js create mode 100644 src/components/Dropdown_person/Dropdown_person.js create mode 100644 src/components/Dropdown_person/Dropdown_person.scss create mode 100644 src/components/Dropdown_person/Dropmenu/Dropmenu.js create mode 100644 src/components/Dropdown_person/Dropmenu/Dropmenu.scss create mode 100644 src/components/Dropdown_person/Dropmenu/index.js create mode 100644 src/components/Dropdown_person/index.js diff --git a/src/assets/bell.svg b/src/assets/bell.svg new file mode 100644 index 0000000..e888745 --- /dev/null +++ b/src/assets/bell.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/down.svg b/src/assets/down.svg new file mode 100644 index 0000000..8cc6489 --- /dev/null +++ b/src/assets/down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/image 51.svg b/src/assets/image 51.svg new file mode 100644 index 0000000..23bf08a --- /dev/null +++ b/src/assets/image 51.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/image 53.svg b/src/assets/image 53.svg new file mode 100644 index 0000000..1ba3600 --- /dev/null +++ b/src/assets/image 53.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/image 54.svg b/src/assets/image 54.svg new file mode 100644 index 0000000..c2375a2 --- /dev/null +++ b/src/assets/image 54.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/image 55.svg b/src/assets/image 55.svg new file mode 100644 index 0000000..505caba --- /dev/null +++ b/src/assets/image 55.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/sms.svg b/src/assets/sms.svg new file mode 100644 index 0000000..449d90e --- /dev/null +++ b/src/assets/sms.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Btn_notification/Btn_notification.js b/src/components/Btn_notification/Btn_notification.js new file mode 100644 index 0000000..83a3b61 --- /dev/null +++ b/src/components/Btn_notification/Btn_notification.js @@ -0,0 +1,12 @@ +import "./Btn_notification.scss"; + + +const click = () => console.log ("Кнопка нажата"); + +export const Btn_notification = () => { + return ( +
+ +
+ ); +}; \ No newline at end of file diff --git a/src/components/Btn_notification/Btn_notification.scss b/src/components/Btn_notification/Btn_notification.scss new file mode 100644 index 0000000..962d6b5 --- /dev/null +++ b/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; +} + diff --git a/src/components/Btn_notification/index.js b/src/components/Btn_notification/index.js new file mode 100644 index 0000000..3915c62 --- /dev/null +++ b/src/components/Btn_notification/index.js @@ -0,0 +1 @@ +export * from "./Btn_notification"; diff --git a/src/components/Btn_sms/Btn_sms.js b/src/components/Btn_sms/Btn_sms.js new file mode 100644 index 0000000..a19a6d9 --- /dev/null +++ b/src/components/Btn_sms/Btn_sms.js @@ -0,0 +1,12 @@ +import "./Btn_sms.scss"; + + +const clickSms = () => console.log ("Кнопка смс нажата"); + +export const Btn_sms = () => { + return ( +
+
+ ); +}; \ No newline at end of file diff --git a/src/components/Btn_sms/Btn_sms.scss b/src/components/Btn_sms/Btn_sms.scss new file mode 100644 index 0000000..5a11aad --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/Btn_sms/index.js b/src/components/Btn_sms/index.js new file mode 100644 index 0000000..b0b1821 --- /dev/null +++ b/src/components/Btn_sms/index.js @@ -0,0 +1 @@ +export * from "./Btn_sms"; diff --git a/src/components/Dropdown_person/Btn_down/Btn_down.js b/src/components/Dropdown_person/Btn_down/Btn_down.js new file mode 100644 index 0000000..f4149f9 --- /dev/null +++ b/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 ( +
+ + +
+ ) + + +}; \ No newline at end of file diff --git a/src/components/Dropdown_person/Btn_down/Btn_down.scss b/src/components/Dropdown_person/Btn_down/Btn_down.scss new file mode 100644 index 0000000..8c7ea5e --- /dev/null +++ b/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; + +} \ No newline at end of file diff --git a/src/components/Dropdown_person/Btn_down/index.js b/src/components/Dropdown_person/Btn_down/index.js new file mode 100644 index 0000000..17448ad --- /dev/null +++ b/src/components/Dropdown_person/Btn_down/index.js @@ -0,0 +1 @@ +export * from "./Btn_down"; diff --git a/src/components/Dropdown_person/Dropdown_person.js b/src/components/Dropdown_person/Dropdown_person.js new file mode 100644 index 0000000..c93a125 --- /dev/null +++ b/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 ( +
+ + + + + +
+ ) + + +}; \ No newline at end of file diff --git a/src/components/Dropdown_person/Dropdown_person.scss b/src/components/Dropdown_person/Dropdown_person.scss new file mode 100644 index 0000000..3764048 --- /dev/null +++ b/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; +} + diff --git a/src/components/Dropdown_person/Dropmenu/Dropmenu.js b/src/components/Dropdown_person/Dropmenu/Dropmenu.js new file mode 100644 index 0000000..d5a0312 --- /dev/null +++ b/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 ( +
+
+
image
+
image
+
image
+
+
+ ) + + +}; */ \ No newline at end of file diff --git a/src/components/Dropdown_person/Dropmenu/Dropmenu.scss b/src/components/Dropdown_person/Dropmenu/Dropmenu.scss new file mode 100644 index 0000000..7340608 --- /dev/null +++ b/src/components/Dropdown_person/Dropmenu/Dropmenu.scss @@ -0,0 +1,8 @@ +/* .person { + width: 32px; + height: 29px; + border-radius: 50%; + border: none; +} + + */ \ No newline at end of file diff --git a/src/components/Dropdown_person/Dropmenu/index.js b/src/components/Dropdown_person/Dropmenu/index.js new file mode 100644 index 0000000..de70f82 --- /dev/null +++ b/src/components/Dropdown_person/Dropmenu/index.js @@ -0,0 +1,2 @@ +/* export * from "./Dropmenu"; + */ \ No newline at end of file diff --git a/src/components/Dropdown_person/index.js b/src/components/Dropdown_person/index.js new file mode 100644 index 0000000..6fd3cc1 --- /dev/null +++ b/src/components/Dropdown_person/index.js @@ -0,0 +1 @@ +export * from "./Dropdown_person.js"; diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index 9362519..fb8c824 100644 --- a/src/pages/Home/Home.js +++ b/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 (
+