From 7558cf5e1ca2dddd771ba5901120f00c0b5376f9 Mon Sep 17 00:00:00 2001 From: ghalestrilo Date: Fri, 7 Aug 2020 19:05:46 -0300 Subject: [PATCH] :sparkles: make dropdown for sketch and collection creation --- client/modules/Mobile/MobileDashboardView.jsx | 40 ++++++++++++++----- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index ac4205d2..7cf22939 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -7,7 +7,7 @@ import { withRouter, Link } from 'react-router'; import Screen from '../../components/mobile/MobileScreen'; import Header from '../../components/mobile/Header'; import IconButton from '../../components/mobile/IconButton'; -import { ExitIcon } from '../../common/icons'; +import { ExitIcon, MoreIcon } from '../../common/icons'; import Footer from '../../components/mobile/Footer'; import { prop, remSize } from '../../theme'; import SketchList from '../IDE/components/SketchList'; @@ -16,6 +16,8 @@ import AssetList from '../IDE/components/AssetList'; import Content from './MobileViewContent'; import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar'; import Button from '../../common/Button'; +import useAsModal from '../../components/useAsModal'; +import Dropdown from '../../components/Dropdown'; const EXAMPLE_USERNAME = 'p5'; @@ -94,10 +96,11 @@ const Panels = { assets: AssetList }; -const CreatePathname = { - sketches: '/mobile', - collections: '/mobile/:username/collections/create', -}; + +const navOptions = username => [ + { title: 'Create Sketch', href: '/mobile' }, + { title: 'Create Collection', href: `/mobile/${username}/collections/create` } +]; const getPanel = (pathname) => { @@ -106,7 +109,10 @@ const getPanel = (pathname) => { return matches && matches.length > 0 && matches[0]; }; -const getCreatePathname = (panel, username) => (CreatePathname[panel] || '#').replace(':username', username); +const NavItem = styled.li` + position: relative; +`; + const isOwner = (user, params) => user && params && user.username === params.username; @@ -114,27 +120,41 @@ const renderPanel = (name, props) => (Component => (Component && { const user = useSelector(state => state.user); - const { username } = params; + const { username: paramsUsername } = params; const { pathname } = location; const Tabs = Object.keys(Panels); - const isExamples = username === EXAMPLE_USERNAME; + const isExamples = paramsUsername === EXAMPLE_USERNAME; const panel = getPanel(pathname); + + const [toggleNavDropdown, NavDropdown] = useAsModal(); + return (
+ + + + +
- {isOwner(user, params) && (panel !== Tabs[2]) && new} {panel === Tabs[0] && } {panel === Tabs[1] && } - {renderPanel(panel, { username, key: pathname })} + {renderPanel(panel, { paramsUsername, key: pathname })}