feat(website): add a mobile nav and improve the sitemap data

website/src/components/Header.tsx

@@ -1,15 +1,18 @@
 import React from 'react'
 import styled from 'styled-components'
-import { HeaderNav } from './HeaderNav'
+import { HeaderNav } from './nav'
 
-const Header = () => (
+interface HeaderProps {
+    isNavOpen: boolean
+    toggleNav: () => void
+}
+
+export const Header = ({ isNavOpen, toggleNav }: HeaderProps) => (
     <Container>
-        <HeaderNav />
+        <HeaderNav isNavOpen={isNavOpen} toggleNav={toggleNav} />
     </Container>
 )
 
-export default Header
-
 const Container = styled.header`
     position: fixed;
     top: 0;

website/src/components/Layout.tsx

@@ -1,15 +1,21 @@
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, useCallback, useState } from 'react'
 import styled from 'styled-components'
-import Header from './Header'
+import { Header } from './Header'
 import media from '../theming/mediaQueries'
-// @ts-ignore
-import MiniNav from './nav/MiniNav'
+import { MiniNav, FullNav } from './nav'
 
 const Layout = ({ children }: PropsWithChildren<{}>) => {
+    const [isNavOpen, setIsNavOpen] = useState(false)
+
+    const toggleNav = useCallback(() => {
+        setIsNavOpen(isOpen => !isOpen)
+    }, [setIsNavOpen])
+
     return (
         <>
-            <Header />
+            <Header isNavOpen={isNavOpen} toggleNav={toggleNav} />
             <MiniNav />
+            {isNavOpen && <FullNav />}
             <Content>
                 <InnerContent>{children}</InnerContent>
             </Content>

website/src/components/components/explorer/ComponentsFilters.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react'
 import styled from 'styled-components'
 import media from '../../../theming/mediaQueries'
 
-const filters = ['SVG', 'HTML', 'Canvas', 'HTTP API'] as const
+const filters = ['SVG', 'HTML', 'Canvas', 'API'] as const
 
 interface ComponentsFiltersProps {
     filter: string | null

website/src/components/components/explorer/ComponentsGrid.tsx

@@ -1,26 +1,19 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import styled from 'styled-components'
 import { ComponentsGridItem } from './ComponentsGridItem'
 import * as nav from '../../../data/nav'
 import media from '../../../theming/mediaQueries'
+import { ChartNavData } from '../../../types'
 
-type NavItem = {
-    label: string
-    path: string
-    icon: string
-    tags: string[]
-}
-type FilterFunction = (item: NavItem) => boolean
+type FilterFunction = (item: ChartNavData) => boolean
 
 const getFilterFunction = (term?: string | null, filter?: string | null): FilterFunction => {
     let predicates: FilterFunction[] = []
     if (term && term.length > 0) {
-        predicates.push(({ label }) => label.toLowerCase().includes(term.toLowerCase()))
+        predicates.push(({ name }) => name.toLowerCase().includes(term.toLowerCase()))
     }
     if (filter) {
-        predicates.push(({ tags }) =>
-            tags.map(tag => tag.toLowerCase()).includes(filter.toLowerCase())
-        )
+        predicates.push(({ flavors }) => flavors[filter.toLowerCase()] === true)
     }
 
     return item => predicates.every(predicate => predicate(item))
@@ -32,10 +25,11 @@ interface ComponentsGridProps {
 }
 
 export const ComponentsGrid = ({ filter, term }: ComponentsGridProps) => {
-    let items = nav.allComponents
+    let items = nav.components
+
     if (term || filter) {
         const filterFunction = getFilterFunction(term, filter)
-        items = nav.allComponents.filter(filterFunction)
+        items = items.filter(filterFunction)
     }
 
     if (items.length === 0) {
@@ -50,13 +44,7 @@ export const ComponentsGrid = ({ filter, term }: ComponentsGridProps) => {
     return (
         <Grid>
             {items.map(item => (
-                <ComponentsGridItem
-                    key={item.path}
-                    path={item.path}
-                    name={item.label}
-                    icon={item.icon}
-                    tags={item.tags}
-                />
+                <ComponentsGridItem key={item.id} {...item} />
             ))}
         </Grid>
     )

website/src/components/components/explorer/ComponentsGridItem.tsx

@@ -1,30 +1,46 @@
-import React, { memo } from 'react'
+import React, { memo, useCallback, MouseEvent } from 'react'
 import { Link } from 'gatsby'
 import styled, { useTheme } from 'styled-components'
 import media from '../../../theming/mediaQueries'
+import { ChartNavData } from '../../../types'
 
-interface ComponentsGridItemProps {
-    path: string
-    name: string
-    icon: string
-    tags: string[]
-}
-
-export const ComponentsGridItem = memo(({ path, name, icon, tags }: ComponentsGridItemProps) => {
+export const ComponentsGridItem = memo(({ name, id, flavors, tags }: ChartNavData) => {
     const theme = useTheme()
 
+    const handleVariantClick = useCallback((event: MouseEvent) => {
+        event.stopPropagation()
+    }, [])
+
     return (
-        <Container to={path}>
-            <Icon className={`sprite-icons-${icon}-${theme.id}-colored`} />
+        <Container to={`/${id}/`}>
+            <Icon className={`sprite-icons-${id}-${theme.id}-colored`} />
             <Header>
                 <Name>{name}</Name>
-                {tags.length > 0 && (
+                {/*tags.length > 0 && (
                     <Tags>
                         {tags.map(tag => (
                             <Tag key={tag}>{tag}</Tag>
                         ))}
                     </Tags>
-                )}
+                )*/}
+                <Flavors>
+                    <Flavor to={`/${id}/`}>SVG</Flavor>
+                    {flavors.html && (
+                        <Flavor onClick={handleVariantClick} to={`/${id}/html/`}>
+                            HTML
+                        </Flavor>
+                    )}
+                    {flavors.canvas && (
+                        <Flavor onClick={handleVariantClick} to={`/${id}/canvas/`}>
+                            Canvas
+                        </Flavor>
+                    )}
+                    {flavors.api && (
+                        <Flavor onClick={handleVariantClick} to={`/${id}/api/`}>
+                            API
+                        </Flavor>
+                    )}
+                </Flavors>
             </Header>
         </Container>
     )
@@ -35,17 +51,15 @@ const Container = styled(Link)`
     background-color: ${({ theme }) => theme.colors.cardBackground};
     border-radius: 2px;
     padding: 12px;
-    cursor: pointer;
     color: ${({ theme }) => theme.colors.text};
     border: 1px solid ${({ theme }) => theme.colors.cardBackground};
     box-shadow: ${({ theme }) => theme.cardShadow};
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
 
     &:focus,
     &:hover {
-        color: ${({ theme }) => theme.colors.accent};
         box-shadow: none;
         border-color: ${({ theme }) => theme.colors.accent};
         outline: 0;
@@ -91,6 +105,35 @@ const Icon = styled.span`
     height: 52px;
 `
 
+const Flavors = styled.div`
+    font-size: 0.8rem;
+    line-height: 0.8rem;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+`
+
+const Flavor = styled(Link)`
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 0.75rem;
+    line-height: 1em;
+    font-weight: 700;
+    padding: 3px 4px;
+    margin-right: 3px;
+    margin-bottom: 3px;
+    border-radius: 2px;
+    background-color: ${({ theme }) => theme.colors.accent};
+    border: 1px solid ${({ theme }) => theme.colors.accent};
+    color: #ffffff;
+
+    &:hover {
+        background-color: ${({ theme }) => theme.colors.cardBackground};
+        color: ${({ theme }) => theme.colors.accent};
+    }
+`
+
 const Tags = styled.div`
     font-size: 0.9rem;
     color: ${({ theme }) => theme.colors.textLight};

website/src/components/guides/theming/ThemedHeatMap.tsx

@@ -55,12 +55,23 @@ export const ThemedHeatMap = ({ theme }: { theme: CompleteTheme }) => {
                     anchor: 'right',
                     direction: 'column',
                     translateX: 32,
-                    length: 180,
+                    length: 140,
                     thickness: 10,
                     ticks: [-100, -75, -50, -25, 0, 25, 50, 75, 100],
                     title: 'Legend Title →',
                 },
             ]}
+            annotations={[
+                {
+                    match: { id: 'B.B' },
+                    type: 'rect',
+                    offset: 3,
+                    borderRadius: 3,
+                    noteX: 20,
+                    noteY: { abs: -10 },
+                    note: 'Sample annotation',
+                },
+            ]}
         />
     )
 }

website/src/components/guides/theming/props.ts

@@ -1,6 +1,6 @@
 import { ChartPropertiesGroup, ChartProperty } from '../../../types'
 
-const OPEN_ALL_BY_DEFAULTS = true
+const OPEN_ALL_BY_DEFAULTS = false
 
 const fontSizeProp: ChartProperty = {
     key: 'fontSize',