Bonjour,

J'ai un soucis de Navbar.
Celle ci fonctionne sur Pc et Android, mais pas sur Iphone.
Sur iphone, elle reste ouverte constamment et ne réagit pas au bouton de fermeture. Ce qui rend la navigation impossible sur iphone.

Voici mon code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, { useState, useEffect, useContext } from 'react';
import { RootContext } from '../../ContextProvider.js';
import Button from '../Button/Button.js';
import UserMenu from './UserMenu/UserMenu.js';
import './NavBar.scss';
 
const NavBar = () => {
    const [navBackground, setNavBackground] = useState(false);
    const context = useContext(RootContext);
    const [menu, showMenu] = useState(false);
    const [smallScreen, setSmallScreen] = useState(false);
 
    useEffect(() => {
        const handleScroll = () => {
            let positionY = window.scrollY > 100;
            if (positionY !== navBackground) {
                setNavBackground(positionY);
            }
        };
 
        const mediaQuery = window.matchMedia("(max-width: 900px");
        mediaQuery.addListener(handleMediaQueryChange);
        handleMediaQueryChange(mediaQuery);
 
        document.addEventListener("scroll", handleScroll);
        return () => {
            document.removeEventListener("scroll", handleScroll);
            mediaQuery.removeListener(handleMediaQueryChange);
        };
    }, [navBackground]);
 
    const handleMediaQueryChange = mediaQuery => {
        if(mediaQuery.matches) {
            setSmallScreen(true);
        } else {
            setSmallScreen(false);
        }
    }
 
    const hideMenu = () => {
        showMenu(!menu);
    }
 
    const toggleNavRes = () => {
        showMenu(!menu);
    }
 
    return (
        <div className="navbar-container">
            <nav className="navbar-subcontainer">
                <a href="#">
                    <div className={`navbar-logo ${navBackground ? "small-logo" : "full-logo"}`} />
                </a>
                {(menu && !smallScreen) && (
                    <>
                    <ul className="listMenu">
                        <li onClick={hideMenu} className="linksNav">
                            <a className="link" href="/dashboard">
                                Mon dashboard
                            </a>
                        </li>
                        <li onClick={hideMenu} className="linksNav">
                            <a className="link" href="/alimentation">
                                Mon contenu
                            </a>
                        </li>
                        <li onClick={hideMenu} className="linksNav">
                            <a className="link" href="#" target="blank">
                                Le blog
                            </a>
                        </li>
                        <li onClick={hideMenu} className="linksNav">
                            <a className="link" href="#" target="blank">
                                Feedback
                            </a>
                        </li>
                        <li onClick={hideMenu} className="linksNav">
                        {context.authenticated ? (
                            <UserMenu />
                        ) : (
                            <Button className="small-button" toLink="/login">
                                Connexion
                            </Button>
                        )}
                        </li>
                    </ul>
                    </>
                )}
            </nav>
            <div className={!menu ? "menuResBtn" : "menuResBtn active"} >
                <div className="ligne" onClick={toggleNavRes}></div>
            </div>
        </div>
    );
};
 
export default NavBar;