add button and functionality

Author: dewanshDT

client/common/icons.jsx

@@ -18,12 +18,11 @@ import Account from '../images/account.svg';
 import Code from '../images/code.svg';
 import Save from '../images/save.svg';
 import Terminal from '../images/terminal.svg';
-
 import Folder from '../images/folder-padded.svg';
-
 import CircleTerminal from '../images/circle-terminal.svg';
 import CircleFolder from '../images/circle-folder.svg';
 import CircleInfo from '../images/circle-info.svg';
+import Add from '../images/add.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -94,9 +93,8 @@ export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
 export const SaveIcon = withLabel(Save);
-
 export const FolderIcon = withLabel(Folder);
-
 export const CircleTerminalIcon = withLabel(CircleTerminal);
 export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);
+export const AddIcon = withLabel(Add);

client/images/add.svg

@@ -13,7 +13,12 @@ import NavMenuItem from '../../../../components/Nav/NavMenuItem';
 import { prop, remSize } from '../../../../theme';
 import AsteriskIcon from '../../../../images/p5-asterisk.svg';
 import IconButton from '../../../../components/mobile/IconButton';
-import { AccountIcon, EditorIcon, MoreIcon } from '../../../../common/icons';
+import {
+  AccountIcon,
+  AddIcon,
+  EditorIcon,
+  MoreIcon
+} from '../../../../common/icons';
 import {
   newFile,
   newFolder,
@@ -29,6 +34,7 @@ import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
 import Overlay from '../../../App/components/Overlay';
 import ProjectName from './ProjectName';
+import CollectionCreate from '../../../User/components/CollectionCreate';
 
 const Nav = styled(NavBar)`
   background: ${prop('MobilePanel.default.background')};
@@ -238,6 +244,7 @@ const MobileNav = () => {
         )}
       </Title>
       <Options>
+        {title === 'My Stuff' && <StuffMenu />}
         {user.authenticated ? (
           <AccountMenu />
         ) : (
@@ -261,6 +268,40 @@ const MobileNav = () => {
   );
 };
 
+const StuffMenu = () => {
+  const dispatch = useDispatch();
+  const { isOpen, handlers } = useMenuProps('stuff');
+  const { newSketch } = useSketchActions();
+
+  const [createCollectionVisible, setCreateCollectionVisible] = useState(false);
+
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <IconButton icon={AddIcon} {...handlers} />
+      <ul className={isOpen ? 'opened' : ''}>
+        <ParentMenuContext.Provider value="stuff">
+          <NavMenuItem onClick={() => newSketch()}>
+            {t('DashboardView.NewSketch')}
+          </NavMenuItem>
+          <NavMenuItem onClick={() => setCreateCollectionVisible(true)}>
+            {t('DashboardView.CreateCollection')}
+          </NavMenuItem>
+        </ParentMenuContext.Provider>
+      </ul>
+      {createCollectionVisible && (
+        <Overlay
+          title={t('DashboardView.CreateCollectionOverlay')}
+          closeOverlay={() => setCreateCollectionVisible(false)}
+        >
+          <CollectionCreate />
+        </Overlay>
+      )}
+    </div>
+  );
+};
+
 const AccountMenu = () => {
   const user = useSelector((state) => state.user);
   const dispatch = useDispatch();