1import { css } from '@emotion/react';
2import { theme, typography, spacing } from '@expo/styleguide';
3import NextLink from 'next/link';
4import { useRouter } from 'next/router';
5import * as React from 'react';
6import { useEffect, useRef } from 'react';
7
8import stripVersionFromPath from '~/common/stripVersionFromPath';
9import { NavigationRoute } from '~/types/common';
10
11type SidebarLinkProps = React.PropsWithChildren<{
12  info: NavigationRoute;
13}>;
14
15const HEAD_NAV_HEIGHT = 160;
16
17const isLinkInViewport = (element: HTMLAnchorElement) => {
18  const rect = element.getBoundingClientRect();
19  return (
20    rect.top - HEAD_NAV_HEIGHT >= 0 &&
21    rect.left >= 0 &&
22    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
23    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
24  );
25};
26
27export const SidebarLink = ({ info, children }: SidebarLinkProps) => {
28  const { asPath, pathname } = useRouter();
29  const ref = useRef<HTMLAnchorElement>(null);
30
31  const checkSelection = () => {
32    // Special case for root url
33    if (info.name === 'Introduction') {
34      if (asPath.match(/\/versions\/[\w.]+\/$/) || asPath === '/versions/latest/') {
35        return true;
36      }
37    }
38
39    const linkUrl = stripVersionFromPath(info.as || info.href);
40    return linkUrl === stripVersionFromPath(pathname) || linkUrl === stripVersionFromPath(asPath);
41  };
42
43  const isSelected = checkSelection();
44
45  useEffect(() => {
46    if (isSelected && ref?.current && !isLinkInViewport(ref?.current)) {
47      setTimeout(() => ref?.current && ref.current.scrollIntoView({ behavior: 'smooth' }), 50);
48    }
49  }, []);
50
51  if (info.hidden) {
52    return null;
53  }
54
55  const customDataAttributes = isSelected && {
56    'data-sidebar-anchor-selected': true,
57  };
58
59  return (
60    <div css={STYLES_CONTAINER}>
61      <NextLink
62        href={info.href as string}
63        as={info.as || info.href}
64        {...customDataAttributes}
65        ref={ref}
66        css={[STYLES_LINK, isSelected && STYLES_LINK_ACTIVE]}>
67        {isSelected && <div css={STYLES_ACTIVE_BULLET} />}
68        {children}
69      </NextLink>
70    </div>
71  );
72};
73
74const STYLES_LINK = css`
75  ${typography.fontSizes[14]}
76  display: flex;
77  flex-direction: row;
78  text-decoration: none;
79  color: ${theme.text.secondary};
80  transition: 50ms ease color;
81  align-items: flex-start;
82  padding-left: ${spacing[4] + spacing[0.5]}px;
83  scroll-margin: 60px;
84
85  &:hover {
86    color: ${theme.link.default};
87  }
88`;
89
90const STYLES_LINK_ACTIVE = css`
91  font-family: ${typography.fontFaces.medium};
92  color: ${theme.link.default};
93  padding-left: 0;
94`;
95
96const STYLES_CONTAINER = css`
97  display: flex;
98  min-height: 32px;
99  align-items: center;
100  padding: ${spacing[1]}px;
101  padding-right: ${spacing[2]}px;
102`;
103
104const STYLES_ACTIVE_BULLET = css`
105  height: 6px;
106  width: 6px;
107  min-height: 6px;
108  min-width: 6px;
109  background-color: ${theme.link.default};
110  border-radius: 100%;
111  margin: ${spacing[2]}px ${spacing[1.5]}px;
112`;
113