drawer solution

frontend/src/components/AddNewIconButton.js

@@ -0,0 +1,128 @@
+import React, { useContext } from "react";
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuGroup,
+  MenuDivider,
+  IconButton,
+  chakra,
+  useDisclosure,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  FormLabel,
+  Input,
+  Stack,
+  InputGroup,
+  InputLeftAddon,
+  Box,
+  Textarea,
+  Button,
+} from "@chakra-ui/react";
+import { PlusSquareIcon } from "@chakra-ui/icons";
+import UIContext from "../core/providers/UIProvider/context";
+
+const AddNewIconButton = (props) => {
+  const ui = useContext(UIContext);
+  const { onOpen, isOpen, onClose } = useDisclosure();
+  const firstField = React.useRef();
+  return (
+    <>
+      <Drawer
+        isOpen={isOpen}
+        placement="top"
+        size="full"
+        initialFocusRef={firstField}
+        onClose={onClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader borderBottomWidth="1px">
+            Create a new dashboard from an ABI
+          </DrawerHeader>
+
+          <DrawerBody>
+            <Stack spacing="24px">
+              <Box>
+                <FormLabel htmlFor="username">Name dashboard</FormLabel>
+                <Input
+                  ref={firstField}
+                  id="username"
+                  type="search"
+                  placeholder="Please enter user name"
+                />
+              </Box>
+
+              <Box>
+                <FormLabel htmlFor="url">Address</FormLabel>
+                <InputGroup>
+                  <InputLeftAddon>Contract @</InputLeftAddon>
+                  <Input
+                    type="url"
+                    id="url"
+                    placeholder="Please enter ens domain or address"
+                  />
+                </InputGroup>
+              </Box>
+
+              <Box>
+                <FormLabel htmlFor="desc">ABI</FormLabel>
+                <Textarea
+                  id="desc"
+                  placeholder="ABI Upload element should be here instead"
+                />
+              </Box>
+            </Stack>
+          </DrawerBody>
+
+          <DrawerFooter borderTopWidth="1px">
+            <Button variant="outline" mr={3} onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              colorScheme="blue"
+              onClick={() => {
+                console.log("submit clicked");
+              }}
+            >
+              Submit
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+      <Menu>
+        <MenuButton
+          {...props}
+          as={IconButton}
+          aria-label="Account menu"
+          icon={<PlusSquareIcon />}
+          // variant="outline"
+          color="gray.100"
+        />
+        <MenuList
+          zIndex="dropdown"
+          width={["100vw", "100vw", "18rem", "20rem", "22rem", "24rem"]}
+          borderRadius={0}
+        >
+          <MenuGroup>
+            <MenuItem onClick={onOpen}>New Dashboard...</MenuItem>
+
+            {ui.isInDashboard && <MenuItem>New report...</MenuItem>}
+          </MenuGroup>
+          <MenuDivider />
+        </MenuList>
+      </Menu>
+    </>
+  );
+};
+
+const ChakraAddNewIconButton = chakra(AddNewIconButton);
+
+export default ChakraAddNewIconButton;

frontend/src/components/AppNavbar.js

@@ -1,5 +1,4 @@
 import React, { useState, useContext, useEffect } from "react";
-import RouterLink from "next/link";
 import {
   Flex,
   Image,
@@ -23,11 +22,11 @@ import {
   ArrowLeftIcon,
   ArrowRightIcon,
 } from "@chakra-ui/icons";
-import { MdTimeline } from "react-icons/md";
 import useRouter from "../core/hooks/useRouter";
 import UIContext from "../core/providers/UIProvider/context";
 import AccountIconButton from "./AccountIconButton";
 import RouteButton from "./RouteButton";
+import AddNewIconButton from "./AddNewIconButton";
 import {
   USER_NAV_PATHES,
   ALL_NAV_PATHES,
@@ -129,6 +128,13 @@ const AppNavbar = () => {
                 })}
               </ButtonGroup>
               <SupportPopover />
+              <AddNewIconButton
+                colorScheme="blue"
+                variant="link"
+                color="gray.100"
+                size="lg"
+                h="32px"
+              />
               <AccountIconButton
                 colorScheme="blue"
                 variant="link"
@@ -161,19 +167,14 @@ const AppNavbar = () => {
                 }}
               />
             )}
-            <RouterLink href="/stream" passHref>
-              <IconButton
-                m={0}
-                variant="link"
-                justifyContent="space-evenly"
-                alignContent="center"
-                h="32px"
-                size={iconSize}
-                colorScheme="gray"
-                aria-label="go to ticker"
-                icon={<MdTimeline />}
-              />
-            </RouterLink>
+            <AddNewIconButton
+              variant="link"
+              justifyContent="space-evenly"
+              alignContent="center"
+              h="32px"
+              size={iconSize}
+              colorScheme="blue"
+            />
             {!isSearchBarActive && (
               <IconButton
                 m={0}