Ciao,
25/05/2025 - ilchiuri ha scritto:
l'applicazione di filter ad un banner ha creato dei problemi di stacking.
Questo vuol dire che filter, creando un nuovo stacking, stà interferendo sul normale flusso.
E z-index funziona solo se gli elementi si trovano sullo stesso stacking
Se bunner e button si trovano in contesti diversi, z-index non funziona più come dovrebbe
25/05/2025 - ilchiuri ha scritto:
A complicare la cosa c'è anche il fatto che il pulsante del menu si trova nel componente NAV mentre il banner si trova nel componente Header. Avevo pensato di creare una funzione per spegnere il banner quando si apre il menu ma non posso farlo perchè non riesco a far uscire la funzione con lo state dal componente Header e portarlo in NAV... o meglio, non ho idea di come farlo.
Perchè hai una separazione tra Header e Nav... essendo fratelli serve sollevarli dalgenitore.
Per esempio : (ti incollo un esempio che ho trovato)
// App.js
import { useState } from "react";
import Header from "./Header";
import Nav from "./Nav";
function App() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
<div>
<Header isMenuOpen={isMenuOpen} />
<Nav isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
</div>
);
}
export default App;
// Header.js
function Header({ isMenuOpen }) {
return (
<header style={{ background: "#222", color: "white", padding: "20px" }}>
{!isMenuOpen && (
<div className="banner" style={{ background: "orange", padding: "10px" }}>
This is the banner (hidden when menu is open)
</div>
)}
</header>
);
}
export default Header;
// Nav.js
function Nav({ isMenuOpen, setIsMenuOpen }) {
const toggleMenu = () => setIsMenuOpen(prev => !prev);
return (
<nav style={{ padding: "20px", background: "#444", color: "white" }}>
<button onClick={toggleMenu}>
{isMenuOpen ? "Close Menu" : "Open Menu"}
</button>
{isMenuOpen && (
<div
style={{
background: "rgba(0,0,0,0.9)",
color: "white",
padding: "20px",
marginTop: "10px"
}}
>
This is the menu content
</div>
)}
</nav>
);
}
export default Nav;
In questo cosa:
- Il banner nel header scompare quando il menu si apre
- Il menu nel Nav è visibile solo quando isMenuOpen è true.
- E la funzione che apre e chiude il menu è in App
Adesso puoi applicare il dark mode senza infierire sui componenti.... ma sempre a livello di app e non dentro i componenti.
In questo modo tutti i componenti reagiranno al darkmode
Esempio:
function App() {
const [isDarkMode, setIsDarkMode] = useState(false);
return (
<div className={isDarkMode ? 'dark' : ''}>
<Nav isDarkMode={isDarkMode} toggleDarkMode={() => setIsDarkMode(!isDarkMode)} />
<Header isDarkMode={isDarkMode} />
{/* altri componenti */}
</div>
);
}