From ea9a2f9e25395717310fffc5525e169464f47709 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Wed, 29 Jul 2020 18:09:22 -0300
Subject: [PATCH] :recycle: make li into styled component

---
 client/modules/IDE/pages/MobileIDEView.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/modules/IDE/pages/MobileIDEView.jsx b/client/modules/IDE/pages/MobileIDEView.jsx
index 6bbd76e3..9f5cd8f1 100644
--- a/client/modules/IDE/pages/MobileIDEView.jsx
+++ b/client/modules/IDE/pages/MobileIDEView.jsx
@@ -42,6 +42,10 @@ const Expander = styled.div`
   height: ${props => (props.expanded ? remSize(160) : remSize(27))};
 `;
 
+const NavItem = styled.li`
+  position: relative;
+`;
+
 const headerNavOptions = [
   { icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences', },
   { 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" />
         }
       >
-        <li style={{ position: 'relative' }}>
+        <NavItem>
           <IconButton
             onClick={triggerNavDropdown}
             icon={MoreIcon}
             aria-label="Options"
           />
           <NavDropDown />
-        </li>
+        </NavItem>
         <li>
           <IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
         </li>