add YearBar

Author: pwfisher

explorer/components/AppStyle.ts

@@ -17,24 +17,7 @@ export const AppStyle = createGlobalStyle`
     text-decoration: none;
 
     &:visited {
-      color: lightgrey;
-    }
-
-    &::after {
-      background: currentColor;
-      bottom: -2px;
-      display: block;
-      content: '';
-      height: 1px;
-      left: 0;
-      opacity: 0.2;
-      position: absolute;
-      right: 0;
-
-    }
-
-    &:hover {
-      background: rgba(128,128,128,0.07);
+      color: #BBB;
     }
   }
 `

explorer/components/HomePage.tsx

@@ -15,7 +15,7 @@ export const HomePage = () => (
 
     <DrawingsByYearSection>
       <h2>drawings by year:</h2>
-      <ol className="years">
+      <ol>
         {drawingYears.sort().reverse().map(year => (
           <li key={year}>
             <Link href="/year/[id]" as={`/year/${year}`}>

explorer/components/YearBar.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { drawingYears } from '../__fixtures__/drawings'
+import styled from 'styled-components'
+import Link from 'next/link'
+
+export const YearBar: React.FC<{ activeYear: number }> = ({ activeYear }) => {
+  return (
+    <YearList>
+      {drawingYears.sort().reverse().map(year => (
+        <YearItem key={year} isActive={year === activeYear}>
+          {year === activeYear ? (
+            <b>{year}</b>
+          ) : (
+            <Link href="/year/[id]" as={`/year/${year}`}>
+              <a>{year}</a>
+            </Link>
+          )}
+        </YearItem>
+      ))}
+    </YearList>
+  )
+}
+
+const YearList = styled.ol.attrs({ className: 'Explorer__YearBar__YearList' })`
+  background: white;
+  padding: 0 16px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+`
+
+const YearItem = styled.li.attrs({ className: 'Explorer__YearBar__YearItem' })<{ isActive: boolean}>`
+  display: inline-block;
+  font-size: 12px;
+  margin: 8px 10px;
+  position: relative;
+
+  ${o => o.isActive && `
+    &::after {
+      background: currentColor;
+      bottom: -2px;
+      display: block;
+      content: '';
+      height: 2px;
+      left: 0;
+      opacity: 0.8;
+      position: absolute;
+      right: 0;
+    }
+  `}
+`

explorer/components/YearPage.tsx

@@ -2,14 +2,16 @@ import { Drawing } from '../types/drawing-models'
 import { PageLayout } from './PageLayout'
 import { DrawingTile } from './DrawingTile'
 import styled from 'styled-components'
+import { YearBar } from './YearBar'
 
 export const YearPage = ({ year, drawings }: {
   year: number
   drawings?: Drawing[]
 }) => {
   return (
     <PageLayout title={`explodingdog ${year}`}>
-      <Heading>{year}</Heading>
+      <YearBar activeYear={year} />
+      <YearHeading>{year}</YearHeading>
       <DrawingSection>
         {drawings && drawings.map(drawing => (
           <DrawingTile key={drawing.slug} {...drawing} />
@@ -19,7 +21,7 @@ export const YearPage = ({ year, drawings }: {
   )
 }
 
-const Heading = styled.h1.attrs({ className: 'Explorer__YearPage__Heading'})`
+const YearHeading = styled.h1.attrs({ className: 'Explorer__YearPage__YearHeading'})`
   font-size: 64px;
   text-indent: 48px;
 `