From 79f094066e0f3ea91afcf38dc3acc3cf467c5db1 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Thu, 7 Feb 2019 16:47:09 +0000
Subject: [PATCH] Added sidebar toggle

---
 src/App.vue                                   | 71 ++++++++++++++++++-
 .../paneConnectComponents/hostInput.vue       |  1 -
 src/components/panelLeft.vue                  | 10 +--
 3 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 53ed662e..85d43cc0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,19 @@
 <template>
   <div id="app">
-    <panelLeft/>
+    <div v-bind:class="responsiveToggleButton" id="overlay-toggle">
+      <a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
+    </div>
+    <div uk-grid class="uk-height-1-1" margin=0>
+      <div v-bind:class="responsivePanelLeft" class="toggle-hidden uk-card uk-card-default uk-card-body uk-padding-remove-top uk-padding-remove-right uk-width-auto uk-height-1-1">
+        <div class="uk-card-header">
+            <h3 class="uk-card-title"><b>OpenFlexure</b> Microscope</h3>
+        </div>
+        <panelLeft/>
+      </div>
+      <div class="uk-width-expand">
+        <div class="uk-card uk-card-default uk-card-body uk-height-1-1">Width: {{ window.width }}</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -19,9 +32,51 @@ import panelLeft from './components/panelLeft.vue'
 // Export main app
 export default {
   name: 'app',
+
   components: {
     panelLeft
+  },
+
+  data: function () {
+    return {
+      window: {
+        width: 0,
+        height: 0
+      }
+    }  
+  },
+
+  created: function () {
+    window.addEventListener('resize', this.handleResize)
+    this.handleResize();
+  },
+
+  beforeDestroy: function () {
+    window.removeEventListener('resize', this.handleResize)
+  },
+
+  methods: {
+    handleResize: function(event) {
+      this.window.width = window.innerWidth;
+      this.window.height = window.innerHeight;
+    }
+  },
+
+  computed: {
+    // Stylises the hostname input box based on connection status
+    responsivePanelLeft: function () {
+      return {
+        //'uk-hidden': this.window.width<850,
+        'overlay-panel': this.window.width<850
+      }
+    },
+    responsiveToggleButton: function () {
+      return {
+        //'uk-hidden': this.window.width>=850,
+      }
+    }
   }
+
 }
 </script>
 
@@ -42,4 +97,18 @@ body, html {
   height: 100%
 }
 
+.overlay-panel {
+  position: fixed;
+  z-index: 99;
+}
+
+#overlay-toggle {
+  width: 30px;
+  height: 30px;
+  position: fixed;
+  right: 0;
+  margin: 20px;
+  z-index: 999
+}
+
 </style>
diff --git a/src/components/paneConnectComponents/hostInput.vue b/src/components/paneConnectComponents/hostInput.vue
index cd3011cb..e3cb633b 100644
--- a/src/components/paneConnectComponents/hostInput.vue
+++ b/src/components/paneConnectComponents/hostInput.vue
@@ -65,6 +65,5 @@ export default {
 <style scoped lang="less">
 .host-input {
   text-align: left;
-  width: 300px
 }
 </style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 26bad493..0fbe2382 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="panelLeft">
+  <div id="panelLeft" class="uk-margin-remove uk-padding-remove">
     <ul class="uk-flex-center" uk-tab>
       <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="Connect"></a></li>
       <li><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
@@ -7,7 +7,7 @@
       <li><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
       <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li>
     </ul>
-    <ul class="uk-switcher uk-margin">
+    <ul class="uk-switcher uk-padding-small panel-content">
       <li><paneConnect/></li>
     </ul>
   </div>
@@ -28,12 +28,12 @@ export default {
 
 <style lang="less">
 #panelLeft {
-  width: 300px;
   height:100%;
-  padding: 0 20px 0 20px;
-  background-color: #fafafa
 }
 .uk-tab {
     padding-left: 0;
 }
+.panel-content {
+  width: 300px;
+}
 </style>