Add mobile navigation

src/components.d.ts

@@ -314,6 +314,8 @@ declare global {
 declare global {
   interface HTMLSiteHeaderElement extends HTMLStencilElement {
     'currentSection': string;
+    'isMenuOpen': boolean;
+    'onToggleClick': any;
   }
   var HTMLSiteHeaderElement: {
     prototype: HTMLSiteHeaderElement;
@@ -333,14 +335,17 @@ declare global {
   namespace JSXElements {
     export interface SiteHeaderAttributes extends HTMLAttributes {
       'currentSection'?: string;
+      'isMenuOpen'?: boolean;
+      'onToggleClick'?: any;
     }
   }
 }
 
 
 declare global {
   interface HTMLSiteMenuElement extends HTMLStencilElement {
-
+    'isOpen': boolean;
+    'onNavigate': () => void;
   }
   var HTMLSiteMenuElement: {
     prototype: HTMLSiteMenuElement;
@@ -359,7 +364,8 @@ declare global {
   }
   namespace JSXElements {
     export interface SiteMenuAttributes extends HTMLAttributes {
-
+      'isOpen'?: boolean;
+      'onNavigate'?: () => void;
     }
   }
 }

src/components/ionic-docs/ionic-docs.scss

@@ -40,7 +40,6 @@ ionic-docs {
 }
 
 site-header,
-site-menu,
 site-preview-app {
   position: sticky;
 }
@@ -59,19 +58,6 @@ site-header {
   }
 }
 
-site-menu {
-  grid-area: menu;
-  top: var(--header-height);
-  padding: 1.75rem 0 1.75rem 2rem;
-  height: calc(100vh - 75px);
-  overflow-y: auto;
-
-  @media (max-width: $breakpoint-md)  {
-    /* TODO: sidebar drawer */
-    display: none;
-  }
-}
-
 site-content {
   padding: 1.15rem 2rem 1.75rem;
   grid-area: content;

src/components/ionic-docs/ionic-docs.tsx

@@ -9,6 +9,7 @@ export class IonicDocs {
   @Element() el: Element;
   @Event() sectionChanged: EventEmitter;
   @State() currentSection = 'framework';
+  @State() isMenuOpen = false;
 
   @Listen('docLoaded')
   onDocLoaded({ detail }) {
@@ -36,6 +37,14 @@ export class IonicDocs {
       .join(' ');
   }
 
+  toggleMenu = () => {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  closeMenu = () => {
+    this.isMenuOpen = false;
+  }
+
   hostData() {
     return {
       class: { [`section-${this.currentSection}`]: true },
@@ -44,8 +53,13 @@ export class IonicDocs {
 
   render() {
     return [
-      <site-header currentSection={ this.currentSection } />,
-      <site-menu/>,
+      <site-header
+        currentSection={this.currentSection}
+        isMenuOpen={this.isMenuOpen}
+        onToggleClick={this.toggleMenu}/>,
+      <site-menu
+        onNavigate={this.closeMenu}
+        isOpen={this.isMenuOpen}/>,
       <site-content/>,
       <site-preview-app/>
     ];

src/components/site-header/site-header.scss

@@ -103,3 +103,28 @@ site-header {
   }
 }
 
+.site-nav-toggle {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  height: 1rem;
+  margin-right: 1em;
+  padding: 0;
+  width: 1rem;
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (min-width: 700px) {
+    display: none;
+  }
+}
+
+.site-nav-toggle.is-open {
+  color: white;
+}
+
+.site-nav-toggle > svg {
+  fill: currentColor;
+}

src/components/site-header/site-header.tsx

@@ -7,6 +7,8 @@ import * as constants from '../../constants';
 })
 export class SiteHeader {
   @Prop() currentSection: string;
+  @Prop() onToggleClick = () => {};
+  @Prop() isMenuOpen: boolean;
 
   renderGithubLink() {
     if (this.currentSection === constants.SECTION_FRAMEWORK) {
@@ -21,6 +23,22 @@ export class SiteHeader {
   render() {
     return [
       <nav>
+        <button
+          onClick={this.onToggleClick}
+          class={{ 'site-nav-toggle': true, 'is-open': this.isMenuOpen }}>
+            { this.isMenuOpen ? (
+              <svg viewBox="0 0 54 54">
+                <rect transform="rotate(45 27 27)" y="22" width="54" height="10" rx="2"/>
+                <rect transform="rotate(-45 27 27)" y="22" width="54" height="10" rx="2"/>
+              </svg>
+            ) : (
+              <svg viewBox="0 0 54 54">
+                <rect y="0" width="54" height="10" rx="2"/>
+                <rect y="22" width="54" height="10" rx="2"/>
+                <rect y="44" width="54" height="10" rx="2"/>
+              </svg>
+            )}
+        </button>
         <a href="/docs" id="site-logo">
           <svg viewBox="0 0 433 144">
             <title>Ionic Docs</title>

src/components/site-menu/site-menu.scss

@@ -1,6 +1,27 @@
-/* @import 'src/styles/variables'; */
 @import './version-dropdown';
 
+site-menu {
+  grid-area: menu;
+  height: calc(100vh - var(--header-height));
+  overflow-y: auto;
+  padding: 1.75rem 0 1.75rem 2rem;
+  position: sticky;
+  top: var(--header-height);
+
+  @media (max-width: 700px) {
+    background-color: white;
+    position: fixed;
+    right: 100%;
+    transition: transform 400ms cubic-bezier(0.190,1,0.220,1);
+    width: 100%;
+    z-index: 1;
+
+    &.is-open {
+      transform: translateX(100%);
+    }
+  }
+}
+
 site-menu ul {
   list-style: none;
   margin: 0;

src/components/site-menu/site-menu.tsx

@@ -1,4 +1,4 @@
-import { Component, State } from '@stencil/core';
+import { Component, Prop, State } from '@stencil/core';
 import VersionDropdown from './version-dropdown';
 import menuMap from './site-menu-map';
 import { versions } from '../../versions';
@@ -9,6 +9,8 @@ import { versions } from '../../versions';
 })
 export class SiteMenu {
 
+  @Prop() onNavigate: () => void;
+  @Prop() isOpen: boolean;
   @State() activeItem: string;
   @State() version = versions[versions.length - 1];
 
@@ -30,7 +32,7 @@ export class SiteMenu {
     return (
       <li role="none">
         <stencil-route-link exact url={url}
-          onClick={ isTopLevel ? () => this.setActiveItem(text) : null }
+          onClick={() => this.handleNavigate(text, isTopLevel)}
           anchor-title={text}
           anchor-role="menuitem">
           {text}
@@ -59,10 +61,21 @@ export class SiteMenu {
     );
   }
 
+  handleNavigate = (text, isTopLevel) => {
+    if (isTopLevel) this.setActiveItem(text);
+    this.onNavigate();
+  }
+
   setActiveItem(text: string) {
     this.activeItem = this.activeItem === text ? null : text;
   }
 
+  hostData() {
+    return {
+      'class': { 'is-open': this.isOpen }
+    };
+  }
+
   render() {
     return [
       <VersionDropdown