d
This commit is contained in:
		| @@ -287,7 +287,7 @@ | |||||||
|             margin-left: 10%; |             margin-left: 10%; | ||||||
|         } |         } | ||||||
|         &_container { |         &_container { | ||||||
|             height: 100%; |             height: 96%; | ||||||
|              |              | ||||||
|             display: flex; |             display: flex; | ||||||
|             align-items: start; |             align-items: start; | ||||||
|   | |||||||
| @@ -2,10 +2,12 @@ | |||||||
| import styles from './style.module.scss'; | import styles from './style.module.scss'; | ||||||
| import logo from '../../img/headerImg/header.png'; | import logo from '../../img/headerImg/header.png'; | ||||||
| import google from '../../img/headerImg/google.png'; | import google from '../../img/headerImg/google.png'; | ||||||
| import avatar from '../../img/headerImg/avatar.png'; |  | ||||||
| import icon from '../../img/headerImg/Icon.png'; | import icon from '../../img/headerImg/Icon.png'; | ||||||
|  | import Menu from '../Menu' | ||||||
| import { useNavigate } from "react-router-dom"; | import { useNavigate } from "react-router-dom"; | ||||||
|  |  | ||||||
|  |  | ||||||
| import { useState } from 'react'; | import { useState } from 'react'; | ||||||
|  |  | ||||||
| const Header = () => { | const Header = () => { | ||||||
| @@ -23,7 +25,7 @@ const Header = () => { | |||||||
|             <div className={styles.header__container}> |             <div className={styles.header__container}> | ||||||
|             <header className={styles.header}> |             <header className={styles.header}> | ||||||
|                 <div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div> |                 <div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div> | ||||||
|                 <div className={styles.header_img_container}>  <img className={styles.header_img} src={icon}></img> <img className={styles.header_img} src={avatar}></img></div> |                 <div className={styles.header_img_container}>  <img className={styles.header_img} src={icon}></img> <Menu></Menu></div> | ||||||
|             </header> |             </header> | ||||||
|         </div> |         </div> | ||||||
|         ) : |         ) : | ||||||
|   | |||||||
| @@ -6,6 +6,7 @@ import Home from "../Home/Home"; | |||||||
| import EditForm from "../edit/EditForm"; | import EditForm from "../edit/EditForm"; | ||||||
| import PostForm from "../post/PostForm"; | import PostForm from "../post/PostForm"; | ||||||
|  |  | ||||||
|  | import muza from '../../img/homePage/muza.png'; | ||||||
| const APIURL = '' | const APIURL = '' | ||||||
|  |  | ||||||
| // const events = [ | // const events = [ | ||||||
| @@ -36,7 +37,9 @@ const HomePage = () => { | |||||||
|     <> |     <> | ||||||
|  |  | ||||||
|         <Header></Header> |         <Header></Header> | ||||||
|  |         <div className={styles.muza_img_container}><img src={muza} alt='muza' className={styles.muza_img}></img></div> | ||||||
|         <section className={styles.muza__container}> |         <section className={styles.muza__container}> | ||||||
|  |              | ||||||
|             <div className={styles.muza__title}>МУЗА</div> |             <div className={styles.muza__title}>МУЗА</div> | ||||||
|             <div className={styles.muza__descr_container}> |             <div className={styles.muza__descr_container}> | ||||||
|                 <div className={styles.muza__descr}>Платформа для проведения well-being мероприятий</div> |                 <div className={styles.muza__descr}>Платформа для проведения well-being мероприятий</div> | ||||||
|   | |||||||
| @@ -5,13 +5,19 @@ | |||||||
| } | } | ||||||
| .muza { | .muza { | ||||||
|     &__container { |     &__container { | ||||||
|         height: 700px; |         height: 780px; | ||||||
|         display: flex; |         display: flex; | ||||||
|         align-items: center; |         align-items: center; | ||||||
|         flex-direction: column; |         flex-direction: column; | ||||||
|         width: 100%; |         width: 100%; | ||||||
|  |         position: relative; | ||||||
|     } |     } | ||||||
|     |    &_img { | ||||||
|  |     position: absolute; | ||||||
|  |     left: 0px; | ||||||
|  |     top: 300px; | ||||||
|  |     height: 480px; | ||||||
|  |    } | ||||||
|     &__title { |     &__title { | ||||||
|         margin-top: 150px; |         margin-top: 150px; | ||||||
|         color: #000; |         color: #000; | ||||||
| @@ -23,6 +29,7 @@ | |||||||
|         text-align: left; |         text-align: left; | ||||||
|         display: flex; |         display: flex; | ||||||
|         width: 90%; |         width: 90%; | ||||||
|  |         z-index: 10; | ||||||
|  |  | ||||||
|     } |     } | ||||||
|     &__descr { |     &__descr { | ||||||
| @@ -30,7 +37,7 @@ | |||||||
|             display: flex; |             display: flex; | ||||||
|             justify-content: flex-end; |             justify-content: flex-end; | ||||||
|         } |         } | ||||||
|         margin-top: 50px; |         margin-top: 100px; | ||||||
|         margin-left: 70px; |         margin-left: 70px; | ||||||
|         color: #000; |         color: #000; | ||||||
|         font-family: Montserrat; |         font-family: Montserrat; | ||||||
| @@ -41,7 +48,7 @@ | |||||||
|         text-align: left; |         text-align: left; | ||||||
|         display: flex; |         display: flex; | ||||||
|         width: 60%; |         width: 60%; | ||||||
|  |         z-index: 10; | ||||||
|     } |     } | ||||||
| } | } | ||||||
| .meeting { | .meeting { | ||||||
|   | |||||||
							
								
								
									
										55
									
								
								src/Components/Menu/index.jsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										55
									
								
								src/Components/Menu/index.jsx
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,55 @@ | |||||||
|  | import * as React from 'react'; | ||||||
|  | import Button from '@mui/material/Button'; | ||||||
|  | import Menu from '@mui/material/Menu'; | ||||||
|  | import MenuItem from '@mui/material/MenuItem'; | ||||||
|  | import avatar from '../../img/headerImg/avatar.png' | ||||||
|  | import { useNavigate } from "react-router-dom";; | ||||||
|  | import styles from './style.module.scss'; | ||||||
|  | export default function BasicMenu() { | ||||||
|  |   const [anchorEl, setAnchorEl] = React.useState(null); | ||||||
|  |   const open = Boolean(anchorEl); | ||||||
|  |   const handleClick = (event) => { | ||||||
|  |     setAnchorEl(event.currentTarget); | ||||||
|  |   }; | ||||||
|  |   const navigate = useNavigate(); | ||||||
|  |     const handleHome = () => { | ||||||
|  |         navigate('/'); | ||||||
|  |         setAnchorEl(null); | ||||||
|  |     } | ||||||
|  |     const handleProfile = () => { | ||||||
|  |         navigate('/profile'); | ||||||
|  |         setAnchorEl(null); | ||||||
|  |     } | ||||||
|  |     const handleAtchive = () => { | ||||||
|  |         navigate('/achievements'); | ||||||
|  |         setAnchorEl(null); | ||||||
|  |     } | ||||||
|  |     const handleClose = () => { | ||||||
|  |         setAnchorEl(null); | ||||||
|  |     } | ||||||
|  |   return ( | ||||||
|  |     <> | ||||||
|  |       <img | ||||||
|  |         src={avatar} | ||||||
|  |         className={styles.header_img} | ||||||
|  |         aria-controls={open ? 'basic-menu' : undefined} | ||||||
|  |         aria-expanded={open ? 'true' : undefined} | ||||||
|  |         onClick={handleClick} | ||||||
|  |       > | ||||||
|  |       </img> | ||||||
|  |       <Menu | ||||||
|  |         id="basic-menu" | ||||||
|  |         anchorEl={anchorEl} | ||||||
|  |         open={open} | ||||||
|  |         onClose={handleClose} | ||||||
|  |         MenuListProps={{ | ||||||
|  |           'aria-labelledby': 'basic-button', | ||||||
|  |         }} | ||||||
|  |       > | ||||||
|  |         <MenuItem onClick={handleProfile}>Профиль</MenuItem> | ||||||
|  |         <MenuItem onClick={handleAtchive}>Достижения</MenuItem> | ||||||
|  |         <MenuItem onClick={handleHome}>Выйти</MenuItem> | ||||||
|  |       </Menu> | ||||||
|  |     </> | ||||||
|  |   ); | ||||||
|  | } | ||||||
							
								
								
									
										8
									
								
								src/Components/Menu/style.module.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										8
									
								
								src/Components/Menu/style.module.scss
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,8 @@ | |||||||
|  | .header { | ||||||
|  |     &_img { | ||||||
|  |  | ||||||
|  |         width: 55px; | ||||||
|  |         margin-right: 40px; | ||||||
|  |         height: 55px; | ||||||
|  |     } | ||||||
|  | } | ||||||
							
								
								
									
										
											BIN
										
									
								
								src/img/homePage/muza.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										
											BIN
										
									
								
								src/img/homePage/muza.png
									
									
									
									
									
										Normal file
									
								
							
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 637 KiB | 
		Reference in New Issue
	
	Block a user