fix: banner onclick on mobile now links to the desired route

Author: AGMASO

src/layouts/TopBarNotify.tsx

@@ -64,6 +64,8 @@ export default function TopBarNotify({ campaigns }: TopBarNotifyProps) {
     return warningBarOpen !== 'false';
   });
 
+  const isBannerClickable = sm && Boolean(currentCampaign?.buttonAction);
+
   useEffect(() => {
     if (!currentCampaign) return;
 
@@ -113,6 +115,11 @@ export default function TopBarNotify({ campaigns }: TopBarNotifyProps) {
     }
   };
 
+  const handleBannerClick = () => {
+    if (!isBannerClickable) return;
+    handleButtonAction();
+  };
+
   // Note: hide warnings when mobile menu is open
   if (mobileDrawerOpen) return null;
 
@@ -137,7 +144,9 @@ export default function TopBarNotify({ campaigns }: TopBarNotifyProps) {
             justifyContent: 'center',
             alignItems: 'center',
             width: '100%',
+            cursor: isBannerClickable ? 'pointer' : 'default',
           }}
+          onClick={handleBannerClick}
           variant="dense"
         >
           <Box sx={{ padding: md ? '20px 10px' : '', paddingRight: 0 }}>
@@ -155,7 +164,7 @@ export default function TopBarNotify({ campaigns }: TopBarNotifyProps) {
                 ''
               )}
 
-              {currentCampaign.learnMoreLink && md ? (
+              {md && currentCampaign.learnMoreLink && !isBannerClickable ? (
                 typeof currentCampaign.learnMoreLink === 'string' ? (
                   <Link
                     sx={{ color: 'white', textDecoration: 'underline', paddingLeft: 2 }}
@@ -189,7 +198,7 @@ export default function TopBarNotify({ campaigns }: TopBarNotifyProps) {
           </Box>
 
           <Box>
-            {!md && currentCampaign.buttonText && currentCampaign.buttonAction ? (
+            {!sm && currentCampaign.buttonText && currentCampaign.buttonAction ? (
               <Button
                 size="small"
                 onClick={handleButtonAction}
@@ -207,7 +216,10 @@ export default function TopBarNotify({ campaigns }: TopBarNotifyProps) {
           </Box>
           <Button
             sx={{ color: 'white', paddingRight: 0 }}
-            onClick={handleClose}
+            onClick={(event) => {
+              event.stopPropagation();
+              handleClose();
+            }}
             startIcon={<CloseIcon />}
           />
         </Toolbar>