From 395571bd89498fce46d37f3853cf718387fd0d9a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 27 Dec 2021 11:20:26 +0100 Subject: chore: add a theme toggle Dark theme is not implemented yet. --- src/components/Toolbar/Toolbar.tsx | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) (limited to 'src/components/Toolbar/Toolbar.tsx') diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx index fdab76a..615dfd5 100644 --- a/src/components/Toolbar/Toolbar.tsx +++ b/src/components/Toolbar/Toolbar.tsx @@ -1,21 +1,36 @@ import { ButtonSearch } from '@components/Buttons'; import MainNav from '@components/MainNav/MainNav'; import SearchForm from '@components/SearchForm/SearchForm'; +import ThemeToggle from '@components/ThemeToggle/ThemeToggle'; import { useEffect, useState } from 'react'; import styles from './Toolbar.module.scss'; const Toolbar = () => { const [isNavOpened, setIsNavOpened] = useState(false); const [isSearchOpened, setIsSearchOpened] = useState(false); + const [isThemeOpened, setIsThemeOpened] = useState(false); useEffect(() => { - if (isNavOpened) setIsSearchOpened(false); + if (isNavOpened) { + setIsSearchOpened(false); + setIsThemeOpened(false); + } }, [isNavOpened]); useEffect(() => { - if (isSearchOpened) setIsNavOpened(false); + if (isSearchOpened) { + setIsNavOpened(false); + setIsThemeOpened(false); + } }, [isSearchOpened]); + useEffect(() => { + if (isThemeOpened) { + setIsNavOpened(false); + setIsSearchOpened(false); + } + }, [isThemeOpened]); + const searchClasses = `${styles.search} ${ isSearchOpened ? styles['search--opened'] : styles['search--closed'] }`; @@ -30,6 +45,9 @@ const Toolbar = () => {
+
+ +
); }; -- cgit v1.2.3