Merge pull request #534 from IntersectMBO/feat/add-border-to-header-d…

…ropdown-menu feat: Added border to header dropdown menu
IntersectMBO · Jan 29, 2025 · 4f56a91 · 4f56a91
2 parents 666e04e + ac552b2
commit 4f56a91
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/frontend/src/components/molecules/UserProfileButton.tsx b/frontend/src/components/molecules/UserProfileButton.tsx
@@ -8,19 +8,23 @@ import Menu from "@mui/material/Menu";
 import { useTranslations } from "next-intl";
 import * as React from "react";
 import { Button } from "../atoms";
+import theme from "@/theme";
 
 export default function UserProfileButton({
-  user
+  user,
 }: {
   user: Pick<FetchUserData, "name" | "profile_photo_url">;
 }) {
   const { openModal } = useModal();
   const t = useTranslations();
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [menuWidth, setMenuWidth] = React.useState<number | null>(null);
+
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
+    setMenuWidth(event.currentTarget.offsetWidth);
   };
   const handleClose = () => {
     setAnchorEl(null);
@@ -31,8 +35,8 @@ export default function UserProfileButton({
       type: "signUpModal",
       state: {
         showCloseButton: true,
-        title: t("Modals.editProfile.headline")
-      }
+        title: t("Modals.editProfile.headline"),
+      },
     });
     handleClose();
   };
@@ -41,8 +45,8 @@ export default function UserProfileButton({
     openModal({
       type: "signOutModal",
       state: {
-        homeRedirectionPath: PATHS.home
-      }
+        homeRedirectionPath: PATHS.home,
+      },
     });
   };
 
@@ -87,10 +91,14 @@ export default function UserProfileButton({
           open={open}
           onClose={handleClose}
           MenuListProps={{
-            "aria-labelledby": "basic-button"
+            "aria-labelledby": "basic-button",
           }}
           PaperProps={{
-            style: { boxShadow: "none" }
+            style: {
+              boxShadow: "none",
+              border: `1px solid ${theme.palette.primary.main}`,
+              minWidth: menuWidth || "auto",
+            },
           }}
         >
           <Grid