d6afbe8e8e
* Introduce accent for chips * Add top bar on Mobile on Settings pages * Various fixes * Fix according to peer review
31 lines
849 B
TypeScript
31 lines
849 B
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { useIsMobile } from '../../hooks/useIsMobile';
|
|
import { TopBar } from '../top-bar/components/TopBar';
|
|
|
|
import { RightDrawerContainer } from './RightDrawerContainer';
|
|
|
|
type OwnProps = {
|
|
children: JSX.Element | JSX.Element[];
|
|
title: string;
|
|
icon: React.ReactNode;
|
|
};
|
|
|
|
const StyledContainer = styled.div<{ isMobile: boolean }>`
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: ${({ theme, isMobile }) => (!isMobile ? theme.spacing(4) : 0)};
|
|
width: 100%;
|
|
`;
|
|
|
|
export function SubMenuTopBarContainer({ children, title, icon }: OwnProps) {
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<StyledContainer isMobile={isMobile}>
|
|
{isMobile && <TopBar title={title} icon={icon} />}
|
|
<RightDrawerContainer topMargin={16}>{children}</RightDrawerContainer>
|
|
</StyledContainer>
|
|
);
|
|
}
|