fix: mobile layouts

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/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

@@ -112,14 +112,35 @@ export const NavItems = ({ setOpen }: NavItemsProps) => {
               sx={{ width: '100%', p: 4 }}
               onClick={() => handleClick('Staking', true)}
             >
-              <Trans>Umbrella</Trans>
+              <Trans>Staking</Trans>
             </Typography>
           </>
         ) : (
           <StakingMenu />
         )}
       </ListItem>
 
+      {md && (
+        <ListItem
+          sx={{
+            width: { xs: '100%', md: 'unset' },
+            mr: { xs: 0, md: 2 },
+          }}
+          disablePadding
+        >
+          <Typography
+            component={Link}
+            href={ROUTES.sGHO}
+            variant="h2"
+            color="#F1F1F3"
+            sx={{ width: '100%', p: 4 }}
+            onClick={() => handleClick('sGHO', true)}
+          >
+            <Trans>sGHO</Trans>
+          </Typography>
+        </ListItem>
+      )}
+
       {md && (
         <ListItem
           sx={{

src/locales/en/messages.po

@@ -1095,7 +1095,7 @@ msgstr "Unstake window"
 msgid "Reload"
 msgstr "Reload"
 
-#: pages/safety-module.page.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 +1312,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 +2002,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 +2641,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"