import React from "react";
import { Link } from "gatsby";
import styled from "@emotion/styled";

const SiteTitleWrapper = styled.div`
  background-color: #052f54;
  padding: 24px 0;
`;

const SiteTitle = styled.h1`
  color: white;
  max-width: 960px;
  margin: auto;
`;

const SiteTitleLink = styled(Link)`
  color: white;
  text-decoration: none;
`;

const Subheading = styled.div`
  color: #919faf;
  max-width: 960px;
  margin: auto;
`;

const VolumeNumbersWrapper = styled.div`
  border-top: 1px solid #fefdfa;
  border-bottom: 1px solid #e3e1ce;
`;

const VolumeNumbers = styled.nav`
  max-width: 960px;
  margin: auto;
  display: flex;
  list-style-type: none;
  line-height: 1.4em;
  padding: 8px 0;
  align-items: center;
`;

const VolumeNumber = styled(Link)`
  flex: 1;
  margin-left: 7px;
  white-space: nowrap;
  text-align: center;
  flex: 1;
  line-height: 1rem;
  background: rgb(179, 205, 107);
  background: linear-gradient(
    90deg,
    rgba(179, 205, 107, 1) 0%,
    rgba(177, 204, 104, 1) 35%,
    rgba(166, 196, 82, 1) 100%
  );
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  padding: 7px 5px 5px;
  display: inline-block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  color: #fff;
  text-decoration: none;

  &:hover {
    background: rgb(157, 179, 98);
    background: linear-gradient(
      90deg,
      rgba(157, 179, 98, 1) 0%,
      rgba(153, 175, 91, 1) 35%,
      rgba(139, 165, 70, 1) 100%
    );
  }
  &.active,
  &:active,
  &[aria-current="page"] {
    background: rgb(157, 179, 98);
    background: linear-gradient(
      90deg,
      rgba(157, 179, 98, 1) 0%,
      rgba(153, 175, 91, 1) 35%,
      rgba(139, 165, 70, 1) 100%
    );
  }
  &:active {
    margin-bottom: -1px;
  }
`;

export default class Header extends React.Component {
  render() {
    const { volumeNumbers, siteTitle, siteDescription } = this.props;
    return (
      <header>
        <SiteTitleWrapper>
          <SiteTitle>
            <SiteTitleLink to="/">{siteTitle}</SiteTitleLink>
          </SiteTitle>
          <Subheading>{siteDescription}</Subheading>
        </SiteTitleWrapper>
        <VolumeNumbersWrapper>
          <VolumeNumbers>
            {volumeNumbers.map(volumeNumber => (
              <React.Fragment key={volumeNumber}>
                {volumeNumber === 1 && (
                  <>
                    <span>Vol.</span>{" "}
                  </>
                )}
                <VolumeNumber
                  key={volumeNumber}
                  partiallyActive={true}
                  activeClassName={"active"}
                  to={`/${volumeNumber}`}
                >
                  {volumeNumber}
                </VolumeNumber>
              </React.Fragment>
            ))}
          </VolumeNumbers>
        </VolumeNumbersWrapper>
      </header>
    );
  }
}

@@ -2113,32 +2113,62 @@
 teTitleWrapper%3E%0A
+        %7BvolumeNumbers && (%0A  
         %3CVolumeN
@@ -2184,32 +2184,34 @@
 pper%3E%0A          
+ 
+ 
 %3CVolumeNumbers%3E%0A
@@ -2202,32 +2202,34 @@
 %3CVolumeNumbers%3E%0A
+  
             %7Bvol
@@ -2261,16 +2261,18 @@
 er =%3E (%0A
+  
         
@@ -2321,32 +2321,34 @@
                 
+  
 %7BvolumeNumber ==
@@ -2374,16 +2374,18 @@
         
+  
 %3C%3E%0A     
@@ -2399,16 +2399,18 @@
         
+ 
+ 
 %3Cspan%3EVo
@@ -2446,12 +2446,16 @@
     
+  
 %3C/%3E%0A
+  
     
@@ -2477,32 +2477,34 @@
                 
+  
 %3CVolumeNumber%0A  
@@ -2501,16 +2501,18 @@
 eNumber%0A
+  
         
@@ -2558,16 +2558,18 @@
         
+ 
+ 
 partiall
@@ -2583,16 +2583,18 @@
 =%7Btrue%7D%0A
+  
         
@@ -2630,16 +2630,18 @@
 ctive%22%7D%0A
+  
         
@@ -2690,18 +2690,22 @@
         
-%3E%0A
+  %3E%0A  
         
@@ -2737,32 +2737,34 @@
                 
+ 
+ 
 %3C/VolumeNumber%3E%0A
@@ -2759,24 +2759,26 @@
 lumeNumber%3E%0A
+  
             
@@ -2797,16 +2797,18 @@
 agment%3E%0A
+  
         
@@ -2817,32 +2817,34 @@
   ))%7D%0A          
+  
 %3C/VolumeNumbers%3E
@@ -2836,32 +2836,34 @@
 /VolumeNumbers%3E%0A
+  
         %3C/Volume
@@ -2874,24 +2874,35 @@
 ersWrapper%3E%0A
+        )%7D%0A
       %3C/head

Fix header