From bb68f843a025e550b2019876a2f7e42bcfe57813 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Wed, 20 Oct 2021 16:12:57 +0200
Subject: [PATCH] drawer solution

---
 frontend/src/components/AddNewIconButton.js | 128 ++++++++++++++++++++
 frontend/src/components/AppNavbar.js        |  31 ++---
 2 files changed, 144 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/components/AddNewIconButton.js

diff --git a/frontend/src/components/AddNewIconButton.js b/frontend/src/components/AddNewIconButton.js
new file mode 100644
index 00000000..0525cf54
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/AppNavbar.js b/frontend/src/components/AppNavbar.js
index 601a5adf..eb05fce4 100644
--- a/frontend/src/components/AppNavbar.js
+++ b/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}