LeftSideBar

src/App.vue

@@ -1,32 +1,227 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div class="left-panel" 
+        :class="{'left-panel-closed': leftPanelClosed}">
+      <LeftPanel></LeftPanel>
+    </div>
+    <div class="content w-100" 
+        :class="{'content-when-left-panel-open': !leftPanelClosed}">
+      <div class="vertical-panel"
+          :class="{'vertical-panel-when-left-panel-open': !leftPanelClosed}"></div>
+      <div class="close-btn"
+          :class="{'close-btn-when-left-panel-open': !leftPanelClosed,
+                   'close-btn-hover': leftPanelClosed}"
+          @click="switchLeftPanel()">
+          <LottieAnimation
+            class="close-btn-icon"
+            path="./animations/menu-close2.json"
+           :width="30"
+           :autoPlay="false"
+           :loop="false"
+           @AnimControl="setAnimController"
+            ref="close-icon"></LottieAnimation>
+          <span class="close-btn-label"
+               :class="{'close-btn-label-when-left-panel-open': !leftPanelClosed}">MENU</span>
+      </div>
+      <router-view class="w-100 content-body"
+                  :class="{'content-body-when-left-panel-open': !leftPanelClosed}"
+                   style="min-height: 100vh"
+                  :leftPanelClosed="leftPanelClosed"/>
     </div>
-    <router-view/>
   </div>
 </template>
 
+<script lang="ts">
+import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
+
+import LeftPanel from '@/components/LeftPanel.vue'
+
+import LottieAnimation from "lottie-vuejs/src/LottieAnimation.vue";
+
+interface AnimData {
+  direction: number;
+  currentTime: number;
+  totalTime: number;
+}
+
+interface IAnimController {
+  addEventListener(event: string, foo: (data: any) => void): void;
+
+  play(): void;
+  pause(): void;
+  setSpeed(speed: number): void;
+  setDirection(direction: 1 | -1): void;
+}
+
+interface ILottieAnimation {
+  anim: IAnimController;
+}
+
+
+@Component({
+  components: {
+    LeftPanel,
+    LottieAnimation
+  },
+})
+export default class App extends Vue {
+  public leftPanelClosed: boolean = true;
+
+  @Ref('close-icon') public readonly closeIcon!: ILottieAnimation;
+
+  setAnimController(controller: IAnimController) {
+    controller.addEventListener("enterFrame", this.onEnterFrame)
+  }
+
+  onEnterFrame(data: AnimData) {
+    if (data.direction === 1 && data.currentTime >= data.totalTime / 2)
+      this.closeIcon.anim.pause();
+  }
+
+  switchLeftPanel() {
+    this.closeIcon.anim.setSpeed(1.2);
+
+    if (this.leftPanelClosed) {
+      this.closeIcon.anim.setDirection(1);
+      this.closeIcon.anim.play();
+    } else {
+      this.closeIcon.anim.setDirection(-1);
+      this.closeIcon.anim.play();
+    }
+
+    this.leftPanelClosed = !this.leftPanelClosed;
+  }
+}
+</script>
+
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Open+Sans&display=swap');
+
+body, #app {
+  min-height: 100vh;
+  overflow-x: hidden;
+  font-family: 'Lato', sans-serif;
+  letter-spacing: 1px;
+  font-weight: 700;
+  background-color: black;
 }
 
-#nav {
-  padding: 30px;
+.close-btn-hover:hover {
+  background-color: white!important;
 }
 
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
+.vertical-panel {
+  position: absolute;
+  height: 0px;
+  width: 0px;
 }
 
-#nav a.router-link-exact-active {
-  color: #42b983;
+.content-body {
+  transition: background-color linear .3s;
+}
+
+.content-body-when-left-panel-open {
+  transition: margin-left linear .3s;
+  margin-left: 58px;
+  opacity: 0.5;
+}
+
+@media (max-width: 961px) {
+  .close-btn {
+    position: absolute;
+    width: 100%;
+    height: 50px;
+    outline: none!important;
+    background-color: black!important;
+    transition: background-color linear .3s;
+    opacity: 1!important;
+  }
+
+  .close-btn-when-left-panel-open {
+    background-color: black!important;
+    transition: background-color linear .3s;
+  }
+
+  .close-btn-icon {
+    position: absolute;
+    left: 14px;
+    z-index: 2;
+  }
+
+  .close-btn-label {
+    position: absolute;
+    font-size: 13px;
+    font-weight: 400;
+    color: white;
+    top: 14px;
+    left: 60px;
+  }
+
+  .vertical-panel-when-left-panel-open {
+    position: absolute;
+    width: 58px;
+    height: 100%;
+    background: white!important;
+    z-index: 1;
+  }
+
+  .close-btn-label-when-left-panel-open {
+    color: black;
+  }
+
+  .content-when-left-panel-open {
+    margin-left: 192px;
+  }
+}
+
+@media (min-width: 960px) {
+  .close-btn {
+    position: absolute;
+    width: 58px;
+    height: 100%;
+    outline: none!important;
+    background-color: rgba(0, 0, 0, 0.7)!important;
+    transition: background-color linear .3s;
+    opacity: 1!important;
+  }
+
+  .close-btn-when-left-panel-open {
+    background-color: white!important;
+    transition: background-color linear .3s;
+  }
+
+  .close-btn-icon {
+    position: absolute;
+    left: 14px;
+  }
+
+  .close-btn-label {
+    position: absolute;
+    font-size: 12px;
+    font-weight: 300;
+    color: white;
+    top: calc(49% + 20px);
+    left: 10px;
+  }
+
+  .content-when-left-panel-open {
+    margin-left: 192px;
+  }
+}
+
+.left-panel {
+  position: absolute;
+  width: 192px;
+  background-color: white;
+  transition: margin-left linear .3s;
+}
+
+.left-panel-closed {
+  margin-left: -192px;
+}
+
+.content {
+  transition: margin-left linear .3s;
+  min-height: 100vh;
 }
 </style>