``` import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { useState } from "react";
import { Header } from "./components/headers/header";
import { Toggle } from "./components/Toggle/Toggle";
import { HomePage } from "./routes/home";
import { ProductsPage } from "./routes/products";
import { MasServiciosPage } from "./routes/masServicios";
import { NosotrosPage } from "./routes/nosotros";
import { ContactPage } from "./routes/contact";
import { NotFoundPage } from "./routes/notFoundPage";
import { Footer } from "./components/footer/footer";
import "./app.css";
import { ScrollUp } from "./components/scrollUp/scrollUp";
import { WhatsApp } from "./components/whatsApp/whatsApp";
import CookiePolicy from "./components/politicadePrivacidad/policadaDePrivacidad";
function App() {
const [isDark, setIsDark] = useState(false);
return (
<div className="App" data-theme={isDark ? "dark" : "light"}>
<Toggle isChecked={isDark} handleChange={() => setIsDark(!isDark)} />
<Router>
<Header />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/home" element={<HomePage />} />
<Route path="/products" element={<ProductsPage />} />
<Route path="/masServicios" element={<MasServiciosPage />} />
<Route path="/nosotros" element={<NosotrosPage />} />
<Route path="/contact" element={<ContactPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
<CookiePolicy />
<ScrollUp />
<WhatsApp />
<Footer />
</Router>
</div>
);
}
export default App; ```
**Componente menu**
```
Componente menu
import './estyles/menu.css';
import { NavLink } from "react-router-dom";
export const Menu = () => {
return (
<>
<NavLink className='menu__Item--a' to='/products' ><li className='menu__Item'>Productos </li></NavLink>
<NavLink className='menu__Item--a' to='/masServicios' ><li className='menu__Item'>Mas Servicios</li></NavLink>
<NavLink className='menu__Item--a' to='/nosotros'> <li className='menu__Item'> Nosotros</li></NavLink>
<NavLink className='menu__Item--a' to='/contact' ><li className='menu__Item'>Contacto</li></NavLink>
</>
)
}
```
**Header**
```
Header
import { Logo } from "./logo";
import "./estyles/header.css";
import { Menu } from "./menu";
import { Hamburgers } from "./hamburgers";
import { useState } from "react";
export const Header = () => {
const [menu, setMenu] = useState(false)
const toggleMenu =()=>{
setMenu(!menu)
}
return (
<header>
<div className="conteinerLogo">
<Logo />
</div>
<div className="conteinerHamburgers" onClick={toggleMenu}>
<Hamburgers/>
</div>
<nav className={`navbar ${menu ? 'isActive' :'' }`}>
<ul>
<Menu/>
</ul>
</nav>
</header>
);
};
```