first commit paddle. create component

Thermo.Active/wwwroot/assets/styles/base/paddle.less

@@ -0,0 +1,123 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "grid-system.less";
+@import "colors.less";
+@import "fonts.less";
+
+
+    .hidden {
+        visibility: hidden;
+    }
+
+    button {
+        cursor: pointer;
+    }
+
+    /* remove blue outline */
+    button:focus {
+        outline: 0;
+    }
+
+    .burger-button {
+        position: relative;
+        height: 30px;
+        width: 32px;
+        display: block;
+        z-index: 999;
+        border: 0;
+        border-radius: 0;
+        background-color: transparent;
+        pointer-events: all;
+        transition: transform .6s cubic-bezier(.165,.84,.44,1);
+    }
+
+    .burger-bar {
+        background-color: #130f40;
+        position: absolute;
+        top: 50%;
+        right: 6px;
+        left: 6px;
+        height: 2px;
+        width: auto;
+        margin-top: -1px;
+        transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .3s cubic-bezier(.165,.84,.44,1),background-color .6s cubic-bezier(.165,.84,.44,1);
+    }
+
+    .burger-bar--1 {
+        -webkit-transform: translateY(-6px);
+        transform: translateY(-6px);
+    }
+
+    .burger-bar--2 {
+        transform-origin: 100% 50%;
+        transform: scaleX(.8);
+    }
+
+    .burger-button:hover .burger-bar--2 {
+        transform: scaleX(1);
+    }
+
+    .no-touchevents .burger-bar--2:hover {
+        transform: scaleX(1);
+    }
+
+    .burger-bar--3 {
+        transform: translateY(6px);
+    }
+
+    #burger.active .burger-button {
+        transform: rotate(-180deg);
+    }
+
+    #burger.active .burger-bar {
+        background-color: #fff;
+    }
+
+    #burger.active .burger-bar--1 {
+        transform: rotate(45deg)
+    }
+
+    #burger.active .burger-bar--2 {
+        opacity: 0;
+    }
+
+    #burger.active .burger-bar--3 {
+        transform: rotate(-45deg)
+    }
+
+
+
+
+
+    .slide-enter-active,
+    .slide-leave-active
+    {
+        transition: transform 0.2s ease;
+    }
+
+    .slide-enter,
+    .slide-leave-to {
+        transform: translateX(-100%);
+        transition: all 150ms ease-in 0s
+    }
+
+    .sidebar-backdrop {
+        background-color: rgba(0,0,0,.5);
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+    }
+
+    .sidebar-panel {
+        overflow-y: auto;
+        background-color: #130f40;
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 100vh;
+        z-index: 999;
+        padding: 3rem 20px 2rem 20px;
+        width: 300px;
+    }

Thermo.Active/wwwroot/src/App.ts

@@ -10,6 +10,8 @@ import { ModalContainer, ModalNcContainer } from "./modules/base-components";
 import { ModalHelper } from "@/components/modals"
 import { store, appModelActions, machineStatusActions } from "@/store";
 import { underTheHood } from "@/app_modules/under-the-hood";
+import Burger from "@/app_modules_thermo/components/paddle/burger.vue";
+import Sidebar from "@/app_modules_thermo/components/paddle/sidebar.vue";
 
 
 import * as iziToast from "izitoast";
@@ -30,6 +32,8 @@ declare var cmsClient;
     appFooter: Footer,
     modalContainer: ModalContainer,
     modalNcContainer: ModalNcContainer,
+    burger: Burger,
+    sidebar: Sidebar,
     alarmList,
     underTheHood,
   }

Thermo.Active/wwwroot/src/App.vue

@@ -12,6 +12,18 @@
       </div>
       <div id="main-view-handler" ref="main-view-handler" @click="toggleMainView()"  :class="{liftedUp : isMainViewLiftedUp,liftedDw : !isMainViewLiftedUp,'blur':(applyBlur || applyBlurNc)}">
 
+      <nav class="main-nav">
+        <burger></burger>
+      </nav>
+
+      <sidebar>
+        <ul class="sidebar-panel-nav">
+          <!-- <li><a href="#home">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#contact">Contact</a></li> -->
+        </ul>
+      </sidebar>
+
       <vue-gesture :type="'swipedown'" :call="toggleMainView" :onmove="movepanel" :onstart="onstartdrag" :onstop="onstopdrag">
         <div class="handle" :title="'header_tooltip_close_uth' | localize('Close under-the-hood area')" >
             <i class="fa fa-angle-double-down"></i>

Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/burger.ts

@@ -0,0 +1,13 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+
+@Component({name: 'burger'})
+export default class Burger extends Vue{
+
+    isBurgerActive: boolean = false;
+
+    toggle() {
+        debugger
+        this.isBurgerActive = !this.isBurgerActive;
+    }
+}

Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/burger.vue

@@ -0,0 +1,12 @@
+<template>
+    <div id="burger" :class="{ 'active' : isBurgerActive }" @click.prevent="toggle">
+        <slot>
+            <button type="button" class="burger-button" title="Menu">
+                <span class="burger-bar burger-bar--1"></span>
+                <span class="burger-bar burger-bar--2"></span>
+                <span class="burger-bar burger-bar--3"></span>
+            </button>
+        </slot>
+    </div>
+</template>
+<script lang="ts" src="./burger.ts"/>

Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts

@@ -0,0 +1,12 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+
+@Component({name: 'sidebar'})
+export default class Sidebar extends Vue{
+
+    isPanelOpen: boolean = true;
+
+    closeSidebarPanel() {
+        this.isPanelOpen = false;
+    }
+}

Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="sidebar">
+        <div class="sidebar-backdrop" @click="closeSidebarPanel" v-if="isPanelOpen"></div>
+        <transition name="slide">
+            <div v-if="isPanelOpen"
+                 class="sidebar-panel">
+                <slot></slot>
+            </div>
+        </transition>
+    </div>
+</template>
+<script lang="ts" src="./sidebar.ts" />