mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix: Fixes right menu layout in different screen sizes (#14689)
This commit is contained in:
parent
590fe20a45
commit
1e8b6eb848
@ -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 {
|
||||
|
@ -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}
|
||||
|
@ -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,7 +167,7 @@ const RightMenu = ({
|
||||
)}
|
||||
</Menu>
|
||||
{navbarRight.documentation_url && (
|
||||
<a
|
||||
<StyledAnchor
|
||||
href={navbarRight.documentation_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
@ -169,23 +175,23 @@ const RightMenu = ({
|
||||
>
|
||||
<i className="fa fa-question" />
|
||||
|
||||
</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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user