feat(components): adjust navigation and overview page for lite version

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#898](https://github.com/alleslabs/celatone-frontend/pull/898) Adjust navigation and overview page for lite version
 - [#897](https://github.com/alleslabs/celatone-frontend/pull/897) Add config for lite version support
 
 ### Improvements

src/lib/layout/NetworkMenu.tsx

@@ -49,7 +49,7 @@ export const NetworkMenu = () => {
           <CustomIcon name="chevron-down" color="gray.600" />
         </Flex>
       </MenuButton>
-      <MenuList zIndex="dropdown">
+      <MenuList zIndex="dropdown" maxH="70vh" overflow="scroll">
         {availableChainIds.map((chainId) => (
           <MenuItem
             key={chainId}

src/lib/layout/SubHeader.tsx

@@ -6,106 +6,150 @@ import {
   useMoveConfig,
   useNftConfig,
   usePoolConfig,
+  useTierConfig,
   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 { useIsCurrentPage } from "lib/hooks";
 
+const ACTIVE_COLOR = "primary.light";
+
 interface SubHeaderMenuInfo {
   name: string;
   slug: string;
   icon: IconKeys;
 }
 
 const SubHeader = () => {
+  const tier = useTierConfig();
   const govConfig = useGovConfig({ shouldRedirect: false });
   const wasmConfig = useWasmConfig({ shouldRedirect: false });
   const moveConfig = useMoveConfig({ shouldRedirect: false });
   const nftConfig = useNftConfig({ shouldRedirect: false });
   const poolConfig = usePoolConfig({ shouldRedirect: false });
 
-  const subHeaderMenu: SubHeaderMenuInfo[] = [
-    { name: "Overview", slug: "/", icon: "home" },
-    { name: "Transactions", slug: "/txs", icon: "file" },
-    { name: "Blocks", slug: "/blocks", icon: "block" },
-  ];
-
-  if (govConfig.enabled)
-    subHeaderMenu.push(
-      { name: "Validators", slug: "/validators", icon: "validator" },
-      { name: "Proposals", slug: "/proposals", icon: "proposal" }
-    );
-
-  if (wasmConfig.enabled)
-    subHeaderMenu.push(
-      { name: "Codes", slug: "/codes", icon: "code" },
-      { name: "Contracts", slug: "/contracts", icon: "contract-address" }
-    );
-
-  if (moveConfig.enabled)
-    subHeaderMenu.push({
-      name: "Modules",
-      slug: "/modules",
-      icon: "contract-address",
-    });
-
-  if (nftConfig.enabled)
-    subHeaderMenu.push({
-      name: "NFTs",
-      slug: "/nft-collections",
-      icon: "group",
-    });
-
-  if (poolConfig.enabled)
-    subHeaderMenu.push({ name: "Osmosis Pools", slug: "/pools", icon: "pool" });
-
   const isCurrentPage = useIsCurrentPage();
 
-  const activeColor = "primary.light";
-
-  const trackOnClick = (tab: string) => {
-    track(AmpEvent.USE_TOPBAR, { tab });
-  };
+  const subMenu: SubHeaderMenuInfo[] =
+    tier === "full"
+      ? [
+          { name: "Overview", slug: "/", icon: "home" },
+          { name: "Transactions", slug: "/txs", icon: "file" },
+          { name: "Blocks", slug: "/blocks", icon: "block" },
+          ...(govConfig.enabled
+            ? [
+                {
+                  name: "Validators",
+                  slug: "/validators",
+                  icon: "validator" as IconKeys,
+                },
+                {
+                  name: "Proposals",
+                  slug: "/proposals",
+                  icon: "proposal" as IconKeys,
+                },
+              ]
+            : []),
+          ...(wasmConfig.enabled
+            ? [
+                { name: "Codes", slug: "/codes", icon: "code" as IconKeys },
+                {
+                  name: "Contracts",
+                  slug: "/contracts",
+                  icon: "contract-address" as IconKeys,
+                },
+              ]
+            : []),
+          ...(moveConfig.enabled
+            ? [
+                {
+                  name: "Modules",
+                  slug: "/modules",
+                  icon: "contract-address" as IconKeys,
+                },
+              ]
+            : []),
+          ...(nftConfig.enabled
+            ? [
+                {
+                  name: "NFTs",
+                  slug: "/nft-collections",
+                  icon: "group" as IconKeys,
+                },
+              ]
+            : []),
+          ...(poolConfig.enabled
+            ? [
+                {
+                  name: "Osmosis Pools",
+                  slug: "/pools",
+                  icon: "pool" as IconKeys,
+                },
+              ]
+            : []),
+        ]
+      : [
+          { name: "Overview", slug: "/", icon: "home" },
+          ...(govConfig.enabled
+            ? [
+                {
+                  name: "Validators",
+                  slug: "/validators",
+                  icon: "validator" as IconKeys,
+                },
+                {
+                  name: "Proposals",
+                  slug: "/proposals",
+                  icon: "proposal" as IconKeys,
+                },
+              ]
+            : []),
+          ...(wasmConfig.enabled
+            ? [{ name: "Codes", slug: "/codes", icon: "code" as IconKeys }]
+            : []),
+        ];
 
   return (
     <Flex px={6} h="full">
-      {subHeaderMenu.map((item) => (
+      {subMenu.map((item) => (
         <AppLink
           href={item.slug}
           key={item.slug}
-          onClick={() => trackOnClick(item.name)}
+          onClick={() => track(AmpEvent.USE_TOPBAR, { tab: item.name })}
         >
           <Flex
             alignItems="center"
             px={4}
             gap={2}
             h="full"
             borderBottomWidth={2}
-            borderColor={isCurrentPage(item.slug) ? activeColor : "transparent"}
+            borderColor={
+              isCurrentPage(item.slug) ? ACTIVE_COLOR : "transparent"
+            }
             transition="all 0.25s ease-in-out"
-            _hover={{ borderColor: activeColor }}
+            _hover={{ borderColor: ACTIVE_COLOR }}
             sx={{
               _hover: {
                 "> svg, > p": {
-                  color: activeColor,
+                  color: ACTIVE_COLOR,
                   transition: "all .25s ease-in-out",
                 },
                 borderBottomWidth: 2,
-                borderColor: activeColor,
+                borderColor: ACTIVE_COLOR,
               },
             }}
           >
             <CustomIcon
               boxSize={3}
               name={item.icon}
-              color={isCurrentPage(item.slug) ? activeColor : "gray.600"}
+              color={isCurrentPage(item.slug) ? ACTIVE_COLOR : "gray.600"}
             />
             <Text
               variant="body2"
               fontWeight={700}
-              color={isCurrentPage(item.slug) ? activeColor : "text.dark"}
+              color={isCurrentPage(item.slug) ? ACTIVE_COLOR : "text.dark"}
             >
               {item.name}
             </Text>