ionic-team · mlynch · Jun 28, 2017 · Jun 27, 2017 · Jun 27, 2017 · Jun 28, 2017
diff --git a/lab/index.html b/lab/index.html
@@ -5,16 +5,21 @@
     <meta charset="utf-8">
     <link rel="icon" type="image/png" href="/ionic-lab/static/img/favicon.png" />
     <link rel="stylesheet" href="/ionic-lab/static/css/style.css" />
+    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
   </head>
   <body>
     <div id="app">
       <div id="header">
         <div id="header-left">
-          <a target="_blank" href="http://ionicframework.com/" id="logo">
+          <a href="#" id="menu-toggle">
+            <i class="icon ion-navicon-round"></i>
           </a>
+          <div id="logo">
+          </div>
         </div>
 
         <div id="header-right">
+          <a href="/" target="_blank" id="open-fullscreen">Open fullscreen <i class="icon ion-share"></i></a>
           <div class="dropdown">
             <button class="dropdown-toggle" type="button">Platforms <span class="dropdown-caret"></span></button>
             <ul class="dropdown-menu">
@@ -25,8 +30,32 @@
           </div>
         </div>
       </div>
-      <preview>
-      </preview>
+      <div id="main">
+        <div id="sidebar" class="hidden">
+          <div class="title">Quick reference</div>
+          <div class="close"><i class="icon ion-close-circled"></i></div>
+          <ul id="menu" class="menu">
+            <li><a>Components</a>
+              <ul id="components-menu">
+              </ul>
+            </li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/api">API Reference</a></li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/native">Ionic Native</a></li>
+            <li><a target="_blank" href="https://ionicframework.com/docs/">All Documentation</a></li>
+          </ul>
+          <div id="view-ad" class="ad">
+            <img class="logo" src="/ionic-lab/static/img/view-logo.jpg" style="height: 64px"/>
+            <div class="ad-content">
+              Test and share your app live on iOS and Android
+              with the Ionic View app!
+              <br>
+              <a href="http://view.ionic.io">Download View</a>
+            </div>
+          </div>
+        </div>
+        <preview>
+        </preview>
+      </div>
       <div id="footer">
         <div id="footer-left">
           <span id="app-info"></span>
@@ -87,6 +116,7 @@ <h2><div class="phone-icon"></div> <a href="/?ionicplatform=windows" target="_bl
         </div>
       </div>
     </template>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
     <script src="/ionic-lab/static/js/lab.js"></script>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/lab/static/css/style.css b/lab/static/css/style.css
@@ -11,7 +11,7 @@ html, body {
 }
 
 body {
-  background-color: #f8f9fb;
+  background-color: #242A31;
   font-family: 'AvenirNextLTPro-Regular', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
   padding: 0;
   margin: 0;
@@ -59,7 +59,7 @@ h2 a {
 }
 .dropdown:hover .dropdown-toggle {
   /* increase the hit box when hovering */
-  padding-left: 100px;
+  /*padding-left: 100px;*/
 }
 .dropdown:hover .dropdown-menu {
   display: block;
@@ -102,13 +102,35 @@ h2 a {
 #header {
   width: 100%;
   height: 50px;
-  background-color: white;
+  background-color: #151A21;
   box-shadow: 0px 1px 3px rgba(0,0,0, 0.15);
 }
+#header a {
+  color: #858D9B;
+  font-family: 'AvenirNextLTPro-Medium', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+  font-size: 13px;
+  text-decoration: none;
+  display: inline-block;
+  font-weight: bold;
+}
+#header .icon {
+  display: inline-block;
+  font-size: 22px;
+  vertical-align: middle;
+  margin-bottom: 3px;
+  margin-left: 3px;
+}
+#header .dropdown {
+  display: inline-block;
+}
+
 #header-left {
   float: left;
   line-height: 50px;
 }
+#header-left #menu-toggle {
+  margin-left: 13px;
+}
 #header a:hover {
   opacity: 1;
 }
@@ -120,7 +142,7 @@ h2 a {
 #footer {
   width: 100%;
   border-top: 1px solid rgba(0,0,0,0.06);
-  background-color: #f8f9fb;
+  background-color: #151A21;
 }
 #footer-left {
   float: left;
@@ -156,14 +178,29 @@ h2 a {
 #logo img {
   max-width: 100%;
 }
+
+preview {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  vertical-align: middle;
+  overflow: auto;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
 .phone {
   display: inline-block;
-  margin: 20px 20px 0 20px;
+  margin: 0px 20px 0 20px;
   vertical-align: middle;
 }
 .phone h2 {
   text-align: left;
   vertical-align: middle;
+  margin-top: 0;
 }
 .phone-icon {
   display: inline-block;
@@ -279,19 +316,108 @@ h2 a {
   position: absolute;
 }
 
-preview {
+#main {
+  display: flex;
+  flex-direction: row;
   flex: 1;
-  width: 100%;
-  display: block;
-  vertical-align: middle;
+}
+
+#sidebar {
+  position: relative;
+  z-index: 1;
+  background-color: #141A21;
+  height: 100%;
+  width: 300px;
+  box-sizing: border-box;
+  padding: 15px;
   overflow: auto;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  flex-direction: row;
 }
 
+#sidebar.hidden {
+  display: none;
+}
+
+#sidebar .close {
+  cursor: pointer;
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  color: #a2a9b4;
+  font-size: 24px;
+}
+
+#sidebar .title {
+  font-size: 20px;
+  margin-top: 5px;
+  color: white;
+}
+
+.menu {
+  padding: 0;
+  margin: 0;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+   -khtml-user-select: none; /* Konqueror HTML */
+     -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* Internet Explorer/Edge */
+          user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome and Opera */
+}
+.menu li {
+  list-style: none;
+  margin: 15px 0;
+}
+.menu li a {
+  color: #a2a9b4;
+  text-decoration: none;
+  cursor: pointer;
+}
+.menu > li > ul {
+  display: none;
+  padding: 0;
+  margin: 0;
+}
+.menu > li > ul li {
+  padding-left: 15px;
+}
+.menu > li.expanded > ul {
+  display: block;
+}
+.menu hr {
+  height: 1px;
+  border: 0;
+  background-color: #2b3642;
+}
+.menu .version {
+  color: #a2a9b4;
+  opacity: 0.5;
+  font-size: 12px;
+}
+
+#menu {
+}
+
+.ad {
+  background-color: #232A31;
+  cursor: pointer;
+  border-radius: 2px;
+  border: 1px solid #3f4650;
+  font-size: 13px;
+  color: white;
+  padding: 10px;
+  display: flex;
+  margin-top: 55px;
+}
+.ad .logo {
+  display: block;
+  margin-right: 15px;
+}
+.ad .content {
+  flex: 1;
+}
+.ad a {
+  color: #308EFD;
+}
 
 @media screen and (max-height: 800px) {
   #header {

diff --git a/lab/static/img/view-logo.jpg b/lab/static/img/view-logo.jpg
diff --git a/lab/static/js/lab.js b/lab/static/js/lab.js
@@ -2,6 +2,79 @@ var $ = document.querySelector.bind(document);
 
 var API_ROOT = '/ionic-lab/api/v1';
 
+var APP_CONFIG = {}
+
+function loadAppConfig() {
+  var req = new XMLHttpRequest();
+  req.addEventListener('load', function(e) {
+    setAppConfig(JSON.parse(req.response));
+  })
+  req.open('GET', API_ROOT + '/app-config', true)
+  req.send(null);
+}
+
+function setAppConfig(data) {
+  APP_CONFIG = data;
+}
+
+
+function buildMenu() {
+  buildComponentsMenu();
+  const sidebar = $('#sidebar');
+  const topLevels = sidebar.querySelectorAll('#menu > li > a');
+
+  const lastMenuConfig = window.localStorage.getItem('ionic_labmenu');
+  if(lastMenuConfig === 'true' || lastMenuConfig === null) {
+    sidebar.classList.remove('hidden');
+  }
+
+  Array.prototype.map.call(topLevels, a => {
+    if(!a.href) {
+      a.addEventListener('click', e => {
+        if(a.parentNode.classList.contains('expanded')) {
+          a.parentNode.classList.remove('expanded');
+        } else {
+          a.parentNode.classList.add('expanded');
+        }
+        e.preventDefault();
+      });
+    }
+  })
+
+  $('#view-ad').addEventListener('click', (e) => {
+    var win = window.open('http://view.ionic.io/', '_blank');
+    win.focus();
+  })
+
+  const toggleMenu = e => {
+    if(sidebar.classList.contains('hidden')) {
+      sidebar.classList.remove('hidden');
+      window.localStorage.setItem('ionic_labmenu', 'true');
+    } else {
+      sidebar.classList.add('hidden');
+      window.localStorage.setItem('ionic_labmenu', 'false');
+    }
+  }
+
+  $('#menu-toggle').addEventListener('click', toggleMenu);
+  $('#sidebar .close').addEventListener('click', toggleMenu);
+}
+
+function buildComponentsMenu() {
+  var items = [{"href":"http://ionicframework.com/docs/components/#overview","title":"Overview"},{"href":"http://ionicframework.com/docs/components/#action-sheets","title":"Action Sheets"},{"href":"http://ionicframework.com/docs/components/#alert","title":"Alerts"},{"href":"http://ionicframework.com/docs/components/#badges","title":"Badges"},{"href":"http://ionicframework.com/docs/components/#buttons","title":"Buttons"},{"href":"http://ionicframework.com/docs/components/#cards","title":"Cards"},{"href":"http://ionicframework.com/docs/components/#checkbox","title":"Checkbox"},{"href":"http://ionicframework.com/docs/components/#datetime","title":"DateTime"},{"href":"http://ionicframework.com/docs/components/#fabs","title":"FABs"},{"href":"http://ionicframework.com/docs/components/#gestures","title":"Gestures"},{"href":"http://ionicframework.com/docs/components/#grid","title":"Grid"},{"href":"http://ionicframework.com/docs/components/#icons","title":"Icons"},{"href":"http://ionicframework.com/docs/components/#inputs","title":"Inputs"},{"href":"http://ionicframework.com/docs/components/#lists","title":"Lists"},{"href":"http://ionicframework.com/docs/components/#loading","title":"Loading"},{"href":"http://ionicframework.com/docs/components/#menus","title":"Menus"},{"href":"http://ionicframework.com/docs/components/#modals","title":"Modals"},{"href":"http://ionicframework.com/docs/components/#navigation","title":"Navigation"},{"href":"http://ionicframework.com/docs/components/#popovers","title":"Popover"},{"href":"http://ionicframework.com/docs/components/#radio","title":"Radio"},{"href":"http://ionicframework.com/docs/components/#range","title":"Range"},{"href":"http://ionicframework.com/docs/components/#searchbar","title":"Searchbar"},{"href":"http://ionicframework.com/docs/components/#segment","title":"Segment"},{"href":"http://ionicframework.com/docs/components/#select","title":"Select"},{"href":"http://ionicframework.com/docs/components/#slides","title":"Slides"},{"href":"http://ionicframework.com/docs/components/#tabs","title":"Tabs"},{"href":"http://ionicframework.com/docs/components/#toast","title":"Toast"},{"href":"http://ionicframework.com/docs/components/#toggle","title":"Toggle"},{"href":"http://ionicframework.com/docs/components/#toolbar","title":"Toolbar"}];
+
+  const componentsMenu = $('#components-menu');
+  items.map(i => {
+    const l = document.createElement('li')
+    const a = document.createElement('a')
+    a.href = i.href
+    a.target = "_blank";
+    a.innerText = i.title
+    l.appendChild(a)
+    componentsMenu.appendChild(l)
+  })
+}
+
 function tryShowViewPopup() {
   var view = window.localStorage.getItem('ionic_viewpop');
 
@@ -106,7 +179,10 @@ function loadCordova() {
   req.send(null);
 }
 
+//loadSearchIndex();
+loadAppConfig();
+buildMenu();
 showLastDevices();
 loadCordova();
 bindToggles();
-tryShowViewPopup();
+//tryShowViewPopup();
diff --git a/src/dev-server/http-server.ts b/src/dev-server/http-server.ts
@@ -18,7 +18,7 @@ import * as Constants from '../util/constants';
 import { getBooleanPropertyValue } from '../util/helpers';
 import { getProjectJson, IonicProject } from '../util/ionic-project';
 
-import { LabAppView, ApiCordovaProject } from './lab';
+import { LabAppView, ApiCordovaProject, ApiPackageJson } from './lab';
 
 
 /**
@@ -40,6 +40,7 @@ export function createHttpServer(config: ServeConfig): express.Application {
   app.use(IONIC_LAB_URL + '/static', express.static(path.join(__dirname, '..', '..', 'lab', 'static')));
   app.get(IONIC_LAB_URL, LabAppView);
   app.get(IONIC_LAB_URL + '/api/v1/cordova', ApiCordovaProject );
+  app.get(IONIC_LAB_URL + '/api/v1/app-config', ApiPackageJson);
 
   app.get('/cordova.js', servePlatformResource, serveMockCordovaJS);
   app.get('/cordova_plugins.js', servePlatformResource);

diff --git a/src/dev-server/lab.ts b/src/dev-server/lab.ts
@@ -16,3 +16,11 @@ export let ApiCordovaProject = (req: any, res: any) => {
     res.json(config);
   });
 };
+
+export let ApiPackageJson = (req: any, res: any) => {
+  res.sendFile(path.join(process.cwd(), 'package.json'), {
+    headers: {
+      'content-type': 'application/json'
+    }
+  })
+};