1import { css } from '@emotion/react';
2import { theme, DocsLogo } from '@expo/styleguide';
3import { spacing } from '@expo/styleguide-base';
4import {
5  ArrowLeftIcon,
6  GraduationHat02DuotoneIcon,
7  Stars02DuotoneIcon,
8  Home02DuotoneIcon,
9  BookOpen02DuotoneIcon,
10} from '@expo/styleguide-icons';
11
12import { shouldShowFeaturePreviewLink } from '~/constants/FeatureFlags.cjs';
13import { Search } from '~/ui/components/Search';
14import { SidebarSingleEntry } from '~/ui/components/Sidebar/SidebarSingleEntry';
15import { A } from '~/ui/components/Text';
16
17type SidebarHeadProps = {
18  sidebarActiveGroup: string;
19};
20
21export const SidebarHead = ({ sidebarActiveGroup }: SidebarHeadProps) => {
22  if (sidebarActiveGroup === 'archive') {
23    return (
24      <div css={sidebarHeadContainerStyle}>
25        <A isStyled href="/" css={sidebarBackLinkStyle}>
26          <ArrowLeftIcon className="text-icon-secondary" />
27          Back
28        </A>
29      </div>
30    );
31  }
32
33  return (
34    <div css={sidebarHeadContainerStyle}>
35      <Search />
36      <SidebarSingleEntry
37        href="/"
38        title="Home"
39        Icon={Home02DuotoneIcon}
40        isActive={sidebarActiveGroup === 'home'}
41      />
42      <SidebarSingleEntry
43        href="/guides/overview"
44        title="Guides"
45        Icon={BookOpen02DuotoneIcon}
46        isActive={sidebarActiveGroup === 'general'}
47      />
48      <SidebarSingleEntry
49        href="/versions/latest"
50        title="Reference"
51        Icon={DocsLogo}
52        isActive={sidebarActiveGroup === 'reference'}
53      />
54      <SidebarSingleEntry
55        href="/tutorial/introduction/"
56        title="Learn"
57        Icon={GraduationHat02DuotoneIcon}
58        isActive={sidebarActiveGroup === 'learn'}
59      />
60      {shouldShowFeaturePreviewLink() && (
61        <SidebarSingleEntry
62          href="/feature-preview"
63          title="Feature Preview"
64          Icon={Stars02DuotoneIcon}
65          isActive={sidebarActiveGroup === 'featurePreview' || sidebarActiveGroup === 'preview'}
66        />
67      )}
68    </div>
69  );
70};
71
72const sidebarHeadContainerStyle = css({
73  display: 'flex',
74  flexDirection: 'column',
75  padding: spacing[4],
76  borderBottom: `1px solid ${theme.border.default}`,
77  background: theme.background.default,
78  gap: spacing[0.5],
79});
80
81const sidebarBackLinkStyle = css({
82  color: theme.text.secondary,
83  display: 'flex',
84  gap: spacing[3],
85  alignItems: 'center',
86});
87