xref: /expo/docs/ui/components/Header/Logo.tsx (revision 5697f03e) 
1import { css } from '@emotion/react';
2import {
3  breakpoints,
4  theme,
5  spacing,
6  typography,
7  Logo as LogoIcon,
8  WordMarkLogo,
9  borderRadius,
10  iconSize,
11  ChevronRightIcon,
12} from '@expo/styleguide';
13
14import { DocumentationIcon } from '~/ui/components/Sidebar/icons/Documentation';
15import { LinkBase } from '~/ui/components/Text';
16
17type Props = {
18  subgroup?: string;
19};
20
21export const Logo = ({ subgroup }: Props) => (
22  <div css={logoWrapperStyle}>
23    <LinkBase css={linkStyle} href="https://expo.dev">
24      <WordMarkLogo color={theme.text.default} css={[logoStyle, hideOnMobile]} title="Expo" />
25      <LogoIcon color={theme.text.default} css={[logoStyle, showOnMobile]} title="Expo" />
26    </LinkBase>
27    <LinkBase css={linkStyle} href="/">
28      <div css={iconContainer}>
29        <DocumentationIcon size={iconSize.sm} />
30      </div>
31      <span css={subtitleStyle}>Docs</span>
32    </LinkBase>
33    {subgroup && (
34      <>
35        <ChevronRightIcon css={[chevronStyle, hideOnMobile]} color={theme.icon.tertiary} title="" />
36        <span css={[subtitleStyle, hideOnMobile]}>{subgroup}</span>
37      </>
38    )}
39  </div>
40);
41
42const logoWrapperStyle = css({
43  display: 'flex',
44  gap: spacing[4],
45  alignItems: 'center',
46});
47
48const linkStyle = css`
49  display: flex;
50  flex-direction: row;
51  align-items: center;
52  text-decoration: none;
53  user-select: none;
54  gap: ${spacing[2]}px;
55`;
56
57const logoStyle = css`
58  height: 20px;
59  margin-top: 1px;
60`;
61
62const chevronStyle = css`
63  margin: 0 ${-spacing[2]}px;
64
65  @media screen and (max-width: ${breakpoints.medium}px) {
66    margin-left: ${spacing[0.5]}px;
67  }
68`;
69
70const hideOnMobile = css`
71  @media screen and (max-width: ${breakpoints.medium}px) {
72    display: none;
73  }
74`;
75
76const showOnMobile = css`
77  display: none;
78
79  @media screen and (max-width: ${breakpoints.medium}px) {
80    display: block;
81    margin-top: 0;
82    margin-right: ${spacing[1.5]}px;
83  }
84`;
85
86const subtitleStyle = css`
87  color: ${theme.text.default};
88  font-weight: 500;
89  ${typography.fontSizes[18]}
90`;
91
92const iconContainer = css({
93  display: 'flex',
94  alignItems: 'center',
95  justifyContent: 'center',
96  backgroundColor: theme.palette.blue4,
97  borderRadius: borderRadius.sm,
98  height: 24,
99  width: 24,
100});
101