fix: header

Author: foodaka

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/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' },
@@ -120,27 +170,6 @@ export const NavItems = ({ setOpen }: NavItemsProps) => {
         )}
       </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/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,6 +1095,7 @@ msgstr "Unstake window"
 msgid "Reload"
 msgstr "Reload"
 
+#: src/layouts/components/NavItems.tsx
 #: src/layouts/components/NavItems.tsx
 #: src/modules/reserve-overview/Gho/SavingsGho.tsx
 #: src/modules/reserve-overview/Gho/SavingsGho.tsx
@@ -3502,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"