fix(ui): mobile menu alignment

lies-exposed · Jan 11, 2024 · 7d8e384 · 7d8e384
1 parent f081269
commit 7d8e384
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 28 deletions.
diff --git a/packages/@liexp/ui/src/components/Header/Header.tsx b/packages/@liexp/ui/src/components/Header/Header.tsx
@@ -4,15 +4,9 @@ import DonateButton from "../Common/Button/DonateButton";
 import SuggestLinkButton from "../Common/Button/SuggestLinkButton";
 import { TelegramIcon } from "../Common/Icons";
 import GithubButton from "../GithubButton";
-import {
-  AppBar,
-  Box,
-  Link,
-  Toolbar,
-  Typography
-} from "../mui";
-import { HeaderMenu } from './HeaderMenu/HeaderMenu';
-import { type HeaderMenuItem } from './HeaderMenu/types';
+import { AppBar, Box, Link, Toolbar, Typography } from "../mui";
+import { HeaderMenu } from "./HeaderMenu/HeaderMenu";
+import { type HeaderMenuItem } from "./HeaderMenu/types";
 
 const PREFIX = "Header";
 
@@ -22,6 +16,7 @@ export const classes = {
   menuButton: `${PREFIX}-menuButton`,
   menuItem: `${PREFIX}-menuItem`,
   menuLeft: `${PREFIX}-menuLeft`,
+  menuRight: `${PREFIX}-menuRight`,
   menuItemLink: `${PREFIX}-menuItemLink`,
   title: `${PREFIX}-title`,
   titleLink: `${PREFIX}-titleLink`,
@@ -46,16 +41,16 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
     margin: 0,
     marginRight: theme.spacing(2),
     color: theme.palette.common.white,
-    fontWeight: theme.typography.fontWeightBold ,
+    fontWeight: theme.typography.fontWeightBold,
     cursor: "pointer",
     [`${theme.breakpoints.down("sm")}`]: {
-      fontSize: 12
-    }
+      fontSize: 12,
+    },
   },
 
   [`& .${classes.titleLink}`]: {
     color: theme.palette.common.black,
-    fontWeight: theme.typography.fontWeightBold ,
+    fontWeight: theme.typography.fontWeightBold,
     fontFamily: theme.typography.h6.fontFamily,
     letterSpacing: 1.1,
     textDecoration: "none",
@@ -67,13 +62,19 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
     flexGrow: 1,
     [`${theme.breakpoints.down("sm")}`]: {
       display: "none",
-      flexGrow: 1
+      flexGrow: 1,
     },
   },
+  [`& .${classes.menuRight}`]: {
+    display: "flex",
+    alignContent: "flex-start",
+    justifyContent: "flex-end",
+    flexGrow: 1,
+  },
   [`& .${classes.menuItem}`]: {
     color: theme.palette.common.white,
-    ...(theme.typography.subtitle1 ),
-    fontWeight: theme.typography.fontWeightBold ,
+    ...theme.typography.subtitle1,
+    fontWeight: theme.typography.fontWeightBold,
     fontSize: 16,
     textTransform: "none",
     cursor: "pointer",
@@ -85,7 +86,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   },
   [`& .${classes.menuItemLink}`]: {
     color: theme.palette.text.primary,
-    ...(theme.typography.subtitle1 ),
+    ...theme.typography.subtitle1,
     // fontWeight: theme.typography.fontWeightBold as any,
     fontSize: 14,
     margin: 0,
@@ -95,8 +96,6 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   },
 }));
 
-
-
 export interface HeaderProps {
   logoSrc?: string;
   onTitleClick: () => void;
@@ -154,13 +153,15 @@ const Header: React.FC<HeaderProps> = ({
           </Box>
         </Box>
 
-        <SuggestLinkButton className={classes.menuItem} color={"white"} />
+        <Box className={classes.menuRight}>
+          <SuggestLinkButton className={classes.menuItem} color={"white"} />
 
-        <HeaderMenu
-          menu={menu}
-          onMenuItemClick={onMenuItemClick}
-          currentPath={pathname}
-        />
+          <HeaderMenu
+            menu={menu}
+            onMenuItemClick={onMenuItemClick}
+            currentPath={pathname}
+          />
+        </Box>
       </Toolbar>
     </StyledAppBar>
   );

diff --git a/packages/@liexp/ui/src/components/Header/HeaderMenu/HeaderMenuMobile.tsx b/packages/@liexp/ui/src/components/Header/HeaderMenu/HeaderMenuMobile.tsx
@@ -116,9 +116,6 @@ const HeaderMenuMobileDiv = styled("div")(({ theme }) => ({
     flexGrow: 1,
     justifyContent: "flex-end",
     alignItems: "center",
-    [`${theme.breakpoints.down("md")}`]: {
-      flexGrow: 0,
-    },
   },
   [`& .${menuClasses.mobileMenu}`]: {
     display: "flex",