Merge pull request #3756 from IntersectMBO/staging

v2.0.25.1

Author: bosko-m

CHANGELOG.md

@@ -22,6 +22,7 @@ changes.
 - Fix adding two link input fields when editing the dRep form when no links are present initially [Issue 3709](https://github.com/IntersectMBO/govtool/issues/3709)
 
 ### Changed
+- Adjust top menu (navbar) layout when wallet is not connected [Issue-3682](https://github.com/IntersectMBO/govtool/issues/3682)
 
 ### Removed
 

govtool/frontend/src/components/atoms/Link.tsx

@@ -1,56 +1,59 @@
-import { FC } from "react";
+import { forwardRef, MouseEvent } from "react";
 import { NavLink } from "react-router-dom";
 import { Typography } from "@mui/material";
 import { useCardano } from "@context";
 
 type LinkProps = {
   dataTestId?: string;
   isConnectWallet?: boolean;
-  label: string;
+  label: React.ReactNode;
   navTo: string;
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   size?: "small" | "big";
 };
 
-export const Link: FC<LinkProps> = ({ ...props }) => {
-  const {
-    dataTestId,
-    isConnectWallet,
-    label,
-    navTo,
-    size = "small",
-    onClick,
-  } = props;
-  const { disconnectWallet } = useCardano();
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ ...props }, ref) => {
+    const {
+      dataTestId,
+      isConnectWallet,
+      label,
+      navTo,
+      size = "small",
+      onClick,
+    } = props;
+    const { disconnectWallet } = useCardano();
 
-  const fontSize = {
-    small: 14,
-    big: 22,
-  }[size];
+    const fontSize = {
+      small: 14,
+      big: 22,
+    }[size];
 
-  return (
-    <NavLink
-      data-testid={dataTestId}
-      to={navTo}
-      style={{
-        textDecoration: "none",
-      }}
-      onClick={() => {
-        if (!isConnectWallet) disconnectWallet();
-        if (onClick) onClick();
-      }}
-    >
-      {({ isActive }) => (
-        <Typography
-          sx={{
-            fontSize,
-            fontWeight: isActive && navTo !== "" ? 600 : 500,
-            color: isActive && navTo !== "" ? "#FF640A" : "textBlack",
-          }}
-        >
-          {label}
-        </Typography>
-      )}
-    </NavLink>
-  );
-};
+    return (
+      <NavLink
+        data-testid={dataTestId}
+        to={navTo}
+        style={{
+          textDecoration: "none",
+        }}
+        onClick={(e) => {
+          if (!isConnectWallet) disconnectWallet();
+          if (onClick) onClick(e);
+        }}
+        ref={ref}
+      >
+        {({ isActive }) => (
+          <Typography
+            sx={{
+              fontSize,
+              fontWeight: isActive && navTo !== "" ? 600 : 500,
+              color: isActive && navTo !== "" ? "#FF640A" : "textBlack",
+            }}
+          >
+            {label}
+          </Typography>
+        )}
+      </NavLink>
+    );
+  },
+);

govtool/frontend/src/components/organisms/DrawerMobile.tsx

@@ -1,8 +1,9 @@
+import { FC } from "react";
 import { NavLink } from "react-router-dom";
 import { Box, Grid, IconButton, SwipeableDrawer } from "@mui/material";
 
 import { Background, Button, Link, Typography } from "@atoms";
-import { ICONS, IMAGES, NAV_ITEMS, PATHS } from "@consts";
+import { ICONS, IMAGES, NAV_ITEMS, NavMenuItem, NavItem, PATHS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { useFeatureFlag, useModal } from "@context";
 import { openInNewTab } from "@utils";
@@ -13,15 +14,14 @@ import { LINKS } from "@/consts/links";
 const DRAWER_PADDING = 2;
 const CALCULATED_DRAWER_PADDING = DRAWER_PADDING * 8 * 2;
 
+const isNavMenuItem = (item: NavItem | NavMenuItem): item is NavMenuItem =>
+  "childNavItems" in item;
+
 export const DrawerMobile = ({
   isConnectButton,
   isDrawerOpen,
   setIsDrawerOpen,
 }: DrawerMobileProps) => {
-  const {
-    isProposalDiscussionForumEnabled,
-    isGovernanceOutcomesPillarEnabled,
-  } = useFeatureFlag();
   const { screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const { t } = useTranslation();
@@ -85,18 +85,13 @@ export const DrawerMobile = ({
           <Box sx={{ display: "flex", flex: 1, flexDirection: "column" }}>
             <Grid container direction="column" mt={6} rowGap={4}>
               {NAV_ITEMS.map((navItem) => {
-                if (
-                  !isProposalDiscussionForumEnabled &&
-                  navItem.dataTestId === "proposed-governance-actions-link"
-                ) {
-                  return null;
-                }
-
-                if (
-                  !isGovernanceOutcomesPillarEnabled &&
-                  navItem.dataTestId === "governance-actions-outcomes-link"
-                ) {
-                  return null;
+                if (isNavMenuItem(navItem)) {
+                  return (
+                    <MenuNavItem
+                      closeDrawer={() => setIsDrawerOpen(false)}
+                      navItem={navItem}
+                    />
+                  );
                 }
                 return (
                   <Grid item key={navItem.label}>
@@ -129,3 +124,60 @@ export const DrawerMobile = ({
     </SwipeableDrawer>
   );
 };
+
+const MenuNavItem: FC<{
+  navItem: NavMenuItem;
+  closeDrawer: () => void;
+}> = ({ closeDrawer, navItem }) => {
+  const {
+    isProposalDiscussionForumEnabled,
+    isGovernanceOutcomesPillarEnabled,
+  } = useFeatureFlag();
+
+  const filterChildNavItems = () => {
+    if (navItem.dataTestId === "governance-actions") {
+      return (navItem.childNavItems || []).filter((item) => {
+        if (
+          !isProposalDiscussionForumEnabled &&
+          item.dataTestId === "proposed-governance-actions-link"
+        )
+          return false;
+        if (
+          !isGovernanceOutcomesPillarEnabled &&
+          item.dataTestId === "governance-actions-outcomes-link"
+        )
+          return false;
+        return true;
+      });
+    }
+    return navItem.childNavItems;
+  };
+  return (
+    <>
+      <Grid item key={navItem.label}>
+        <Link
+          navTo=""
+          data-testid={navItem.dataTestId}
+          label={navItem.label}
+          size="big"
+        />
+      </Grid>
+      {filterChildNavItems()?.map((childNavItem) => (
+        <Grid item key={childNavItem.label} ml={3}>
+          <Link
+            {...childNavItem}
+            data-testid={childNavItem.dataTestId}
+            onClick={() => {
+              if (childNavItem.newTabLink) {
+                openInNewTab(childNavItem.newTabLink);
+              }
+              closeDrawer();
+            }}
+            label={childNavItem.label}
+            size="big"
+          />
+        </Grid>
+      ))}
+    </>
+  );
+};