/
jonca3d
/
CourseOnReac
Обзор
Документация
Войти
/
jonca3d
/
CourseOnReac
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/components/Header/header.jsx
43 строки
1 KB
Evgeniy
Переключение темы и бургер меню
29 сен 2024, 17:13
29 сен 2024, 17:13
56c5cdb
Код
Авторство
О чём код?
import Menu from "../Menu/menu"; import Button from "../Button/button"; import styles from "./header.module.css" import { useResize } from "../../hooks/useResize"; import { useContext, useEffect, useState } from "react"; import { ThemeContext } from "../../themeContext"; import Toggle from "../Toggle/toggle"; import Burger from "../Burger/burger"; function Header() { const { isScreenMd } = useResize(); const [isDesktop, setDesktop] = useState(isScreenMd); useEffect(() => { setDesktop(isScreenMd); }, [isScreenMd]); const { theme, setTheme } = useContext(ThemeContext); return ( <> <header className={styles['header']}> <div className={styles['logo']}> Evgeniy Timopfeev </div> {isDesktop && <Menu />} {!isDesktop && <Burger/>} <Button className="btn" label="Contact" /> <Toggle onClick={() => { theme === 'light-theme' ? setTheme('dark-theme') : setTheme('light-theme'); console.log(theme); } } /> </header> </> ) }; export default Header;