♻️ make li into styled component

This commit is contained in:
ghalestrilo 2020-07-29 18:09:22 -03:00
parent 10ccc195d2
commit ea9a2f9e25

View file

@ -42,6 +42,10 @@ const Expander = styled.div`
height: ${props => (props.expanded ? remSize(160) : remSize(27))}; height: ${props => (props.expanded ? remSize(160) : remSize(27))};
`; `;
const NavItem = styled.li`
position: relative;
`;
const headerNavOptions = [ const headerNavOptions = [
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', }, { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' }, { icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
@ -72,14 +76,14 @@ const MobileIDEView = (props) => {
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" /> <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
} }
> >
<li style={{ position: 'relative' }}> <NavItem>
<IconButton <IconButton
onClick={triggerNavDropdown} onClick={triggerNavDropdown}
icon={MoreIcon} icon={MoreIcon}
aria-label="Options" aria-label="Options"
/> />
<NavDropDown /> <NavDropDown />
</li> </NavItem>
<li> <li>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" /> <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
</li> </li>