From 3abe93524574b47bff2c30798177be0c680e3b16 Mon Sep 17 00:00:00 2001
From: Ines Montani <ines@ines.io>
Date: Tue, 26 Feb 2019 13:02:48 +0100
Subject: [PATCH] Use dropdown for collapsed sidebar menu

---
 website/src/components/sidebar.js         | 19 +++++++
 website/src/styles/dropdown.module.sass   |  3 +-
 website/src/styles/navigation.module.sass |  1 +
 website/src/styles/sidebar.module.sass    | 63 +++++++++++------------
 4 files changed, 53 insertions(+), 33 deletions(-)

diff --git a/website/src/components/sidebar.js b/website/src/components/sidebar.js
index 29bd122d6..df3bd9a67 100644
--- a/website/src/components/sidebar.js
+++ b/website/src/components/sidebar.js
@@ -4,8 +4,26 @@ import classNames from 'classnames'
 import { window } from 'browser-monads'
 
 import Link from './link'
+import Dropdown from './dropdown'
 import classes from '../styles/sidebar.module.sass'
 
+const DropdownNavigation = ({ items, defaultValue }) => {
+    return (
+        <div className={classes.dropdown}>
+            <Dropdown className={classes.dropdownSelect} defaultValue={defaultValue}>
+                <option disabled>Select page...</option>
+                {items.map((section, i) =>
+                    section.items.map(({ text, url }, j) => (
+                        <option value={url} key={j}>
+                            {section.label} &rsaquo; {text}
+                        </option>
+                    ))
+                )}
+            </Dropdown>
+        </div>
+    )
+}
+
 const Sidebar = ({ items, pageMenu, slug }) => {
     const [initialized, setInitialized] = useState(false)
     const [activeSection, setActiveSection] = useState(null)
@@ -27,6 +45,7 @@ const Sidebar = ({ items, pageMenu, slug }) => {
 
     return (
         <menu className={classNames('sidebar', classes.root)}>
+            <DropdownNavigation items={items} defaultValue={slug} />
             {items.map((section, i) => (
                 <ul className={classes.section} key={i}>
                     <li className={classNames('h0', classes.label)}>{section.label}</li>
diff --git a/website/src/styles/dropdown.module.sass b/website/src/styles/dropdown.module.sass
index f6afeecab..6ef00c083 100644
--- a/website/src/styles/dropdown.module.sass
+++ b/website/src/styles/dropdown.module.sass
@@ -1,4 +1,5 @@
 .root
+    --dropdown-text-color: var(--color-front)
     font: inherit
     background: transparent
     border: none
@@ -11,5 +12,5 @@
     padding: 0 1.4em 0 0.5em
 
     &:-moz-focusring
-        text-shadow: 0 0 0 var(--color-theme)
+        text-shadow: 0 0 0 var(--dropdown-text-color)
         color: transparent
diff --git a/website/src/styles/navigation.module.sass b/website/src/styles/navigation.module.sass
index 73a9f9fbb..86316f590 100644
--- a/website/src/styles/navigation.module.sass
+++ b/website/src/styles/navigation.module.sass
@@ -69,6 +69,7 @@
     padding-right: 2rem
 
 .dropdown
+    --dropdown-text-color: var(--color-theme)
     font-family: var(--font-secondary)
     font-size: 1.6rem
     font-weight: bold
diff --git a/website/src/styles/sidebar.module.sass b/website/src/styles/sidebar.module.sass
index c225ac634..278bf6bb8 100644
--- a/website/src/styles/sidebar.module.sass
+++ b/website/src/styles/sidebar.module.sass
@@ -7,27 +7,14 @@ $crumb-bar: 2px
     overflow-y: auto
     font: var(--font-size-md)/var(--line-height-md) var(--font-primary)
 
-@include breakpoint(min, md)
-    .root
-        @include scroll-shadow(var(--color-back), var(--color-shadow), var(--height-nav))
-        position: fixed
-        top: 0
-        left: 0
-        width: var(--width-sidebar)
-        height: calc(100vh - 3px)
-        flex: 0 0 var(--width-sidebar)
-        padding-top: calc(var(--height-nav) + 1.5rem)
-        z-index: 10
-        padding-bottom: 5rem
+.dropdown
+    padding: 1rem 0
+    border-bottom: 1px solid var(--color-subtle)
+    width: 100%
 
-@include breakpoint(max, sm)
-    .root
-        flex: 100%
-        width: 100%
-        margin-top: var(--height-nav)
-        display: flex
-        flex-flow: row wrap
-        width: 100%
+.dropdown-select
+    width: 100%
+    padding-left: 1rem
 
 .section
     margin-bottom: var(--spacing-sm)
@@ -35,16 +22,6 @@ $crumb-bar: 2px
     & > *
         padding: 0 2rem 0.35rem
 
-@include breakpoint(max, sm)
-    .section
-        flex: 1 1 0
-        padding: 1.25rem 0
-        border-bottom: 1px solid var(--color-subtle)
-        margin: 0
-
-        &:not(:last-child)
-            border-right: 1px solid var(--color-subtle)
-
 .label
     color: var(--color-dark)
     font: bold var(--font-size-lg)/var(--line-height-md) var(--font-secondary)
@@ -113,6 +90,28 @@ $crumb-bar: 2px
     &:after
         background: var(--color-dark)
 
-@include breakpoint(max, sm)
-    .crumbs
+@include breakpoint(min, md)
+    .root
+        @include scroll-shadow(var(--color-back), var(--color-shadow), var(--height-nav))
+        position: fixed
+        top: 0
+        left: 0
+        width: var(--width-sidebar)
+        height: calc(100vh - 3px)
+        flex: 0 0 var(--width-sidebar)
+        padding-top: calc(var(--height-nav) + 1.5rem)
+        z-index: 10
+        padding-bottom: 5rem
+
+    .dropdown
+        display: none
+
+@include breakpoint(max, sm)
+    .root
+        flex: 100%
+        width: 100%
+        margin-top: var(--height-nav)
+        display: block
+
+    .section
         display: none