From 73595a2dbf970cee1809793148abdff2422601d4 Mon Sep 17 00:00:00 2001
From: Markus Birth <mbirth@gmail.com>
Date: Sun, 18 Feb 2018 23:32:04 +0100
Subject: [PATCH] Add drawer to switch between pages.

---
 assets/menu.coffee |  5 +++++
 index_main.php     | 22 ++++++++++++++++++++++
 menu.php           | 40 ++++++++++++++++++++++++++++++++++++++++
 timeline.php       |  5 +++++
 4 files changed, 72 insertions(+)
 create mode 100644 assets/menu.coffee
 create mode 100755 menu.php
diff --git a/assets/menu.coffee b/assets/menu.coffee
new file mode 100644
index 0000000..122cd5f
--- /dev/null
+++ b/assets/menu.coffee
@@ -0,0 +1,5 @@
+document.addEventListener 'DOMContentLoaded', (event) -> 
+
+    window.drawer = new mdc.drawer.MDCTemporaryDrawer document.querySelector '.mdc-drawer'
+    document.querySelector('.mdc-toolbar__menu-icon').addEventListener 'click', ->
+        drawer.open = true
diff --git a/index_main.php b/index_main.php
index 2a18adb..7905b84 100755
--- a/index_main.php
+++ b/index_main.php
@@ -10,6 +10,7 @@
   <link rel="stylesheet" href="assets/style.css"/>
   <script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script>
   <script type="text/javascript" src="assets/main.js"></script>
+  <script type="text/javascript" src="assets/menu.js"></script>
 </head>
 <body class="mdc-typography">
 <?php
@@ -38,6 +39,7 @@ $families = array_keys($allVars);
   <header class="mdc-toolbar mdc-toolbar--fixed">
     <div class="mdc-toolbar__row">
       <section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
+        <button class="material-icons mdc-toolbar__menu-icon">menu</button>
         <span class="mdc-toolbar__title">BlackBerry/TCL Firmware List</span>
       </section>
       <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
@@ -56,6 +58,9 @@ foreach ($families as $i => $family) {
       </section>
     </div>
   </header>
+
+  <?php include 'menu.php'; ?>
+
   <main>
     <div class="mdc-toolbar-fixed-adjust"></div>
 <?php
@@ -116,5 +121,22 @@ foreach ($allVars as $family => $models) {
     </div>
 
   </main>
+<!-- Piwik -->
+<script type="text/javascript">
+  var _paq = _paq || [];
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  _paq.push(["disableCookies"]);
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="//analytics.birth-online.de/";
+    _paq.push(['setTrackerUrl', u+'piwik.php']);
+    _paq.push(['setSiteId', '4']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<noscript><p><img src="//analytics.birth-online.de/piwik.php?idsite=4&rec=1" style="border:0;" alt="" /></p></noscript>
+<!-- End Piwik Code -->
 </body>
 </html>
diff --git a/menu.php b/menu.php
new file mode 100755
index 0000000..536097b
--- /dev/null
+++ b/menu.php
@@ -0,0 +1,40 @@
+<?php
+$menu_items = array(
+    array('index.php', 'view_agenda', 'Version Table'),
+    array('timeline.php', 'view_list', 'Version Timeline'),
+    '---',
+    array('https://github.com/mbirth/tcl_update_db', 'code', 'GitHub Source'),
+);
+$this_page = basename($_SERVER['SCRIPT_NAME']);
+?>
+
+<aside class="mdc-drawer mdc-drawer--temporary">
+  <nav class="mdc-drawer__drawer">
+    <header class="mdc-drawer__header">
+      <div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg">
+        BlackBerry/TCL Firmwares
+      </div>
+    </header>
+    <nav class="mdc-drawer__content mdc-list-group">
+        <div class="mdc-list">
+            <?php
+            foreach ($menu_items as $mi) {
+                if (is_array($mi)) {
+                    if ($mi[0] == $this_page) {
+                        echo '<a class="mdc-list-item  mdc-list-item--selected" href="#">' . PHP_EOL;
+                    } else {
+                        echo '<a class="mdc-list-item" href="' . $mi[0] . '">' . PHP_EOL;
+                    }
+                    echo '<i class="material-icons mdc-list-item__graphic" aria-hidden="true">' . $mi[1] . '</i>' . $mi[2] . PHP_EOL;
+                    echo '</a>' . PHP_EOL;
+                } elseif ($mi == '---') {
+                    echo '</div>' . PHP_EOL;
+                    echo '<hr class="mdc-list-divider"/>' . PHP_EOL;
+                    echo '<div class="mdc-list">' . PHP_EOL;
+                }
+            }
+            ?>
+      </div>
+    </nav>
+  </nav>
+</aside>
diff --git a/timeline.php b/timeline.php
index 86b3717..ad0de50 100755
--- a/timeline.php
+++ b/timeline.php
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="assets/material-icons.css"/>
   <link rel="stylesheet" href="assets/style.css"/>
   <script type="text/javascript" src="node_modules/material-components-web/dist/material-components-web.js"></script>
+  <script type="text/javascript" src="assets/menu.js"></script>
 </head>
 <body class="mdc-typography timeline">
 <?php
@@ -35,10 +36,14 @@ if (count($unknowns) > 0) {
   <header class="mdc-toolbar mdc-toolbar--fixed">
     <div class="mdc-toolbar__row">
       <section class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
+        <button class="material-icons mdc-toolbar__menu-icon">menu</button>
         <span class="mdc-toolbar__title">BlackBerry/TCL Firmware Timeline</span>
       </section>
     </div>
   </header>
+
+  <?php include 'menu.php'; ?>
+
   <main>
     <div class="mdc-toolbar-fixed-adjust"></div>
 <?php
