/
Heading.tsx
51 lines (44 loc) · 1.11 KB
/
Heading.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React, { FunctionComponent, ComponentProps } from 'react';
import { styled } from '@storybook/theming';
import { Brand } from './Brand';
import { SidebarMenu, MenuList } from './Menu';
export interface HeadingProps {
menuHighlighted?: boolean;
menu: MenuList;
}
const BrandArea = styled.div(({ theme }) => ({
fontSize: theme.typography.size.s2,
fontWeight: theme.typography.weight.bold,
color: theme.color.defaultText,
marginRight: 20,
display: 'flex',
width: '100%',
alignItems: 'center',
minHeight: 22,
'& > *': {
maxWidth: '100%',
height: 'auto',
display: 'block',
flex: '1 1 auto',
},
}));
const HeadingWrapper = styled.div({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
position: 'relative',
});
export const Heading: FunctionComponent<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
menuHighlighted = false,
menu,
...props
}) => {
return (
<HeadingWrapper {...props}>
<BrandArea>
<Brand />
</BrandArea>
<SidebarMenu menu={menu} isHighlighted={menuHighlighted} />
</HeadingWrapper>
);
};