From aa6c7f075d30fb084b21e3fd9a91c4bfb9a1fee5 Mon Sep 17 00:00:00 2001
From: Heydon Pickering <heydon@heydonworks.com>
Date: Sat, 1 Jul 2017 11:48:01 +0100
Subject: [PATCH] menu button functionality

---
 content/patterns/installation.md              |  2 +-
 public/index.html                             |  2 +-
 public/js/dom-scripts.js                      | 14 ++++-
 public/js/webcomponents.js                    |  2 +
 public/patterns/code/code-blocks/index.html   |  2 +-
 .../code/codepen-embedding/index.html         |  2 +-
 public/patterns/code/index.html               |  2 +-
 .../code/writing-inline-demos/index.html      |  2 +-
 public/patterns/index.html                    |  2 +-
 public/patterns/installation/index.html       |  2 +-
 public/patterns/library-setup/index.html      |  2 +-
 public/patterns/serving/index.html            |  2 +-
 .../writing/expandable-sections/index.html    |  2 +-
 .../writing/including-images/index.html       |  2 +-
 public/patterns/writing/index.html            |  2 +-
 .../writing/library-structure/index.html      |  2 +-
 .../writing/markdown-and-metadata/index.html  |  2 +-
 .../writing/notes-and-warnings/index.html     |  2 +-
 public/patterns/writing/references/index.html |  2 +-
 themes/infusion/layouts/_default/baseof.html  |  8 +--
 themes/infusion/static/css/styles.css         | 55 ++++++++++++++++++-
 themes/infusion/static/js/dom-scripts.js      | 30 ++++++----
 22 files changed, 107 insertions(+), 36 deletions(-)

diff --git a/content/patterns/installation.md b/content/patterns/installation.md
index 46e38ea..14da479 100644
--- a/content/patterns/installation.md
+++ b/content/patterns/installation.md
@@ -30,7 +30,7 @@ It is entirely likely you already have Node and NPM installed on your system. If
 
 **Infusion** is hosted on Github. To start using it, you'll need to get the files from there. If you are comfortable with the command line, just fork the [github.com/heydon/inclusive-pattern-library](https://github.com/heydon/inclusive-pattern-library) repository, then do a `git clone` to your local system. Replace `[your username]` in the following:
 
-{{<cmd>}}git clone https://github.com/[your username]/infusion-builder.git{{</cmd>}}
+{{<cmd>}}git clone https://github.com/[your username]/infusion.git{{</cmd>}}
 
 If the command line is not your thing, fork  [github.com/heydon/inclusive-pattern-library](https://github.com/heydon/inclusive-pattern-library) and choose **Open in Desktop** from **Clone or download** (see figure 1, below).
 
diff --git a/public/index.html b/public/index.html
index 19e6bdf..12d0b64 100644
--- a/public/index.html
+++ b/public/index.html
@@ -62,7 +62,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/js/dom-scripts.js b/public/js/dom-scripts.js
index 0f666a6..cb7233d 100644
--- a/public/js/dom-scripts.js
+++ b/public/js/dom-scripts.js
@@ -1,7 +1,5 @@
 /* expandable sections */
 (function () {
-  'use strict'
-
   function toggle (button, target) {
     var expanded = button.getAttribute('aria-expanded') === 'true' || false
     button.setAttribute('aria-expanded', !expanded)
@@ -11,7 +9,6 @@
   var expanders = document.querySelectorAll('[data-expands]')
 
   Array.prototype.forEach.call(expanders, function (expander) {
-    console.log(expander)
     var target = document.getElementById(expander.getAttribute('data-expands'))
 
     expander.addEventListener('click', function () {
@@ -20,3 +17,14 @@
   })
 
 }())
+
+/* persist navigation scroll point */
+window.addEventListener('unload', function() {
+  var scrollPoint = document.getElementById('patterns-nav').scrollTop
+  localStorage.setItem('scrollPoint', scrollPoint)
+  console.log('scrollPoint:', localStorage.getItem('scrollPoint'))
+})
+
+window.addEventListener('load', function() {
+  document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
+})
diff --git a/public/js/webcomponents.js b/public/js/webcomponents.js
index 0dbe983..0b7e78d 100644
--- a/public/js/webcomponents.js
+++ b/public/js/webcomponents.js
@@ -147,3 +147,5 @@ k.prototype.setElementClass=k.prototype.Ja;k.prototype._styleInfoForNode=k.proto
 {ScopingShim:G,prepareTemplate:function(a,b,c){G.f();G.prepareTemplate(a,b,c)},styleSubtree:function(a,b){G.f();G.styleSubtree(a,b)},styleElement:function(a){G.f();G.styleElement(a)},styleDocument:function(a){G.f();G.styleDocument(a)},getComputedStyleValue:function(a,b){return G.getComputedStyleValue(a,b)},nativeCss:v,nativeShadow:u};fb&&(window.ShadyCSS.ApplyShim=fb);gb&&(window.ShadyCSS.CustomStyleInterface=gb);(function(){function a(){requestAnimationFrame(function(){window.WebComponents.ready=
 !0;window.document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))})}function b(){a();c.removeEventListener("readystatechange",b)}var c=window.document;window.WebComponents=window.WebComponents||{};"loading"!==c.readyState?a():c.addEventListener("readystatechange",b)})()})();
 }).call(self)
+
+//# sourceMappingURL=webcomponents-sd-ce.js.map
diff --git a/public/patterns/code/code-blocks/index.html b/public/patterns/code/code-blocks/index.html
index ba63cd0..8e5192b 100644
--- a/public/patterns/code/code-blocks/index.html
+++ b/public/patterns/code/code-blocks/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/code/codepen-embedding/index.html b/public/patterns/code/codepen-embedding/index.html
index c010582..29d14c0 100644
--- a/public/patterns/code/codepen-embedding/index.html
+++ b/public/patterns/code/codepen-embedding/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/code/index.html b/public/patterns/code/index.html
index dba7886..35d7216 100644
--- a/public/patterns/code/index.html
+++ b/public/patterns/code/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/code/writing-inline-demos/index.html b/public/patterns/code/writing-inline-demos/index.html
index f8a6007..0219afc 100644
--- a/public/patterns/code/writing-inline-demos/index.html
+++ b/public/patterns/code/writing-inline-demos/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/index.html b/public/patterns/index.html
index 1b0e7ee..5d8efaa 100644
--- a/public/patterns/index.html
+++ b/public/patterns/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/installation/index.html b/public/patterns/installation/index.html
index 4dd4ff6..4bcb2ec 100644
--- a/public/patterns/installation/index.html
+++ b/public/patterns/installation/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/library-setup/index.html b/public/patterns/library-setup/index.html
index 4738f31..4473092 100644
--- a/public/patterns/library-setup/index.html
+++ b/public/patterns/library-setup/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/serving/index.html b/public/patterns/serving/index.html
index b0e2ba0..3d3d08b 100644
--- a/public/patterns/serving/index.html
+++ b/public/patterns/serving/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/writing/expandable-sections/index.html b/public/patterns/writing/expandable-sections/index.html
index 45c6226..8dd1fbf 100644
--- a/public/patterns/writing/expandable-sections/index.html
+++ b/public/patterns/writing/expandable-sections/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/writing/including-images/index.html b/public/patterns/writing/including-images/index.html
index ae4c54e..90dc168 100644
--- a/public/patterns/writing/including-images/index.html
+++ b/public/patterns/writing/including-images/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/writing/index.html b/public/patterns/writing/index.html
index bf76df0..04789ab 100644
--- a/public/patterns/writing/index.html
+++ b/public/patterns/writing/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/writing/library-structure/index.html b/public/patterns/writing/library-structure/index.html
index bc16c89..d8cf0ce 100644
--- a/public/patterns/writing/library-structure/index.html
+++ b/public/patterns/writing/library-structure/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/writing/markdown-and-metadata/index.html b/public/patterns/writing/markdown-and-metadata/index.html
index bc49774..c102a5e 100644
--- a/public/patterns/writing/markdown-and-metadata/index.html
+++ b/public/patterns/writing/markdown-and-metadata/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/writing/notes-and-warnings/index.html b/public/patterns/writing/notes-and-warnings/index.html
index 4c2e2d6..e565985 100644
--- a/public/patterns/writing/notes-and-warnings/index.html
+++ b/public/patterns/writing/notes-and-warnings/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/public/patterns/writing/references/index.html b/public/patterns/writing/references/index.html
index 5416689..49b13f6 100644
--- a/public/patterns/writing/references/index.html
+++ b/public/patterns/writing/references/index.html
@@ -61,7 +61,7 @@
             </a>
             <p class="library-desc">Documentation for the <strong>Infusion</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
           </div>
-          <nav class="patterns" role="navigation">
+          <nav id="patterns-nav" class="patterns" role="navigation">
             
             
               <ul>
diff --git a/themes/infusion/layouts/_default/baseof.html b/themes/infusion/layouts/_default/baseof.html
index 81bcfe9..508fd84 100644
--- a/themes/infusion/layouts/_default/baseof.html
+++ b/themes/infusion/layouts/_default/baseof.html
@@ -27,17 +27,17 @@
             <p class="library-desc">{{ .Site.Params.Description | safeHTML }}</p>
           </div>
           <nav id="patterns-nav" class="patterns" role="navigation">
+            <button id="menu-button" aria-expanded="false">Menu</button>
             {{ $current := . }}
             {{ range $.Site.Home.Sections }}
-              <ul>
+              <ul id="patterns-list">
                 {{ range .Pages.ByWeight }}
                   <li class="pattern">
                     <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
                       <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                      <span>{{ .Title }}</span>
+                      <span class="text">{{ .Title }}</span>
                     </a>
                   </li>
-                  </li>
                 {{ end }}
                 {{ range .Sections.ByWeight }}
                   <li>
@@ -47,7 +47,7 @@
                         <li class="pattern">
                           <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
                             <svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
-                            <span>{{ .Title }}</span>
+                            <span class="text">{{ .Title }}</span>
                           </a>
                         </li>
                       {{ end }}
diff --git a/themes/infusion/static/css/styles.css b/themes/infusion/static/css/styles.css
index 93679de..0249d74 100644
--- a/themes/infusion/static/css/styles.css
+++ b/themes/infusion/static/css/styles.css
@@ -53,7 +53,7 @@ figure p img {
 
 :focus:not([tabindex="-1"]),
 [data-expands]:focus svg,
-.patterns a:focus span {
+.patterns a:focus .text {
   outline: 3px solid #ccc;
   outline-offset: 2px;
 }
@@ -148,9 +148,13 @@ main ul ul {
 /* Buttons */
 
 button {
-  font-size: inherit;
+  font-size: 1.25rem;
   font-family: inherit;
   font-weight: inherit;
+  background: #111;
+  color: #fff;
+  padding: 0.75rem;
+  border: 0;
 }
 
 /* Tables */
@@ -210,6 +214,9 @@ th:empty {
 .library-desc {
   font-style: italic;
   margin-top: 0.25rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 30rem;
 }
 
 .main-and-footer {
@@ -279,6 +286,19 @@ th:empty {
   text-decoration-skip: ink;
 }
 
+/* menu button */
+
+#menu-button {
+  display: none;
+  width: 100%;
+  text-align: center;
+}
+
+#menu-button:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 0.25rem #ccc;
+}
+
 /* Pattern lists */
 
 .patterns-list {
@@ -629,10 +649,41 @@ a .balloon {
 
   .patterns h3 {
     font-size: 1.125rem;
+    border-top: 4px solid;
+    border-bottom: 4px solid;
+    padding: 0.75rem 0;
+  }
+
+  .patterns ul ul {
+    margin: 0;
+  }
+
+  .patterns li {
+    margin-top: 0;
   }
 
   .pattern {
     font-size: 1rem;
   }
 
+  .pattern a {
+    padding: 0.75rem 0;
+  }
+
+  .pattern + .pattern {
+    border-top: 1px solid;
+  }
+
+  #menu-button {
+    display: block;
+  }
+
+  #patterns-list {
+    display: none;
+  }
+
+  [aria-expanded="true"] + #patterns-list {
+    display: block;
+  }
+
 }
diff --git a/themes/infusion/static/js/dom-scripts.js b/themes/infusion/static/js/dom-scripts.js
index cb7233d..584aae6 100644
--- a/themes/infusion/static/js/dom-scripts.js
+++ b/themes/infusion/static/js/dom-scripts.js
@@ -1,7 +1,7 @@
 /* expandable sections */
 (function () {
   function toggle (button, target) {
-    var expanded = button.getAttribute('aria-expanded') === 'true' || false
+    var expanded = button.getAttribute('aria-expanded') === 'true'
     button.setAttribute('aria-expanded', !expanded)
     target.hidden = !target.hidden
   }
@@ -15,16 +15,26 @@
       toggle(expander, target)
     })
   })
+}());
 
-}())
+/* menu button */
+(function () {
+  var button = document.getElementById('menu-button')
+  var menu = document.getElementById('patterns-list')
+  button.addEventListener('click', function() {
+    var expanded = this.getAttribute('aria-expanded') === 'true'
+    this.setAttribute('aria-expanded', !expanded)
+  })
+}());
 
 /* persist navigation scroll point */
-window.addEventListener('unload', function() {
-  var scrollPoint = document.getElementById('patterns-nav').scrollTop
-  localStorage.setItem('scrollPoint', scrollPoint)
-  console.log('scrollPoint:', localStorage.getItem('scrollPoint'))
-})
+(function () {
+  window.addEventListener('unload', function() {
+    var scrollPoint = document.getElementById('patterns-nav').scrollTop
+    localStorage.setItem('scrollPoint', scrollPoint)
+  })
 
-window.addEventListener('load', function() {
-  document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
-})
+  window.addEventListener('load', function() {
+    document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint'))
+  })
+}());