Reto #5: desktop menu visibility

[juandc]

Hi!

El menú no puede visualizarse correctamente al abrirlo en la página principal con el listado de productos debido a su transparencia.

Además, los usuarios no pueden ver el menú si abrieron (o incluso si ya tenían abierto) el modal de My Order.

El reto de este issue es agregale un color de fondo al menú y encargarte de que pueda visualizarse correctamente, incluso si el modal de My Order está abierto. ¡Puro CSS!

[alejandroverita]

Menu.scss

Add a white background

`

.Menu {
width: 10rem;
height: auto;
border: 1px solid var(--very-light-pink);
border-radius: 0.6rem;
padding: 2rem 2rem 0 2rem;
position: absolute;
top: 60px;
right: 50px;

background-color: var(--white);
}

`

[davalder]

Hola, quise que los dos modales se vieran uno al lado de otro, así que cree un nuevo div en el HTML del Header.jsx en donde encapsule los modales:

<div className="container-menu">
                {toggle && <Menu />}
                {toggleOrders && <MyOrder toggleOrders={toggleOrders} setToggleOrders={setToggleOrders} />}
</div>

por lo que cree otra clase en los estilos de Header.scss, la cual adopto la position Absolute de los modales, además de ser display Flex.

.container-menu {
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 60px;
	right: 0;
}

y por ultimo retire las características de position Absolute que tenían los modales en sus respectivos archivos de estilos.

nuevamente gracias, y quedo atento a comentarios.

[christian-olivers]

Buen día, mi solución fue sobre poner Menu sobre myOrder
en el estilo del menu quedo de la siguiente manera:
.Menu {
...
background-color: var(--white);
z-index: 1;
}

[nicojson]

@Christian-OS17 yo hice lo mismo

[julianf-dev]

Buenos días

Mi solución fué agregar un background blanco al Menu. Adicional también usando un context, manejar par que los dos menús no esten abiertos al tiempo

`

.Menu{
width: 100px;
height: auto;
border: 1px solid var(--very-light-pink);
border-radius: 6px;
background-color: var(--white);
padding: 20px;
margin-right: 60px;
}
`

`
const toggleOrder = () => {
setState({
...state,
orderIsOpen: !state.orderIsOpen,
menuIsOpen: false
});
};

const toggleMenu = () => {
    setState({
        ...state,
        orderIsOpen: false,
        menuIsOpen: !state.menuIsOpen,
    });
};

`

[ric98esley]

Mi solucion fue elevar los toggles al contexto y que no pudieran estar los dos al mismo tiempo en pantalla, de esta manera si quiero los puedo desactivar desde otro lugar

  const [toggleOrders, setToggleOrders] = useState(false);
  const [toggleMenu, setToggleMenu] = useState(false);
  const changeToggle = toggle => {
    if(toggle === "menu"){
      setToggleMenu(!toggleMenu);
      setToggleOrders(false);
    } else if(toggle === "cart"){
      setToggleOrders(!toggleOrders);
      setToggleMenu(false);
    }
  };

[Gustavolando]

Hola,
Este reto si me exigió neuronas y habilidades investigativas!

Así quedó mi propuesta:

Les explico:
1- Para los fondos use el background en blanco (--white: #fff;) pero le puse un ligero opacity tanto al componente de Menu como al contenedor de MyOrder en sus respectivos archivos .scss:

.Menu {
  /* resto de propiedades del Menu */
  background-color: var(--white);
  opacity: 0.95;
  z-index: 100;
}

.MyOrder {
  /* resto de propiedades de MyOrder */
  background-color: white;
  opacity: 0.95;
  /* resto de propiedades de MyOrder */
}

2- El comportamiento que me parece correcto en el componente Menu, es que se desaparezca cuando este pierde el foco, es decir, cuando se le da clic a cualquier otro elemento del sitio. Algo similar con el contenedor de MyOrder, excepto que, a mi parecer, él debería permanecer visible cuando se da clic en el correo electrónico para activar el menú. Por esto aparece superpuesto el menú sobre el aside del contener de MyOrder. Y por la misma razón le di al componente Menu un z-index: 100;

Para lograr el efecto anterior tuve que implementar un par de hooks "useRef" para validar el evento del clic en cualquier parte del sitio. La lógica me quedó de la siguiente manera:

import React, { useState, useContext, useRef } from 'react'

...

  const handleToggle = () => {
    setToggle(!toggle)
    // setToggleOrders(false)
  }

  const handleToggleOrders = () => {
    setToggleOrders(!toggleOrders)
    // setToggle(false)
  }

  const mainMenu = useRef(null)
  const asideMyOrder = useRef(null)
  const closeOpenMenus = (e)=>{
    if (mainMenu.current && toggle && !mainMenu.current.contains(e.target)) {
      setToggle(false)
    }
    const navbarEmail = document.querySelector(".navbar-email")
    if (asideMyOrder.current && toggleOrders && !asideMyOrder.current.contains(e.target) && e.target != navbarEmail) {
      setToggleOrders(false)
    }
  }
  document.addEventListener('mousedown',closeOpenMenus)
  
  return (

...

      <div className="menu-container" ref={mainMenu}>
        {toggle && <Menu />}
      </div>
      <div className="my-order-container" ref={asideMyOrder}>
        {toggleOrders && <MyOrder />}
      </div>

...

De lo anterior hay varias cosas que aclarar y tener en cuenta:

• Tenemos que usar un useRef para tener la referencia del elemento que contiene el componente Menu y otro userRef para la referencia del contenedor MyOrder
• Para poder agregar la referencia en el componente de Header (mismo archivo), tuve que agregar un div adicional que contenga al componente Menu y otro div que contenga al contenedor MyOrder, ya que no podemos usar el useRef directamente en la etiqueta de un componente de react, solo en labels HTML.

      <div className="menu-container" ref={mainMenu}>
        {toggle && <Menu />}
      </div>
      <div className="my-order-container" ref={asideMyOrder}>
        {toggleOrders && <MyOrder />}
      </div>

Importante destacar que estos nuevos div deben tener las mismas propiedades de posición de Menu y MyOrder respectivamente y con sus propiedades top y right en 0 (right en este caso porque ambos componentes se alinean a la derecha)

.menu-container {
  position: absolute;
  top: 0px;
  right: 0px;
}

.my-order-container {
  position: fixed;
  right: 0;
}

• Decidí sacrificar la funcionalidad de cerrar tanto el componente Menu como el contenedor MyOrder si se le da clic nuevamente al correo o al ícono de carrito de compras respectivamente, porque esa funcionalidad de cerrar ya la realiza la lógica de la función closeOpenMenus:

En la siguiente lógica, se ocultaría el componente Menu:

• si el useRef mainMenu ya tiene asignado un valor (en este caso el nuevo div con la clase "menu-container"
• además si el Menu está activo (toggle == true)
• y ademas si el elemento al que el useRef mainMenu referencia NO contiene al elemento al que se le dio clic

    if (mainMenu.current && toggle && !mainMenu.current.contains(e.target)) {
      setToggle(false)
    }

En la siguiente lógica, se ocultaría el contenedor MyOrder:

• si el useRef asideMyOrder ya tiene asignado un valor (en este caso el nuevo div con la clase "my-order-container"
• ademas si el aside MyOrder está activo (toggleOrders == true)
• además si el elemento al que el useRef asideMyOrder referencia NO contiene al elemento al que se le dio clic
• y además si el elemento al que se le dio clic es diferente al elemento con la clase "navbar-email"

    if (asideMyOrder.current && toggleOrders && !asideMyOrder.current.contains(e.target) && e.target != navbarEmail) {
      setToggleOrders(false)
    }

Espero que la explicación les sirva y espero sus comentarios preferiblemente en el repositorio de mi proyecto:
https://github.com/Gustavolando/react-shop

[TonyRodriz]

Mi solucion fue primero colocarle el fondo al menu, solo agregue el background-color: white y funciono
.Menu { width: 150px; height: auto; border: 1px solid var(--very-light-pink); border-radius: 6px; padding: 20px 20px 0 20px; position: absolute; top: 60px; right: 50px; background-color: white; display: flex; justify-content: center; }

para hacer el toggle, se me había complicado pero al final hice esto en Header.jsx
` const handleToggle = () => {
setToggle(!toggle);
setToggleOrders(false)
}

const handleToggleOrders = () => {
	setToggleOrders(!toggleOrders);
	setToggle(false);
};`

y modificando como utilizamos el OnClick en el navbar-shoppinf-cart

<li className="navbar-shopping-cart" onClick={handleToggleOrders}>
Funcionó bien!