fix: mobile layouts (#2570)

Author: foodaka

pages/safety-module.page.tsx

@@ -159,11 +159,6 @@ export default function Staking() {
                     <Trans>Stake AAVE</Trans>
                   </Typography>
                 </StyledToggleButton>
-                <StyledToggleButton value="gho" disabled={mode === 'gho'}>
-                  <Typography variant="subheader1">
-                    <Trans>sGHO</Trans>
-                  </Typography>
-                </StyledToggleButton>
                 <StyledToggleButton value="bpt" disabled={mode === 'bpt'}>
                   <Typography variant="subheader1">
                     <Trans>Stake ABPT</Trans>

src/layouts/AppHeader.tsx

@@ -94,7 +94,7 @@ export function AppHeader() {
   const sm = useMediaQuery(breakpoints.down('sm'));
   const smd = useMediaQuery('(max-width:1120px)');
 
-  const [visitedSwitch, setVisitedSwitch] = useState(() => {
+  const [, setVisitedSwitch] = useState(() => {
     if (typeof window === 'undefined') return true;
     return Boolean(localStorage.getItem(SWITCH_VISITED_KEY));
   });
@@ -276,8 +276,8 @@ export function AppHeader() {
 
         <NoSsr>
           <StyledBadge
-            invisible={visitedSwitch}
-            variant="dot"
+            invisible={true}
+            // variant="dot"
             badgeContent=""
             color="secondary"
             sx={{ mr: 2 }}

src/layouts/MobileMenu.tsx

@@ -94,16 +94,7 @@ export const MobileMenu = ({ open, setOpen, headerHeight }: MobileMenuProps) =>
                     <Trans>Watch wallet</Trans>
                   </ListItemText>
                 </ListItem>
-                <ListItem
-                  sx={{ color: '#F1F1F3' }}
-                  component={Link}
-                  href={'/staking'}
-                  onClick={() => setOpen(false)}
-                >
-                  <ListItemText>
-                    <Trans>Safety Module</Trans>
-                  </ListItemText>
-                </ListItem>
+
                 <ListItem
                   sx={{ color: '#F1F1F3' }}
                   component={Link}

src/layouts/components/NavItems.tsx

@@ -95,6 +95,56 @@ export const NavItems = ({ setOpen }: NavItemsProps) => {
           </ListItem>
         ))}
 
+      <ListItem
+        sx={{
+          width: { xs: '100%', md: 'unset' },
+          mr: { xs: 0, md: 2 },
+        }}
+        disablePadding
+      >
+        {md ? (
+          <Typography
+            component={Link}
+            href={ROUTES.sGHO}
+            variant="h2"
+            color="#F1F1F3"
+            sx={{ width: '100%', p: 4 }}
+            onClick={() => handleClick('sGHO', true)}
+          >
+            <Trans>sGHO</Trans>
+          </Typography>
+        ) : (
+          <Button
+            component={Link}
+            onClick={() => handleClick('sGHO', false)}
+            href={ROUTES.sGHO}
+            sx={(theme) => ({
+              color: '#F1F1F3',
+              p: '6px 8px',
+              position: 'relative',
+              '.active&:after, &:hover&:after': {
+                transform: 'scaleX(1)',
+                transformOrigin: 'bottom left',
+              },
+              '&:after': {
+                content: "''",
+                position: 'absolute',
+                width: '100%',
+                transform: 'scaleX(0)',
+                height: '2px',
+                bottom: '-6px',
+                left: '0',
+                background: theme.palette.gradients.aaveGradient,
+                transformOrigin: 'bottom right',
+                transition: 'transform 0.25s ease-out',
+              },
+            })}
+          >
+            <Trans>sGHO</Trans>
+          </Button>
+        )}
+      </ListItem>
+
       <ListItem
         sx={{
           width: { xs: '100%', md: 'unset' },
@@ -112,7 +162,7 @@ export const NavItems = ({ setOpen }: NavItemsProps) => {
               sx={{ width: '100%', p: 4 }}
               onClick={() => handleClick('Staking', true)}
             >
-              <Trans>Umbrella</Trans>
+              <Trans>Staking</Trans>
             </Typography>
           </>
         ) : (

src/layouts/components/StakingMenu.tsx

@@ -143,16 +143,6 @@ export function StakingMenu({ isMobile = false, onClose }: StakingMenuProps) {
             <Trans>Safety Module</Trans>
           </Typography>
         </MenuItem>
-        <MenuItem
-          component={Link}
-          href={ROUTES.sGHO}
-          onClick={() => handleMenuItemClick('sGHO')}
-          sx={{ minWidth: '140px' }}
-        >
-          <Typography variant="subheader1">
-            <Trans>Savings GHO</Trans>
-          </Typography>
-        </MenuItem>
       </Menu>
     </>
   );

src/locales/en/messages.po

@@ -1095,7 +1095,8 @@ msgstr "Unstake window"
 msgid "Reload"
 msgstr "Reload"
 
-#: pages/safety-module.page.tsx
+#: src/layouts/components/NavItems.tsx
+#: src/layouts/components/NavItems.tsx
 #: src/modules/reserve-overview/Gho/SavingsGho.tsx
 #: src/modules/reserve-overview/Gho/SavingsGho.tsx
 #: src/modules/sGho/SGhoDepositPanel.tsx
@@ -1312,6 +1313,7 @@ msgid "Merkl rewards are claimed through the"
 msgstr "Merkl rewards are claimed through the"
 
 #: src/components/transactions/Stake/StakeActions.tsx
+#: src/layouts/components/NavItems.tsx
 #: src/layouts/components/StakingMenu.tsx
 #: src/modules/umbrella/UmbrellaActions.tsx
 #: src/modules/umbrella/UmbrellaHeader.tsx
@@ -2001,7 +2003,6 @@ msgstr "Amount to Bridge"
 msgid "Please always be aware of your <0>Health Factor (HF)</0> when partially migrating a position and that your rates will be updated to V3 rates."
 msgstr "Please always be aware of your <0>Health Factor (HF)</0> when partially migrating a position and that your rates will be updated to V3 rates."
 
-#: src/layouts/components/NavItems.tsx
 #: src/layouts/components/StakingMenu.tsx
 #: src/layouts/components/StakingMenu.tsx
 msgid "Umbrella"
@@ -2641,7 +2642,6 @@ msgstr "Borrowable"
 #: src/layouts/components/NavItems.tsx
 #: src/layouts/components/StakingMenu.tsx
 #: src/layouts/components/StakingMenu.tsx
-#: src/layouts/MobileMenu.tsx
 #: src/modules/staking/StakingHeader.tsx
 msgid "Safety Module"
 msgstr "Safety Module"
@@ -3503,7 +3503,6 @@ msgstr "Stablecoin"
 msgid "Stable debt supply is not zero"
 msgstr "Stable debt supply is not zero"
 
-#: src/layouts/components/StakingMenu.tsx
 #: src/modules/sGho/SGhoHeader.tsx
 msgid "Savings GHO"
 msgstr "Savings GHO"