1

tengo rato tratando de enviar al final del item a un button, aqui un impr:

introducir la descripción de la imagen aquí

lo que quiero es que el botton este a la derecha del iten de borde verde, aqui el codigo:

  render(){
    return (
      <div className="App">          
        <header className="App-header">
          <div className="App-header-company">
            <img className="App-logo" src={logo}  alt="logo" />
            <div className="App-header-title" style={{ marginTop:'auto', padding: '10px', }}>My App News</div>
          </div>          
          <div className="App-header-btnMenu"> <MenuButton /> </div>
        </header>
        <div className="content">                      
          <Nav/> 
                   
        </div>      
      </div>
    );
  }

.App {
  width: 100%;
  height: auto;
}

.App-header {
  width: 100%;
  min-width: 380px;
  height: auto;
  margin: 0px;
  display: flex;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  background-color: #282c34;
  color: white; 
}

.App-header-company{
  width: 50%;
  display: flex;
  align-items: flex-start; 
  border: solid 4px yellow;
}

.App-header-btnMenu{
  width: 50%;
  display: flex;
  justify-content: flex-end;  
  border: solid 4px green;
}

MenuButton.js

import React, {useState} from "react";
import styled from "styled-components";

const MenuButtonWrapper = styled.button`

display: none; 
position: relative;

  @media screen and (max-width: 700px) {
    display:flex;
    float: right;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 1px rgb(50, 50, 50);
    margin: auto;
  }
`

function MenuButton() {

    const [open, setOpen] = useState(false)

    const handleClick = () => {
      setOpen(!open)
    }

  return !open ? (
    <MenuButtonWrapper onClick={handleClick}>
      <svg viewBox="0 0 100 80" width="30" height="30" fill="#282c34">
        <rect width="90" height="10" />
        <rect y="30" width="80" height="10" />
        <rect y="60" width="70" height="10" />
      </svg>
    </MenuButtonWrapper>
  ) : (
    <MenuButtonWrapper onClick={handleClick}>
      <svg
        className="svg-icon"
        width="30"
        height="30"
        viewBox="0 0 20 20"
        fill="#282c34"
      > 
        <path d="M15.898,4.045c-0.271-0.272-0.713-0.272-0.986,0l-4.71,4.711L5.493,4.045c-0.272-0.272-0.714-0.272-0.986,0s-0.272,0.714,0,0.986l4.709,4.711l-4.71,4.711c-0.272,0.271-0.272,0.713,0,0.986c0.136,0.136,0.314,0.203,0.492,0.203c0.179,0,0.357-0.067,0.493-0.203l4.711-4.711l4.71,4.711c0.137,0.136,0.314,0.203,0.494,0.203c0.178,0,0.355-0.067,0.492-0.203c0.273-0.273,0.273-0.715,0-0.986l-4.711-4.711l4.711-4.711C16.172,4.759,16.172,4.317,15.898,4.045z" />
      </svg>
    </MenuButtonWrapper>
  )
}

export default MenuButton;

en Menu button, la intencion es que al clickear se muestre nav y se oculte.

como pueden ver, se trata de un header(el contenedor) y el mismo lo divido por la mitad, en donde el item de border amarrillo es uno y el verde es el otro, dentro del borde verde tengo el botton que es un componente aparte, a este botton quiero que este al final del item de borde verde, en que me estoy equivocando??

2
  • Puedes compartir el código del componente MenuButon? Así como presentas el código no hay ningún problema con los estilos, puede ser que el problema venga del MenuButton
    – g.4
    Commented el 18 feb. 2021 a las 18:56
  • listo!! le acabo de añadir float: right; a menubutton crei que me iba a funcionar.. pero no funciono
    – Gerarca
    Commented el 18 feb. 2021 a las 19:03

1 respuesta 1

1

Dentro del componente MenuButton, descarta las siguientes propiedades del styled component :

  float: right;
  margin: auto;

Debe quedar así:

@media screen and (max-width: 700px) {
    display:flex;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 1px rgb(50, 50, 50);
  }

Otra observación que puede ser de ayuda, en el return dentro del contexto boolean del operador condicional, en la primera expresión, falta la clase para svg:

<svg viewBox="0 0 100 80" width="30" height="30" fill="#282c34">

Parece que debe ir así:

<svg className="svg-icon" viewBox="0 0 100 80" width="30" height="30" fill="#282c34">

Espero que esta respuesta sea de ayuda.

3
  • g.4! mil gracias por tu aporte, si me sirvió de mucho!!
    – Gerarca
    Commented el 18 feb. 2021 a las 20:47
  • Que bien colega, no olvides votar y aceptar la respuesta si consideras que fue de utilidad, saludos
    – g.4
    Commented el 18 feb. 2021 a las 20:57
  • listo (Y) mil gracias!
    – Gerarca
    Commented el 18 feb. 2021 a las 21:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.