Comment adapter le menu hamburger à toute la page dans React JSX

Question

Je suis nouveau sur React jsx, j'utilise Tailwind et c'est très bien. J’apprends aussi au fur et à mesure. Ainsi dans ma navigation je parviens à afficher des menus hamburgers mais je n'aime pas la manière dont ils sont affichés. J'essaie de m'assurer que toute la page est remplie de blanc, voir la deuxième image ci-dessous.

C'est ce que j'ai pu réaliser, mais je ne pense pas que cela ait l'air trop propre

Ce que je veux réaliser, ou quelque chose comme ça, c'est remplir tout le site de blanc et afficher les options

Ma question est maintenant : avec mon code, comment puis-je faire cela ? Ceci est mon jsx de navigation, j'apprécierais toute aide. Je suis le seul membre de l'équipe et aucun développeur principal n'est disponible pour m'aider.

importer le logo depuis "./favicon.png";
importer { motion } depuis "framer-motion" ;
importer { useInView } depuis "react-intersection-observer" ;
importer MenuDropdown depuis "./MenuDropdown" ;
importer {Lien} depuis "react-router-dom" ;
importer { useState } depuis "react" ;

exporter la fonction par défaut Navigation() {
  const [ref, inView] = useInView({ triggerOnce : false });
  const [isOpen, setIsOpen] = useState(false);

  const [navVisible, setNaVisible] = useState(false);

  const megaMenu = document.getElementById("mega-menu");

  retour (
    <motion.nav
      className = "éléments flexibles-centre justifier-entre flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto"
      réf={réf}
      initial={{ y : -10, opacité : 0 }}
      animer={inView ? { y : 0, opacité : 1 } : {}}
      exit={{ y : -10, opacité : 0 }}
      transition={{ durée : 0,5 }}
    >
      <un
        href="/"
        className = "flex flex-row items-center flex-shrink-0 texte-blanc mr-6 lg:pr-16 espace-x-2"
      >
        <img src={logo} className="w-8 h-8" alt="Logo"></img>
        <h2 className="font-bold text-2xl tracking-tight">Jibu Labs</h2>
      ≪/a>

      <div id="menu" className="bloc lg:caché">
        <bouton
          className = "flex items-center px-3 py-2 bordure arrondie text-slate-200 border-slate-400 durée-100 survol: texte-blanc survol: bordure-blanc"
          onClick={() => setNaVisible(!navVisible)}
        >
          <svg
            className = "fill-current h-3 w-3"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <titre>Menu</titre>
            <chemin d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
        </bouton>
      </div>
      <div
        nom de classe={`
        ${
          navigationVisible
            ? "w-full block flex-grow g:flex lg:items-center lg:w-auto"
            : "lg:flex flex-none w-6/12 caché lg:content-right"
        }`}
      >
        <div
          nom de classe={`
        ${
          navigationVisible
            ? "lg:flex-grow flex flex-col text-sm"
            : "lg:flex-grow flex flex-rows space-x-12 text-sm "
        }`}
        >
          <div
            nom de classe={`${
              !navVisible
                ? "flex flex-rows items-center space-x-2 text-white"
                : "flex flex-rows items-center space-x-2 texte-blanc justifier-end pr-12"
            }`}
          >
            <span className="ring-1 p-0.5 ring-white arrondi-plein"></span>
            <Lien
              to="projets"
              nom de classe={`${
                !navVisible
                  ? "bloc mt-4 lg:bloc-en-ligne lg:mt-0 texte-blanc mr-4"
                  : "bloc mt-4 lg:inline-block lg:mt-0 texte-blanc mr-4 justifier-fin"
              }`}
            >
              Travail
            </Lien>
          </div>

          {!navVisible ? (
            <div
              id="méga-menu"
              className={`flex items-center space-x-2 flex-rows texte-blanc  
          
            `}
              onClick={() => setIsOpen((prev) => !prev)}
            >
              <span className="ring-1 p-0.5 ring-white arrondi-plein"></span>
              <div className="block mt-4 lg:inline-block lg:mt-0 mr-4 curseur-pointeur">
                Efficacité
              </div>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="aucun"
                viewBox="0 0 24 24"
                largeur de trait={1}
                trait = "couleur actuelle"
                className="w-4 h-4"
              >
                <chemin
                  StrokeLinecap="rond"
                  StrokeLinejoin="rond"
                  d = "M19,5 8,25l-7,5 7,5-7,5-7,5"
                />
              </svg>
            </div>
          ) : (
            <div
              nom de classe={`${
                !navVisible
                  ? "flex flex-rows items-center space-x-2 text-white"
                  : "flex flex-rows items-center space-x-2 texte-blanc justifier-fin"
              }`}
            >
              <span className="ring-1 p-0.5 ring-white arrondi-plein"></span>
              <Lien
                to="stratégie"
                className = "bloc mt-4 lg:inline-block lg:mt-0 texte-blanc mr-4 justifier-fin pr-1"
              >
                Efficacité
              </Lien>
            </div>
          )}

          <div
            nom de classe={`${
              !navVisible
                ? "flex flex-rows items-center space-x-2 text-white"
                : "flex flex-rows items-center space-x-2 texte-blanc justifier-fin pr-10"
            }`}
          >
            <span className="ring-1 p-0.5 ring-white arrondi-plein"></span>
            <un
              href="à propos"
              className = "block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
            >
              À propos
            ≪/a>
          </div>
          <div
            nom de classe={`${
              !navVisible
                ? "flex flex-rows items-center space-x-2 text-white"
                : "flex flex-rows items-center space-x-2 texte-blanc justifier-end pr-7"
            }`}
          >
            <span className="ring-1 p-0.5 ring-white arrondi-plein"></span>
            <un
              href="carrières"
              className = "bloc mt-4 lg: bloc-en-ligne lg: mt-0 texte-blanc mr-7"
            >
              Carrières
            ≪/a>
          </div>
          <div
            nom de classe={`${
              !navVisible
                ? "flex flex-rows items-center space-x-2 text-white"
                : "flex flex-rows items-center space-x-2 texte-blanc justifier-end pr-7"
            }`}
          >
            <span className="ring-1 p-0.5 ring-white arrondi-plein"></span>
            <un
              href="contact"
              className = "block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
            >
              Contact
            ≪/a>
          </div>
        </div>
      </div>

      <MenuDropdown isOpen={isOpen} setIsOpen={setIsOpen} />
      
    </motion.nav>
  );
}

Answer 1

Pour remplir la page entière avec du blanc ou une autre couleur d'arrière-plan, vous avez besoin d'un div externe, définissez la hauteur sur 100vh et la largeur sur 100vw. 100vh définit la hauteur à 100 % de la hauteur de la fenêtre d'affichage du navigateur Web, et 100vw définit la hauteur à 100 % de la largeur de la fenêtre d'affichage.

return (
   <div style={{height: "100vh", width: "100vw", maxWidth: "100%", background: "white"}}>
    <motion.nav
      className="flex items-center justify-between flex-wrap px-6 lg:px-12 
   ...
    </motion.nav>
  </div>

Régler maxWidth sur 100 % permet d'empêcher l'affichage des barres de défilement lorsque la balise body a un remplissage ou que d'autres composants externes occupent de l'espace.

Ce qui précède fait que le composant motion.nav occupe la totalité de la page. Vous souhaiterez peut-être déplacer la page entière div vers le haut pour utiliser le JSX du composant.

J'espère que cela vous aidera.