fix all validation errors by using amp-sidebar

ampproject · May 17, 2016 · 25e9bee · 25e9bee
1 parent 2c5695e
commit 25e9bee
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 43 deletions.
diff --git a/_jekyll/includes/analytics.html b/_jekyll/includes/analytics.html
@@ -1,15 +1,15 @@
-<amp-analytics type="googleanalytics" id="analytics-ga">
-<script type="application/json">
-{
-  "vars": {
-    "account": "UA-67833617-1"
-  },
-  "triggers": {
-    "trackPageview": {
-      "on": "visible",
-      "request": "pageview"
+    <amp-analytics type="googleanalytics" id="analytics-ga">
+    <script type="application/json">
+    {
+      "vars": {
+        "account": "UA-67833617-1"
+      },
+      "triggers": {
+        "trackPageview": {
+          "on": "visible",
+          "request": "pageview"
+        }
+      }
     }
-  }
-}
-</script>
-</amp-analytics>
+    </script>
+    </amp-analytics>
diff --git a/_jekyll/includes/footer.html b/_jekyll/includes/footer.html
@@ -4,12 +4,4 @@
           <div class="twelve columns">
           </div>
         </div>
-    </footer>
-    <script>
-    document.getElementById('menu-button').onclick = function() {
-      document.getElementsByTagName('header')[0].classList.toggle('menu-open');
-      document.querySelector('div.content').classList.toggle('menu-open');
-      document.querySelector('nav').classList.toggle('menu-open');
-      return false;
-    };
-    </script>
+    </footer>
diff --git a/_jekyll/includes/head.html b/_jekyll/includes/head.html
@@ -15,6 +15,7 @@
     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
     <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
     <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
+    <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
 
     <style amp-custom>{% capture include_to_sassify %}{% include amp-custom.scss %}{% endcapture %}
     {{ include_to_sassify | scssify }}    </style>

diff --git a/_jekyll/includes/header.html b/_jekyll/includes/header.html
@@ -1,13 +1,17 @@
+    <amp-sidebar id='sidebar' side='right' layout='nodisplay'>
+      {% include nav.html %}
+    </amp-sidebar>
+
     <header class="fixed">
       <div class="wrap">
         <div class="container">
           <div class="clearfix">
           <div class="left-nav">
               <a href="https://ampproject.org" class="tab header-title">
-                Accelerated
+                <span>Accelerated
                 Mobile
                 Pages
-                Project
+                Project</span>
               </a>
             </div>
             <div class="right alt">
@@ -23,7 +27,7 @@
               <a class="tab desktop" href="/docs/get_started/about-amp.html">
                 {{ site.data.messages.locales[page.locale].menu.docs }}
               </a>
-              <a class="tab hamburger" id="menu-button" href="">&#x2261;</a>
+              <button class="tab hamburger" id="menu-button" on='tap:sidebar.toggle'>&#x2261;</button>
             </div>
           </div>
         </div>

diff --git a/_jekyll/sass/content.scss b/_jekyll/sass/content.scss
@@ -131,24 +131,15 @@ nav {
 }
 
 @include max-screen($mobile-breakpoint) {
-    nav {
-        -webkit-order: 1;
-        order: 1;
-        border-left: 2px solid #E6E6E6;
-        margin-left: 30px;
+    .container nav {
+        display: none;
+    }
+
+    amp-sidebar nav {
         margin-right: 0;
         border-right: none;
         margin-top: 0;
-        position: absolute;
-        top: 0;
-        right: 0;
-        transform: translate(243px, 0);
-        transition: all 0.25s ease;
-        will-change: transform;
-
-        &.menu-open {
-            transform: translate(0, 0);
-        }
-
+        padding-left: 36px;
     }
+
 }
diff --git a/_jekyll/sass/header.scss b/_jekyll/sass/header.scss
@@ -185,7 +185,14 @@ header {
   }
 
   .tab.hamburger {
-    font-size: 30px;
+    font-size: 50px;
+    line-height: 38px;
+    background: none;
+    border: none;
+    margin-top: 0;
+    padding-top: 0;
+    position: relative;
+    top: 4px;
     display: none;
   }
 
@@ -198,4 +205,13 @@ header {
       }
   }
 
+  @include max-screen($mobile-baby-breakpoint) {
+      .header-title span {
+        display: none;
+      }
+      .header-title::after {
+        content: "AMP";
+      }
+  }
+
 }