Check out these custom components I created:
<UserImg imgUrl={userPhoto}>
<DropDown>
<div onClick={handleAuth}>Sign Out</div>
</DropDown>
</UserImg>
const DropDown = styled.div`
letter-spacing: 0.2em;
position: relative;
top: 7vh;
left: 23vw;
border-radius: 2px;
text-transform: uppercase;
transition: all 0.5s ease-in;
border: 2px solid red;
div {
padding: 0.3em;
}
`;
const UserImg = styled.a`
background-image: url(${(props) => props.imgUrl});
background-repeat: no-repeat;
background-size: contain;
background-position: 30%;
display: inline-block;
cursor: pointer;
position: relative;
height: 12vh;
width: 5vw;
left: 25vw;
border: 2px solid white;
border-radius: 50%;
&:hover {
${DropDown} {
visibility: visible;
border: 1px solid white;
border: transparent;
cursor: pointer;
}
}
`;
The UserImg component is functioning properly, but unfortunately the DropDown component isn't showing up as expected.
I'm looking to have the DropDown component visible on the page.