Move Dropdown to own component

website/src/components/dropdown.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { navigate } from 'gatsby'
+
+import classes from '../styles/dropdown.module.sass'
+
+const Dropdown = ({ defaultValue, className, onChange, children }) => {
+    const defaultOnChange = ({ target }) => navigate(target.value)
+    return (
+        <select
+            defaultValue={defaultValue}
+            className={classNames(classes.root, className)}
+            onChange={onChange || defaultOnChange}
+        >
+            {children}
+        </select>
+    )
+}
+
+Dropdown.propTypes = {
+    defaultValue: PropTypes.string,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    children: PropTypes.node.isRequired,
+}
+
+export default Dropdown

website/src/components/navigation.js

@@ -1,23 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { navigate } from 'gatsby'
 
 import Link from './link'
 import Icon from './icon'
+import Dropdown from './dropdown'
 import { github } from './util'
 import { ReactComponent as Logo } from '../images/logo.svg'
 import classes from '../styles/navigation.module.sass'
 
-const Dropdown = ({ items, section }) => {
+const NavigationDropdown = ({ items, section }) => {
     const active = items.find(({ text }) => text.toLowerCase() === section)
     const defaultValue = active ? active.url : 'title'
     return (
-        <select
+        <Dropdown defaultValue={defaultValue} className={classes.dropdown}>
-            defaultValue={defaultValue}
-            className={classes.dropdown}
-            onChange={({ target }) => navigate(target.value)}
-        >
             <option value="title" disabled>
                 Menu
             </option>
@@ -26,7 +22,7 @@ const Dropdown = ({ items, section }) => {
                     {text}
                 </option>
             ))}
-        </select>
+        </Dropdown>
     )
 }
 
@@ -39,7 +35,7 @@ const Navigation = ({ title, items, section, search, children }) => {
             </Link>
 
             <div className={classes.menu}>
-                <Dropdown items={items} section={section} />
+                <NavigationDropdown items={items} section={section} />
 
                 <ul className={classes.list}>
                     {items.map(({ text, url }, i) => {

website/src/styles/dropdown.module.sass

@@ -0,0 +1,15 @@
+.root
+    font: inherit
+    background: transparent
+    border: none
+    appearance: none
+    background-color: var(--color-back)
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23929e9b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')
+    background-repeat: no-repeat
+    background-position: right 0.7em top 50%
+    background-size: 0.5em auto
+    padding: 0 1.4em 0 0.5em
+
+    &:-moz-focusring
+        text-shadow: 0 0 0 var(--color-theme)
+        color: transparent

website/src/styles/navigation.module.sass

@@ -74,23 +74,10 @@
     font-weight: bold
     color: var(--color-theme)
     text-transform: uppercase
-    background: transparent
-    border: 0
     margin-right: 0.5rem
-    appearance: none
-    background-color: var(--color-back)
-    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23929e9b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E')
-    background-repeat: no-repeat
-    background-position: right 0.7em top 50%
-    background-size: 0.5em auto
-    padding: 0 1.4em 0 0.5em
     border: 2px solid var(--color-back)
     border-radius: 2em
 
-    &:-moz-focusring
-        text-shadow: 0 0 0 var(--color-theme)
-        color: transparent
-
     &:focus
         border: 2px dotted var(--color-theme)
         outline: none