diff --git a/components/DocsLayout.tsx b/components/DocsLayout.tsx index 6cff92843..271bc6590 100644 --- a/components/DocsLayout.tsx +++ b/components/DocsLayout.tsx @@ -3,6 +3,11 @@ import { Container, Content, Title } from './Layout'; import Nav, { NavProps } from './Nav'; import Head from './SeoHead'; import { useRouter } from 'next/router'; +import styled from 'styled-components'; +import { RssFeed as FeedIcon } from '@styled-icons/material'; +import Link from './Link'; +import { VisuallyHidden } from './VisuallyHidden'; +import { getReleasesAtomFeedURI } from '../utils/githubApi'; export interface DocsLayoutProps { description?: string; @@ -11,6 +16,21 @@ export interface DocsLayoutProps { useDocsSidebarMenu?: boolean; } +const TitleRow = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + + ${() => FeedLink} { + flex-shrink: 0; + } +`; + +const FeedLink = styled(Link)` + width: 1.5em; +`; + export default function DocsLayout({ children, title = '', @@ -22,6 +42,9 @@ export default function DocsLayout({ const [isSideFolded, setIsSideFolded] = React.useState(true); const [isMobileNavFolded, setIsMobileNavFolded] = React.useState(true); + const feedLink = title === 'Releases' ? getReleasesAtomFeedURI() : null; + const prefixedTitle = `styled-components${title ? `: ${title}` : ''}`; + const onSideToggle = React.useCallback(() => { setIsMobileNavFolded(true); setIsSideFolded(x => !x); @@ -39,8 +62,9 @@ export default function DocsLayout({ return ( - + + {feedLink && }