From 5979a6d0e5f9c119364d816b1133f3b2476b84ad Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Sat, 24 Nov 2018 17:32:22 -0800
Subject: [PATCH] Adds responsiveness for menu on left

---
 assets/App.vue    | 53 ++++++++++++++++++++++++++++++++++++++++-------
 assets/index.html |  2 +-
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/assets/App.vue b/assets/App.vue
index 60dff3199a9b..9efd9b1ed3cf 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -1,9 +1,17 @@
 <template lang="html">
   <div class="columns is-marginless">
-    <aside class="column menu is-2 section">
-      <h1 class="title has-text-warning">Dozzle</h1>
-      <p class="menu-label">Containers</p>
-      <ul class="menu-list">
+    <aside class="column menu is-2">
+      <a
+        role="button"
+        class="navbar-burger burger is-white is-hidden-tablet is-pulled-right"
+        @click="showNav = !showNav;"
+        :class="{ 'is-active': showNav }"
+      >
+        <span></span> <span></span> <span></span>
+      </a>
+      <h1 class="title has-text-warning is-marginless">Dozzle</h1>
+      <p class="menu-label is-hidden-mobile" :class="{ 'is-active': showNav }">Containers</p>
+      <ul class="menu-list is-hidden-mobile" :class="{ 'is-active': showNav }">
         <li v-for="item in containers">
           <router-link
             :to="{ name: 'container', params: { id: item.Id } }"
@@ -25,7 +33,8 @@ export default {
   name: "App",
   data() {
     return {
-      containers: []
+      containers: [],
+      showNav: false
     };
   },
   async created() {
@@ -34,10 +43,36 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.is-hidden-mobile.is-active {
+  display: block !important;
+}
+
+.navbar-burger {
+  height: 2.35rem;
+}
+
 aside {
   position: fixed;
-  padding-right: 0;
+  z-index: 2;
+  padding: 1em;
+
+  @media screen and (max-width: 768px) {
+    & {
+      position: sticky;
+      top: 0;
+      background: #222;
+    }
+
+    .tooltip::after,
+    .tooltip::before {
+      display: none !important;
+    }
+
+    .menu-label {
+      margin-top: 1em;
+    }
+  }
 }
 
 .hide-overflow {
@@ -45,4 +80,8 @@ aside {
   white-space: nowrap;
   overflow: hidden;
 }
+
+.burger.is-white {
+  color: #fff;
+}
 </style>
diff --git a/assets/index.html b/assets/index.html
index 25745a485bc4..fab3b6bd99cb 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -8,7 +8,7 @@
     <link href="styles.scss" rel="stylesheet" />
     <script>
       window["BASE_PATH"] = "{{ .Base }}";
-      window["SSL_ENABLED"] = "{{ .SSL }}".toLowerCase() == "true" ? true : false;
+      window["SSL_ENABLED"] = "{{ .SSL }}".toLowerCase() === "true";
     </script>
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
   </head>