🚧 put an invisible <Dropdown /> on MobileIDEView

This commit is contained in:
ghalestrilo 2020-07-21 19:03:22 -03:00
parent 24e6b3639f
commit ca88c4e68c
2 changed files with 21 additions and 3 deletions

View file

@ -39,6 +39,8 @@ import { Link } from 'react-router';
// </li>
// </ul>
// 'nav__item--open'
const Dropdown = ({ items }) => (
<ul className="nav__dropdown">
{items && items.map(item => (

View file

@ -28,6 +28,7 @@ import Footer from '../../../components/mobile/Footer';
import IDEWrapper from '../../../components/mobile/IDEWrapper';
import Console from '../components/Console';
import { remSize } from '../../../theme';
import Dropdown from '../../../components/Dropdown';
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
@ -36,6 +37,16 @@ const BottomBarContent = styled.h2`
padding-left: ${remSize(32)};
`;
// TODO: Move to new file?
// const overlays = {};
// const OverlayManager = name => overlays[name] || null;
const headerNavOptions = [
{ icon: PreferencesIcon, title: 'Preferences', route: '/mobile/preferences' }
];
const MobileIDEView = (props) => {
const {
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
@ -48,6 +59,8 @@ const MobileIDEView = (props) => {
const [tmController, setTmController] = useState(null); // eslint-disable-line
const [overlay, setOverlay] = useState(null); // eslint-disable-line
// const overlayActive = name => (overlay === name);
return (
<Screen fullscreen>
<Header
@ -58,10 +71,10 @@ const MobileIDEView = (props) => {
}
>
<IconButton
to="/mobile/preferences"
onClick={() => setOverlay('preferences')}
// to="/mobile/preferences"
onClick={() => setOverlay('dropdown')}
icon={MoreIcon}
aria-label="Open preferences menu"
aria-label="Options"
/>
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
</Header>
@ -106,6 +119,9 @@ const MobileIDEView = (props) => {
<Console />
<BottomBarContent>Bottom Bar</BottomBarContent>
</Footer>
{/* Overlays */}
<Dropdown hidden={overlay !== 'dropdown'} items={headerNavOptions} />
</Screen>
);
};