fix: mobile menu login button layout and style

daodaoedu · Feb 12, 2025 · 7095261 · 7095261
1 parent 54a3041
commit 7095261
Showing 1 changed file with 26 additions and 24 deletions.
diff --git a/shared/components/Header/MobileMenu.tsx b/shared/components/Header/MobileMenu.tsx
@@ -191,36 +191,38 @@ function MobileMenu() {
             ))}
           </div>
         )}
-        <div className="flex-1 flex flex-col justify-between">
+        <div className="flex-1 flex flex-col pb-20">
           {navType === NavType.Explore && (
             <ExploreMenu onClose={() => setIsOpenMenu(false)} />
           )}
           {navType === NavType.Profile && (
             <ProfileMenu onClose={() => setIsOpenMenu(false)} />
           )}
-          {auth.isLoggedIn ? (
-            <Button
-              className="px-4 pb-6 text-left"
-              onClick={() => {
-                authDispatch.logout();
-                setIsOpenMenu(false);
-              }}
-            >
-              登出
-            </Button>
-          ) : (
-            <Button
-              variant="outline"
-              color="primary"
-              className="m-4"
-              onClick={() => {
-                authDispatch.openLoginModal();
-                setIsOpenMenu(false);
-              }}
-            >
-              登入
-            </Button>
-          )}
+          <div className="fixed bottom-0 left-0 right-0 flex bg-basic-white">
+            {auth.isLoggedIn ? (
+              <Button
+                className="flex-1 px-4 pb-6 text-left"
+                onClick={() => {
+                  authDispatch.logout();
+                  setIsOpenMenu(false);
+                }}
+              >
+                登出
+              </Button>
+            ) : (
+              <Button
+                variant="outline"
+                color="primary"
+                className="flex-1 m-4"
+                onClick={() => {
+                  authDispatch.openLoginModal();
+                  setIsOpenMenu(false);
+                }}
+              >
+                登入
+              </Button>
+            )}
+          </div>
         </div>
       </div>
     </>