fix: Fixes right menu layout in different screen sizes (#14689)

apache · May 21, 2021 · 1e8b6eb · 1e8b6eb
1 parent 590fe20
commit 1e8b6eb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/superset-frontend/src/common/components/index.tsx b/superset-frontend/src/common/components/index.tsx
@@ -131,11 +131,9 @@ export const StyledNav = styled(AntdMenu)`
     }
   }
 
-  @media (min-width: 767px) {
-    &:not(.ant-menu-dark) > .ant-menu-submenu,
-    &:not(.ant-menu-dark) > .ant-menu-item {
-      margin: 0px;
-    }
+  &:not(.ant-menu-dark) > .ant-menu-submenu,
+  &:not(.ant-menu-dark) > .ant-menu-item {
+    margin: 0px;
   }
 
   & > .ant-menu-item > a {

diff --git a/superset-frontend/src/components/Menu/Menu.tsx b/superset-frontend/src/components/Menu/Menu.tsx
@@ -23,7 +23,7 @@ import { Global } from '@emotion/react';
 import { getUrlParam } from 'src/utils/urlUtils';
 import { MainNav as DropdownMenu, MenuMode } from 'src/common/components';
 import { Link } from 'react-router-dom';
-import { Row, Col } from 'antd';
+import { Row, Col, Grid } from 'antd';
 import Icon from 'src/components/Icon';
 import RightMenu from './MenuRight';
 import { Languages } from './LanguagePicker';
@@ -137,11 +137,14 @@ const StyledHeader = styled.header`
 
 const { SubMenu } = DropdownMenu;
 
+const { useBreakpoint } = Grid;
+
 export function Menu({
   data: { menu, brand, navbar_right: navbarRight, settings },
   isFrontendRoute = () => false,
 }: MenuProps) {
   const [showMenu, setMenu] = useState<MenuMode>('horizontal');
+  const screens = useBreakpoint();
 
   useEffect(() => {
     function handleResize() {
@@ -216,7 +219,7 @@ export function Menu({
         `}
       />
       <Row>
-        <Col lg={12} md={24} sm={24} xs={24}>
+        <Col md={16} xs={24}>
           <a className="navbar-brand" href={brand.path}>
             <img width={brand.width} src={brand.icon} alt={brand.alt} />
           </a>
@@ -245,8 +248,9 @@ export function Menu({
             })}
           </DropdownMenu>
         </Col>
-        <Col lg={12} md={24} sm={24} xs={24}>
+        <Col md={8} xs={24}>
           <RightMenu
+            align={screens.md ? 'flex-end' : 'flex-start'}
             settings={settings}
             navbarRight={navbarRight}
             isFrontendRoute={isFrontendRoute}

diff --git a/superset-frontend/src/components/Menu/MenuRight.tsx b/superset-frontend/src/components/Menu/MenuRight.tsx
@@ -53,29 +53,35 @@ const StyledI = styled.div`
   color: ${({ theme }) => theme.colors.primary.dark1};
 `;
 
-const StyledDiv = styled.div`
+const StyledDiv = styled.div<{ align: string }>`
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: ${({ align }) => align};
   align-items: center;
-  min-width: 360px;
-  margin-right: ${({ theme }) => theme.gridUnit * 4}px;
+  margin-right: ${({ theme }) => theme.gridUnit}px;
+`;
+
+const StyledAnchor = styled.a`
+  padding-right: ${({ theme }) => theme.gridUnit}px;
+  padding-left: ${({ theme }) => theme.gridUnit}px;
 `;
 
 const { SubMenu } = Menu;
 
 interface RightMenuProps {
+  align: 'flex-start' | 'flex-end';
   settings: MenuObjectProps[];
   navbarRight: NavBarProps;
   isFrontendRoute: (path?: string) => boolean;
 }
 
 const RightMenu = ({
+  align,
   settings,
   navbarRight,
   isFrontendRoute,
 }: RightMenuProps) => (
-  <StyledDiv>
+  <StyledDiv align={align}>
     <Menu mode="horizontal">
       {!navbarRight.user_is_anonymous && (
         <SubMenu
@@ -161,31 +167,31 @@ const RightMenu = ({
       )}
     </Menu>
     {navbarRight.documentation_url && (
-      <a
+      <StyledAnchor
         href={navbarRight.documentation_url}
         target="_blank"
         rel="noreferrer"
         title={t('Documentation')}
       >
         <i className="fa fa-question" />
         &nbsp;
-      </a>
+      </StyledAnchor>
     )}
     {navbarRight.bug_report_url && (
-      <a
+      <StyledAnchor
         href={navbarRight.bug_report_url}
         target="_blank"
         rel="noreferrer"
         title={t('Report a bug')}
       >
         <i className="fa fa-bug" />
-      </a>
+      </StyledAnchor>
     )}
     {navbarRight.user_is_anonymous && (
-      <a href={navbarRight.user_login_url}>
+      <StyledAnchor href={navbarRight.user_login_url}>
         <i className="fa fa-fw fa-sign-in" />
         {t('Login')}
-      </a>
+      </StyledAnchor>
     )}
   </StyledDiv>
 );