fix(Navbar): show items in avatar

daodaoedu · Jul 25, 2024 · 3795494 · 3795494
1 parent 59ff4b3
commit 3795494
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
-import { useRouter } from 'next/router';
 import MenuItem from './MenuItem';
 import UserAvatar from '../SubList/UserAvatar';
 import { useSelector } from 'react-redux';
 import { Button } from '@mui/material';
+import { BASE_URL } from '@/constants/common';
 
 const MenuWrapper = styled.div`
   position: fixed;
@@ -65,7 +65,7 @@ const Menu = ({ open, list, onCloseMenu, shiftTop = '80px' }) => {
           {user._id ? (
             <UserAvatar user={user} onCloseMenu={onCloseMenu} />
           ) : (
-            <LoginButton href="/login">登入</LoginButton>
+            <LoginButton href={`${BASE_URL}/auth/google`}>登入</LoginButton>
           )}
         </MenuListWrapper>
       )}

diff --git a/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx b/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx
@@ -26,11 +26,12 @@ const StyledMenuItem = styled(MenuItem)`
   border-radius: 4px;
   ${(props) => css`
     animation-delay: ${props.delay};
-    padding: ${props.isPadScreen} ? 12px : 12px 52px;
-    font-size: ${props.isPadScreen} ? 18px : 16px;
-    magrin: ${props.isPadScreen} ? 8px 0; : '0';
+    min-width: 126px;
+    padding: ${props.isPadScreen ? '12px 52px' : '12px'};
+    font-size: ${props.isPadScreen ? '18px' : '16px'};
+    margin-top: ${props.isPadScreen ? '8px' : '0'};
     &:hover {
-      background-color: #DEF5F5;
+      background-color: #def5f5;
     }
   `}
 `;
@@ -87,13 +88,14 @@ const UserAvatar = ({ onCloseMenu = () => {}, user }) => {
           zIndex: 1,
         }}
       >
-        <Box as="ul" sx={{ padding: !isPadScreen && '12px' }}>
+        <Box sx={{ padding: !isPadScreen && '12px' }}>
           {[
             { name: '個人資料', id: 'person-setting' },
             { name: '我的揪團', id: 'my-group' },
             { name: '帳號設定', id: 'account-setting' },
           ].map((v, i) => (
             <StyledMenuItem
+              as="div"
               key={v.id}
               delay={`${i * 0.1}s`}
               isPadScreen={isPadScreen}
@@ -107,7 +109,9 @@ const UserAvatar = ({ onCloseMenu = () => {}, user }) => {
             </StyledMenuItem>
           ))}
 
-          <StyledMenuItem onClick={logout}>登出</StyledMenuItem>
+          <StyledMenuItem as="div" isPadScreen={isPadScreen} onClick={logout}>
+            登出
+          </StyledMenuItem>
         </Box>
       </Box>
     </Box>