diff --git a/src/modules/Header/Header.jsx b/src/modules/Header/Header.jsx index 406e463..e8af5a3 100644 --- a/src/modules/Header/Header.jsx +++ b/src/modules/Header/Header.jsx @@ -1,69 +1,65 @@ -import React, { useState, useContext } from 'react'; -import { Link, NavLink } from 'react-router-dom'; -import { useMediaQuery } from 'react-responsive'; -import './Header.scss'; -import MainContainer from '../../components/MainContainer/MainContainer'; -import BurgerMenu from '../../components/BurgerMenu/BurgerMenu'; -import ProfilePopup from '../../components/ProfilePopup/ProfilePopup'; -import MenuLink from '../../ui/MenuLink/MenuLink'; -import Paw from './svg/Paw'; -import CurrentUserContext from '../../contexts/CurrentUserContext'; - -const Header = () => { - const { username } = useContext(CurrentUserContext); - const [profilePopupOpen, setProfilePopupOpen] = useState(false); - - const openProfilePopup = () => { - setProfilePopupOpen(true); - }; - - const closeProfilePopup = () => { - setProfilePopupOpen(false); - }; - - const isScreenWide = useMediaQuery({ - minWidth: 1200, - }); - - const isElementHidden = isScreenWide ? '' : 'menu_hidden'; - - return ( - -
- - - {isScreenWide ? ( - - - - ) : ( - - )} - - - - - -
-
- ); -}; - -export default Header; +import React, { useState, useContext } from 'react'; +import { Link, NavLink } from 'react-router-dom'; +import { useMediaQuery } from 'react-responsive'; +import './Header.scss'; +import MainContainer from '../../components/MainContainer/MainContainer'; +import BurgerMenu from '../../components/BurgerMenu/BurgerMenu'; +import ProfilePopup from '../../components/ProfilePopup/ProfilePopup'; +import MenuLink from '../../ui/MenuLink/MenuLink'; +import Paw from './svg/Paw'; +import CurrentUserContext from '../../contexts/CurrentUserContext'; + +const Header = () => { + const { username } = useContext(CurrentUserContext); + const [profilePopupOpen, setProfilePopupOpen] = useState(false); + + const openProfilePopup = () => { + setProfilePopupOpen(true); + }; + + const closeProfilePopup = () => { + setProfilePopupOpen(false); + }; + + const isScreenWide = useMediaQuery({ + minWidth: 1200, + }); + + const isElementHidden = isScreenWide ? '' : 'menu_hidden'; + + return ( + +
+ + + + + + + + + + +
+
+ ); +}; + +export default Header;