diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index c25d4f765..e9ac741f0 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,115 +1,113 @@ -import { faMoon, faSun, faBars, faTimes } from '@fortawesome/free-solid-svg-icons' +import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { useState, useEffect } from 'react' -import { NavLink } from 'react-router-dom' +import { useState } from 'react' +import { NavLink, useLocation } from 'react-router-dom' + import { headerLinks } from 'utils/constants' +import { cn } from 'lib/utils' +import ModeToggle from './ModeToggle' export default function Header() { - const [dark, setDark] = useState(() => { - return localStorage.getItem('theme') === 'dark' - }) - const [isMenuOpen, setIsMenuOpen] = useState(false) - const icon = !dark ? : - - // Effect to apply the dark class to the body when theme changes - useEffect(() => { - if (dark) { - document.body.classList.add('dark') - } else { - document.body.classList.remove('dark') - } - }, [dark]) - - // Function to toggle the theme between light and dark - function toggleTheme() { - setDark(!dark) - const newTheme = !dark ? 'dark' : 'light' - document.body.classList.toggle('dark', !dark) - localStorage.setItem('theme', newTheme) // Store the theme in localStorage - } - - // Function to toggle the mobile menu open/close - function toggleMenu() { - setIsMenuOpen(!isMenuOpen) - } + const [mobileMenuOpen, setMobileMenuOpen] = useState(false) + const location = useLocation() + const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen) return ( -
-
-