Feat/overview new action

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#102](https://github.com/alleslabs/celatone-frontend/pull/102) Add quick menu in overview and add highlighted in left sidebar
 - [#101](https://github.com/alleslabs/celatone-frontend/pull/101) Fix incorrect truncating of proposal id in contract detail's migration table
 - [#100](https://github.com/alleslabs/celatone-frontend/pull/100) Fix contract instantiated time parsing
 - [#97](https://github.com/alleslabs/celatone-frontend/pull/97) Change label style to always afloat

src/lib/layout/Navbar.tsx

@@ -1,6 +1,7 @@
-import { Flex, Box, Text, Icon, Button, Spacer } from "@chakra-ui/react";
+import { Flex, Box, Text, Icon } from "@chakra-ui/react";
 import { useWallet } from "@cosmos-kit/react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import {
   MdHome,
   MdCode,
@@ -48,6 +49,11 @@ const Navbar = observer(() => {
     {
       category: "Quick Actions",
       submenu: [
+        {
+          name: "Deploy contract",
+          slug: "/deploy",
+          icon: MdOutlineAdd,
+        },
         {
           name: "Query",
           slug: "/query",
@@ -111,7 +117,16 @@ const Navbar = observer(() => {
     //   ],
     // },
   ];
-
+  const router = useRouter();
+  const isCurrentPage = (slug: string) => {
+    if (slug === "/") {
+      return router.asPath === `/${router.query.network}`;
+    }
+    if (slug) {
+      return router.asPath === `/${router.query.network}${slug}`;
+    }
+    return undefined;
+  };
   return (
     <Flex direction="column" h="full" overflow="hidden" position="relative">
       <Box p={4} overflowY="scroll" pb={12}>
@@ -152,6 +167,10 @@ const Navbar = observer(() => {
                   _hover={{ bg: "gray.800", borderRadius: "4px" }}
                   transition="all .25s ease-in-out"
                   alignItems="center"
+                  bgColor={
+                    isCurrentPage(submenu.slug) ? "gray.800" : "transparent"
+                  }
+                  borderRadius={isCurrentPage(submenu.slug) ? "4px" : "0px"}
                 >
                   <Icon as={submenu.icon} color="gray.600" boxSize="4" />
                   <Text variant="body2" className="ellipsis">
@@ -163,8 +182,8 @@ const Navbar = observer(() => {
           </Box>
         ))}
       </Box>
-      <Spacer />
-      <Flex
+      {/* Hide deploy new contract button for now */}
+      {/* <Flex
         position="fixed"
         bottom="0"
         py={3}
@@ -181,7 +200,7 @@ const Navbar = observer(() => {
             Deploy new contract
           </Button>
         </AppLink>
-      </Flex>
+      </Flex> */}
     </Flex>
   );
 });

src/lib/pages/home/components/QuickMenu.tsx

@@ -1,30 +1,48 @@
-import { Flex, Heading, Box, Text, Icon } from "@chakra-ui/react";
-import { MdChevronRight, MdSearch, MdInput } from "react-icons/md";
+import { Flex, Heading, Box, Text, Icon, SimpleGrid } from "@chakra-ui/react";
+import {
+  MdChevronRight,
+  MdSearch,
+  MdInput,
+  MdReadMore,
+  MdPerson,
+} from "react-icons/md";
 
 import { AppLink } from "lib/components/AppLink";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 
-// TODO remove link text-decoration underline
 const cardProps = {
   width: "100%",
   padding: "16px",
   borderRadius: "4px",
   justifyContent: "space-between",
+  height: "100%",
 };
 
 const secondaryMenu = [
   {
     title: "Query",
-    subtitle: "Query and get response from smart contract",
+    subtitle: "Query and get state data",
     slug: "query",
     icon: MdSearch,
   },
   {
     title: "Execute",
-    subtitle: "Send execute messages to smart contract",
+    subtitle: "Send transactions to contracts",
     slug: "execute",
     icon: MdInput,
   },
+  {
+    title: "Migrate",
+    subtitle: "Migrate to other Code ID",
+    slug: "migrate",
+    icon: MdReadMore,
+  },
+  {
+    title: "Update Admin",
+    subtitle: "Change contract admin",
+    slug: "admin",
+    icon: MdPerson,
+  },
 ];
 
 export const QuickMenu = () => {
@@ -38,7 +56,7 @@ export const QuickMenu = () => {
         subtitle="Actions such as deploying new contracts or sending execute messages require a wallet connection."
       />
       <Flex gap={4}>
-        <AppLink href="/deploy" style={{ width: "100%" }}>
+        <AppLink href="/deploy" style={{ width: "55%" }}>
           <Flex
             bg="primary.main"
             _hover={{ bg: "primary.light" }}
@@ -58,7 +76,8 @@ export const QuickMenu = () => {
             <Icon as={MdChevronRight} color="gray.900" boxSize={9} />
           </Flex>
         </AppLink>
-        <Flex direction="column" gap={4} w="full">
+
+        <SimpleGrid columns={2} spacing={3} w="full">
           {secondaryMenu.map((item) => (
             <AppLink href={`/${item.slug}`} key={item.slug}>
               <Flex
@@ -87,7 +106,9 @@ export const QuickMenu = () => {
               </Flex>
             </AppLink>
           ))}
-        </Flex>
+        </SimpleGrid>
+        {/* <Flex direction="column" gap={4} w="full">
+        </Flex> */}
       </Flex>
     </Flex>
   );