Merge pull request #531 from alleslabs/fix/dev-features-improve

Fix/dev features improve
alleslabs · Sep 18, 2023 · 9da2c36 · 9da2c36 · vercel · Sep 18, 2023
2 parents d57d5fd + 08dc4e7
commit 9da2c36
Show file tree

Hide file tree

Showing 8 changed files with 266 additions and 291 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#531](https://github.com/alleslabs/celatone-frontend/pull/531) Revise developer features and add accordion to sidebar navigation
 - [#529](https://github.com/alleslabs/celatone-frontend/pull/529) Improve developer features ux writing and transition
 - [#528](https://github.com/alleslabs/celatone-frontend/pull/528) Improve developer features toggle for a smoother ux
 - [#519](https://github.com/alleslabs/celatone-frontend/pull/519) Validate schema input when initialFormData has changed

diff --git a/src/lib/layout/SubHeader.tsx b/src/lib/layout/SubHeader.tsx
@@ -1,108 +1,22 @@
-import {
-  Flex,
-  Text,
-  Switch,
-  FormControl,
-  FormLabel,
-  Button,
-  Heading,
-} from "@chakra-ui/react";
-import { AnimatePresence } from "framer-motion";
-import type { CSSProperties, Dispatch, SetStateAction } from "react";
-import { useEffect, useRef } from "react";
+import { Flex, Text } from "@chakra-ui/react";
 
 import { usePoolConfig, useGovConfig, useWasmConfig } from "lib/app-provider";
 import { AppLink } from "lib/components/AppLink";
 import type { IconKeys } from "lib/components/icon";
 import { CustomIcon } from "lib/components/icon";
-import { MotionBox } from "lib/components/MotionBox";
-import { Tooltip } from "lib/components/Tooltip";
 import { useIsCurrentPage } from "lib/hooks";
-import type { Option } from "lib/types";
 
 interface SubHeaderMenuInfo {
   name: string;
   slug: string;
   icon: IconKeys;
 }
 
-const boxShadow = "0px 4px 8px 0px var(--chakra-colors-gray-900)";
-const FirstLandPrompt = ({
-  setIsDevMode,
-}: {
-  setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
-}) => (
-  <AnimatePresence>
-    <MotionBox
-      key="modal"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      transition={{
-        delay: "1",
-        duration: "0.5",
-        ease: "easeInOut",
-      }}
-      position="absolute"
-      right="24px"
-      mt={1}
-      gap={2}
-      p={6}
-      display="flex"
-      flexDirection="column"
-      bg="gray.800"
-      w="430px"
-      borderRadius={4}
-      boxShadow={boxShadow}
-      zIndex="popover"
-    >
-      <Flex>
-        <Heading as="h6" variant="h6" fontWeight={600}>
-          Want to
-          <Text as="span" color="accent.main" pl={1}>
-            Deploy, Query, or Execute?
-          </Text>
-        </Heading>
-      </Flex>
-      <Text variant="body2" color="text.main" my={1}>
-        Turn on Dev Features to get full access to our deploy, query, execute
-        and other developer features through{" "}
-        <Text as="span" fontWeight={600}>
-          sidebar navigation
-        </Text>
-        .
-      </Text>
-      <Flex direction="column" gap={2}>
-        <Button onClick={() => setIsDevMode(true)}>Turn on Dev Feature!</Button>
-        <Button variant="outline-primary" onClick={() => setIsDevMode(false)}>
-          Use Celatone as Explorer
-        </Button>
-        <Text variant="body3" textAlign="center" color="text.dark">
-          You can change it back anytime
-        </Text>
-      </Flex>
-    </MotionBox>
-  </AnimatePresence>
-);
-
-interface SubHeaderProps {
-  isExpand: boolean;
-  isDevMode: Option<boolean>;
-  setIsDevMode: Dispatch<SetStateAction<Option<boolean>>>;
-  setIsExpand: Dispatch<SetStateAction<boolean>>;
-}
-const SubHeader = ({
-  isExpand,
-  isDevMode,
-  setIsDevMode,
-  setIsExpand,
-}: SubHeaderProps) => {
+const SubHeader = () => {
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
   const poolConfig = usePoolConfig({ shouldRedirect: false });
   const govConfig = useGovConfig({ shouldRedirect: false });
 
-  const prevIsDevModeRef = useRef<boolean>(Boolean(isDevMode));
-
   const subHeaderMenu: SubHeaderMenuInfo[] = [
     { name: "Overview", slug: "/", icon: "home" },
     { name: "Transactions", slug: "/txs", icon: "file" },
@@ -124,92 +38,50 @@ const SubHeader = ({
 
   const activeColor = "primary.light";
 
-  const switchHighlight: CSSProperties = {
-    borderRadius: "4px",
-    padding: "6px 8px",
-    backgroundColor: "var(--chakra-colors-gray-700)",
-  };
-
-  useEffect(() => {
-    // Basic to dev and nav is  collapse -> should exapnd
-    if (isDevMode && !prevIsDevModeRef.current && !isExpand) setIsExpand(true);
-    prevIsDevModeRef.current = Boolean(isDevMode);
-  }, [isDevMode, isExpand, setIsExpand]);
-
   return (
-    <>
-      <Flex px={6} alignItems="center" h="full" justifyContent="space-between">
-        <Flex h="full">
-          {subHeaderMenu.map((item) => (
-            <AppLink href={item.slug} key={item.slug}>
-              <Flex
-                alignItems="center"
-                px={4}
-                gap={2}
-                h="full"
-                borderBottomWidth={2}
-                borderColor={
-                  isCurrentPage(item.slug) ? activeColor : "transparent"
-                }
-                transition="all .25s ease-in-out"
-                _hover={{ borderColor: activeColor }}
-                sx={{
-                  _hover: {
-                    "> svg, > p": {
-                      color: activeColor,
-                      transition: "all .25s ease-in-out",
-                    },
-                    borderBottomWidth: 2,
-                    borderColor: activeColor,
+    <Flex px={6} alignItems="center" h="full" justifyContent="space-between">
+      <Flex h="full">
+        {subHeaderMenu.map((item) => (
+          <AppLink href={item.slug} key={item.slug}>
+            <Flex
+              alignItems="center"
+              px={4}
+              gap={2}
+              h="full"
+              borderBottomWidth={2}
+              borderColor={
+                isCurrentPage(item.slug) ? activeColor : "transparent"
+              }
+              transition="all .25s ease-in-out"
+              _hover={{ borderColor: activeColor }}
+              sx={{
+                _hover: {
+                  "> svg, > p": {
+                    color: activeColor,
+                    transition: "all .25s ease-in-out",
                   },
-                }}
+                  borderBottomWidth: 2,
+                  borderColor: activeColor,
+                },
+              }}
+            >
+              <CustomIcon
+                boxSize={3}
+                name={item.icon}
+                color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
+              />
+              <Text
+                variant="body2"
+                fontWeight={700}
+                color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
               >
-                <CustomIcon
-                  boxSize={3}
-                  name={item.icon}
-                  color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
-                />
-                <Text
-                  variant="body2"
-                  fontWeight={700}
-                  color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
-                >
-                  {item.name}
-                </Text>
-              </Flex>
-            </AppLink>
-          ))}
-        </Flex>
-        <Tooltip
-          label="Enable to access to our deploy, query, execute, and other developer features."
-          placement="bottom"
-          isDisabled={isDevMode === undefined}
-        >
-          <FormControl
-            display="flex"
-            alignItems="center"
-            width="fit-content"
-            style={isDevMode === undefined ? switchHighlight : undefined}
-          >
-            <FormLabel mb={0} cursor="pointer" mr={2}>
-              <Text variant="body2" color="text.dark" fontWeight={600}>
-                Dev Features
+                {item.name}
               </Text>
-            </FormLabel>
-            <Switch
-              size="md"
-              isChecked={isDevMode}
-              onChange={(e) => {
-                setIsDevMode(e.target.checked);
-              }}
-            />
-          </FormControl>
-        </Tooltip>
+            </Flex>
+          </AppLink>
+        ))}
       </Flex>
-      {isDevMode === undefined && (
-        <FirstLandPrompt setIsDevMode={setIsDevMode} />
-      )}
-    </>
+    </Flex>
   );
 };
 

diff --git a/src/lib/layout/index.tsx b/src/lib/layout/index.tsx
@@ -19,7 +19,7 @@ type LayoutProps = {
 const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const isMobile = useMobile();
-  const { isExpand, isDevMode, setIsExpand, setIsDevMode } = useNavContext();
+  const { isExpand, setIsExpand } = useNavContext();
 
   const defaultRow = "70px 48px 1fr";
   const mode = useMemo(() => {
@@ -37,16 +37,9 @@ const Layout = ({ children }: LayoutProps) => {
       templateRows: defaultRow,
       templateCols: isExpand ? "250px 1fr" : "48px 1fr",
       header: <Header />,
-      subHeader: (
-        <SubHeader
-          isExpand={isExpand}
-          isDevMode={isDevMode}
-          setIsDevMode={setIsDevMode}
-          setIsExpand={setIsExpand}
-        />
-      ),
+      subHeader: <SubHeader />,
     };
-  }, [isMobile, isExpand, isDevMode, setIsDevMode, setIsExpand]);
+  }, [isExpand, isMobile]);
 
   useEffect(() => {
     scrollToTop();
@@ -81,11 +74,7 @@ const Layout = ({ children }: LayoutProps) => {
             area="nav"
             overflowY="auto"
           >
-            <Navbar
-              isExpand={isExpand}
-              setIsExpand={setIsExpand}
-              isDevMode={isDevMode}
-            />
+            <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />
           </GridItem>
         </>
       )}

diff --git a/src/lib/layout/navbar/Collapse.tsx b/src/lib/layout/navbar/Collapse.tsx
@@ -114,6 +114,31 @@ export const CollapseNavMenu = ({
               </AppLink>
             )
           )}
+          {item.subSection &&
+            item.subSection.map((section) => (
+              <div key={section.category}>
+                {section.submenu.map((subitem) =>
+                  subitem.isDisable ? (
+                    <CollapseNavInfo
+                      key={subitem.slug}
+                      submenu={subitem}
+                      isCurrentPage={isCurrentPage}
+                    />
+                  ) : (
+                    <AppLink
+                      href={subitem.slug}
+                      key={subitem.slug}
+                      onClick={() => AmpTrack(AmpEvent.USE_SIDEBAR)}
+                    >
+                      <CollapseNavInfo
+                        submenu={subitem}
+                        isCurrentPage={isCurrentPage}
+                      />
+                    </AppLink>
+                  )
+                )}
+              </div>
+            ))}
         </Box>
       ))}
     </Box>