Adds responsiveness for menu on left

amir20 · Nov 25, 2018 · 5979a6d · 5979a6d
1 parent ca2c46f
commit 5979a6d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git 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,15 +43,45 @@ 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 {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
+
+.burger.is-white {
+  color: #fff;
+}
 </style>
diff --git 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>