Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix mobile logo home link #245

Merged
merged 4 commits into from
Aug 17, 2024
Merged

Fix mobile logo home link #245

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
78ee0a9
Merge pull request #230 from Lapkipomoshi/dev-payment
Notsmartname May 13, 2024
05c745c
Merge pull request #232 from Lapkipomoshi/dev-replace-logo
karlbelousov May 13, 2024
1cd15a2
Merge pull request #236 from Lapkipomoshi/fix-placemark
karlbelousov May 15, 2024
32e97b9
fix: in a reduced window the logo “Home” button in the header stops w…
Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 65 additions & 69 deletions src/modules/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<MainContainer theme='additional'>
<header className='header'>
<BurgerMenu />

{isScreenWide ? (
<Link to='/'>
<Paw className='header__logo' />
</Link>
) : (
<Paw className='header__logo' />
)}

<nav className={`menu menu_items_links ${isElementHidden}`}>
<MenuLink url='/papers'>Полезные статьи</MenuLink>
<MenuLink url='/shelters'>Карта приютов</MenuLink>
<MenuLink url='/news'>Новости</MenuLink>
</nav>
<nav className='menu'>
{!username && (
<NavLink className='menu__sign menu__sign_in' to='/sign-in'>
Вход
</NavLink>
)}
{isScreenWide && !username && (
<NavLink className='menu__sign menu__sign_up ' to='/sign-up'>
Регистрация
</NavLink>
)}

{username && <button className='menu__profile' type='button' onClick={openProfilePopup} />}
</nav>

<ProfilePopup isOpen={profilePopupOpen} closeProfilePopup={closeProfilePopup} />
</header>
</MainContainer>
);
};

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 (
<MainContainer theme='additional'>
<header className='header'>
<BurgerMenu />

<Link to='/'>
<Paw className='header__logo' />
</Link>

<nav className={`menu menu_items_links ${isElementHidden}`}>
<MenuLink url='/papers'>Полезные статьи</MenuLink>
<MenuLink url='/shelters'>Карта приютов</MenuLink>
<MenuLink url='/news'>Новости</MenuLink>
</nav>
<nav className='menu'>
{!username && (
<NavLink className='menu__sign menu__sign_in' to='/sign-in'>
Вход
</NavLink>
)}
{isScreenWide && !username && (
<NavLink className='menu__sign menu__sign_up ' to='/sign-up'>
Регистрация
</NavLink>
)}

{username && <button className='menu__profile' type='button' onClick={openProfilePopup} />}
</nav>

<ProfilePopup isOpen={profilePopupOpen} closeProfilePopup={closeProfilePopup} />
</header>
</MainContainer>
);
};

export default Header;
Loading