diff --git a/Thermo.Active/wwwroot/assets/styles/base/layout.less b/Thermo.Active/wwwroot/assets/styles/base/layout.less
index 61a41d28..41dc93ab 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/layout.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/layout.less
@@ -8,6 +8,7 @@
 @import "slider.less";
 @import "tastierino.less";
 @import "circlegantt.less";
+@import "paddle.less";
 @import "arretramento-riscaldi.less";
 @import "avvio-prod.less";
 @import "ciclo.less";
diff --git a/Thermo.Active/wwwroot/assets/styles/base/paddle.less b/Thermo.Active/wwwroot/assets/styles/base/paddle.less
new file mode 100644
index 00000000..3f303985
--- /dev/null
+++ b/Thermo.Active/wwwroot/assets/styles/base/paddle.less
@@ -0,0 +1,161 @@
+// out: false, sourceMap: false, main: ../style.less
+@import "grid-system.less";
+@import "colors.less";
+@import "fonts.less";
+
+html {
+    height: 100%;
+    overflow:hidden;
+  }
+ 
+  body {
+    border: 0; margin: 0; padding: 0;
+    font-family: 'Lato';
+    height: 100%;
+    background: rgb(101,31,87);
+    background: linear-gradient(45deg, rgba(101,31,87,1) 0%, rgba(225,113,87,1) 48%, rgba(249,248,113,1) 100%);
+  }
+ 
+  .logo {
+    align-self: center;
+    color: #fff;
+    font-weight: bold;
+    font-family: 'Lato'
+  }
+ 
+  .main-nav {
+    // display: flex;
+    // justify-content: space-between;
+    // padding: 0.5rem 0.8rem;
+    // float: left;
+    padding: 0.5rem 0.8rem;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+ 
+  ul.sidebar-panel-nav {
+    list-style-type: none;
+  }
+ 
+  ul.sidebar-panel-nav > li > a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 1.5rem;
+    display: block;
+    padding-bottom: 0.5em;
+  }
+
+  .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;
+        right: 0;
+        top: 0;
+        height: 100vh;
+        z-index: 999;
+        padding: 3rem 20px 2rem 20px;
+        width: 300px;
+    }
+
+    .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: 9999;
+        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)
+    }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 68ddc941..a86bb527 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4444,6 +4444,137 @@
   grid-column: 0.8;
   grid-row: 0.5;
 }
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato';
+  height: 100%;
+  background: #651f57;
+  background: linear-gradient(45deg, #651f57 0%, #e17157 48%, #f9f871 100%);
+}
+.logo {
+  align-self: center;
+  color: #fff;
+  font-weight: bold;
+  font-family: 'Lato';
+}
+.main-nav {
+  padding: 0.5rem 0.8rem;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+ul.sidebar-panel-nav {
+  list-style-type: none;
+}
+ul.sidebar-panel-nav > li > a {
+  color: #fff;
+  text-decoration: none;
+  font-size: 1.5rem;
+  display: block;
+  padding-bottom: 0.5em;
+}
+.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, 0.5);
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+}
+.sidebar-panel {
+  overflow-y: auto;
+  background-color: #130f40;
+  position: fixed;
+  right: 0;
+  top: 0;
+  height: 100vh;
+  z-index: 999;
+  padding: 3rem 20px 2rem 20px;
+  width: 300px;
+}
+.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: 9999;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  pointer-events: all;
+  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.burger-bar {
+  background-color: #130f40;
+  position: absolute;
+  top: 50%;
+  right: 6px;
+  left: 6px;
+  height: 2px;
+  width: auto;
+  margin-top: -1px;
+  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.burger-bar--1 {
+  -webkit-transform: translateY(-6px);
+  transform: translateY(-6px);
+}
+.burger-bar--2 {
+  transform-origin: 100% 50%;
+  transform: scaleX(0.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);
+}
+
 .circle-gantt {
   height: 70px;
 }
diff --git a/Thermo.Active/wwwroot/src/App.ts b/Thermo.Active/wwwroot/src/App.ts
index a07e2fcd..5c6f93b3 100644
--- a/Thermo.Active/wwwroot/src/App.ts
+++ b/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,
   }
diff --git a/Thermo.Active/wwwroot/src/App.vue b/Thermo.Active/wwwroot/src/App.vue
index c8bf1de2..81a772df 100644
--- a/Thermo.Active/wwwroot/src/App.vue
+++ b/Thermo.Active/wwwroot/src/App.vue
@@ -7,7 +7,6 @@
       <under-the-hood :class="{'blur':(applyBlur || applyBlurNc)}"></under-the-hood>
       <div id="main-view" ref="main-view" :class="{liftedUp : isMainViewLiftedUp,'blur':(applyBlur || applyBlurNc)}" >
         <router-view  :class="{'blur':applyBlurInternal}" />
-
         <modal-container name="modal" container-name="modal-internal" :inform-hmi="false" ></modal-container>
       </div>
       <div id="main-view-handler" ref="main-view-handler" @click="toggleMainView()"  :class="{liftedUp : isMainViewLiftedUp,liftedDw : !isMainViewLiftedUp,'blur':(applyBlur || applyBlurNc)}">
@@ -18,6 +17,17 @@
         </div>
       </vue-gesture>
       </div>
+      <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>
       <app-footer :class="{'blur':(applyBlur || applyBlurNc)}"></app-footer>
 
     </div>
diff --git a/Thermo.Active/wwwroot/src/app_modules/alarms/components/alarms-list.ts b/Thermo.Active/wwwroot/src/app_modules/alarms/components/alarms-list.ts
index b7c65ea8..9498dd8f 100644
--- a/Thermo.Active/wwwroot/src/app_modules/alarms/components/alarms-list.ts
+++ b/Thermo.Active/wwwroot/src/app_modules/alarms/components/alarms-list.ts
@@ -133,7 +133,7 @@ export default class alarmsList extends Vue {
 
   public get opened(): boolean {
     return this.$store.state.alarms.opened;
-  }
+  } 
 
   public get serviceOpened(): boolean {
     return this.$store.state.alarms.serviceOpened;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/burger.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/burger.ts
new file mode 100644
index 00000000..3d15b9fb
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/burger.ts
@@ -0,0 +1,17 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import {paddleActions} from '@/store/paddle.store.ts';
+
+@Component({name: 'burger'})
+export default class Burger extends Vue{
+
+    isBurgerActive(){
+        
+        return this.$store.state.paddle.isNavOpen;
+    }
+
+    togglePaddle() {
+        
+        paddleActions.Toggle(this.$store);
+    }
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/burger.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/burger.vue
new file mode 100644
index 00000000..f8db1648
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/burger.vue
@@ -0,0 +1,12 @@
+<template>
+    <div id="burger" :class="{ 'active' : isBurgerActive() }" @click="togglePaddle()">
+        <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"/>
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
new file mode 100644
index 00000000..c89058a2
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.ts
@@ -0,0 +1,17 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import {paddleActions} from '@/store/paddle.store';
+
+@Component({name: 'sidebar'})
+export default class Sidebar extends Vue{
+
+    isPanelOpen(){
+        
+        return this.$store.state.paddle.isNavOpen;
+    }
+
+    closeSidebarPanel() {
+        
+        paddleActions.Toggle(this.$store);
+    }
+}
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
new file mode 100644
index 00000000..7b76dfad
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
@@ -0,0 +1,11 @@
+<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" />
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.ts
index ca8f6fe5..77c14bdb 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.ts
@@ -11,12 +11,63 @@ import toggleButton from "@/components/toggleButton.vue";
 })
 export default class RiscaldiSuperiori extends Vue {
 
-  @Prop({ default: 0 })
-  ritardo: number;
-  @Prop({ default: 0 })
-  durata: number;
+  recipe:Recipe.IRecipe={
+    heats_upperheaters_max_time:{
+        range:{
+            min:4,
+            max:165
+        },
+        status:{
+            enabled:true,
+            visible:true,
+            hasError:false
+        },
+        unitMeasure:"",
+        valueAct:159
+    },
 
+    heats_upperheaters_movement_enabled:{
+      range:{
+          min:5,
+          max:157
+      },
+      status:{
+          enabled:true,
+          visible:true,
+          hasError:false
+      },
+      unitMeasure:"",
+      valueAct:71
+  },
+
+  heats_upperheaters_enabled:{
+    range:{
+        min:8,
+        max:192
+    },
+    status:{
+        enabled:true,
+        visible:true,
+        hasError:false
+    },
+    unitMeasure:"",
+    valueAct:171
+  },
+
+  heats_upperheaters_oscillation:{
+    range:{
+        min:4,
+        max:150
+    },
+    status:{
+        enabled:true,
+        visible:true,
+        hasError:false
+    },
+    unitMeasure:"",
+    valueAct:138
+  },
+  
+}
 
-  mockD: number = this.durata;
-  mockR: number = this.ritardo;
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue
index 30263782..7a845839 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/riscaldi-superiori.vue
@@ -8,9 +8,14 @@
 
 			<div class="input-area">
 				<label>Durata massima</label>
-			    <input class="rect" v-model="mockD">
+			    <input class="rect" v-model="recipe.heats_upperheaters_max_time.valueAct">
 			</div>
-			<slider :min="40" :max="100" v-model="mockD" :unit-of-measure="'s'"></slider>
+			<slider 
+				:min="recipe.heats_upperheaters_max_time.range.min" 
+				:max="recipe.heats_upperheaters_max_time.range.max" 
+				v-model="recipe.heats_upperheaters_max_time.valueAct" 
+				:unit-of-measure="'s'">
+			</slider>
 
 			<div class="input-area">
 				<label>Setpoint ceramica</label>
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.ts b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.ts
index bc44c56c..174bd92a 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.ts
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.ts
@@ -7,11 +7,105 @@ import toggleButton from "@/components/toggleButton.vue";
 @Component({ name: "sostdecomp", components: { slider: Slider, toggleButton } })
 export default class SostDecomp extends Vue {
 
-  @Prop({ default: 0 })
-  portata: number;
-  @Prop({ default: 0 })
-  duratamin: number;
+  recipe:Recipe.IRecipe={
+    heats_decomsustain_type:{
+        range:{
+            min:4,
+            max:111
+        },
+        status:{
+            enabled:true,
+            visible:true,
+            hasError:false
+        },
+        unitMeasure:"",
+        valueAct:86
+    },
+  
+    heats_decomsustain_decompression_flow:{
+      range:{
+          min:9,
+          max:105
+      },
+      status:{
+          enabled:true,
+          visible:true,
+          hasError:false
+      },
+      unitMeasure:"",
+      valueAct:35
+  },
+  
+  heats_decomsustain_min_blowing_time:{
+    range:{
+        min:0,
+        max:127
+    },
+    status:{
+        enabled:true,
+        visible:true,
+        hasError:false
+    },
+    unitMeasure:"",
+    valueAct:63
+  },
+
+  heats_decomsustain_sustain_delay:{
+    range:{
+        min:6,
+        max:198
+    },
+    status:{
+        enabled:true,
+        visible:true,
+        hasError:false
+    },
+    unitMeasure:"",
+    valueAct:159
+  },
+
+  heats_decomsustain_decompression_delay:{
+    range:{
+        min:1,
+        max:163
+    },
+    status:{
+        enabled:true,
+        visible:true,
+        hasError:false
+    },
+    unitMeasure:"",
+    valueAct:26
+  },
+
+  heats_decomsustain_decompression_duration:{
+    range:{
+        min:6,
+        max:108
+    },
+    status:{
+        enabled:true,
+        visible:true,
+        hasError:false
+    },
+    unitMeasure:"",
+    valueAct:72
+  },
+
+  heats_decomsustain_smoke_function_enabled:{
+    range:{
+        min:5,
+        max:132
+    },
+    status:{
+        enabled:true,
+        visible:true,
+        hasError:false
+    },
+    unitMeasure:"",
+    valueAct:89
+  },
+
+}
 
-  mockP: number = this.portata;
-  mockDM: number = this.duratamin;
 }
\ No newline at end of file
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.vue
index ca9fe711..abde5e07 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/sostentamento-decompressione.vue
@@ -9,14 +9,24 @@
 			</div>
 			<div class="input-area">
 				<label>Portata sostentamento</label>
-			    <input class="rect" v-model="mockP">
+			    <input class="rect" v-model="recipe.heats_decomsustain_decompression_flow.valueAct">
 			</div>
-			<slider :min="0" :max="100" v-model="mockP" :unit-of-measure="'%'"></slider>
+			<slider 
+				:min="recipe.heats_decomsustain_decompression_flow.range.min" 
+				:max="recipe.heats_decomsustain_decompression_flow.range.max" 
+				v-model="recipe.heats_decomsustain_decompression_flow.valueAct" 
+				:unit-of-measure="'%'">
+			</slider>
 			<div class="input-area">
 				<label>Durata minima soffio</label>
-			    <input class="rect" v-model="mockDM">
+			    <input class="rect" v-model="recipe.heats_decomsustain_min_blowing_time.valueAct">
 			</div>
-			<slider :min="0" :max="800" v-model="mockDM" :unit-of-measure="'ms'"></slider>
+			<slider 
+				:min="recipe.heats_decomsustain_min_blowing_time.range.min" 
+				:max="recipe.heats_decomsustain_min_blowing_time.range.max" 
+				v-model="recipe.heats_decomsustain_min_blowing_time.valueAct" 
+				:unit-of-measure="'ms'">
+			</slider>
 			<div class="input-area">
 				<label>Funzione "fumo"</label>
 				<toggle-button></toggle-button>
diff --git a/Thermo.Active/wwwroot/src/store/app.store.ts b/Thermo.Active/wwwroot/src/store/app.store.ts
index a8fe29a1..1c3f4dd0 100644
--- a/Thermo.Active/wwwroot/src/store/app.store.ts
+++ b/Thermo.Active/wwwroot/src/store/app.store.ts
@@ -4,6 +4,7 @@ import Vuex, { Store } from 'vuex'
 import { machineInfoStore, MachineInfoModel } from "./machineInfo.store";
 import { machineStatusStore, MachineStatusModel } from "./machineStatus.store";
 import { alarmsStore, AlarmsModel } from "./alarms.store";
+import { paddleStore, PaddleModel } from "./paddle.store";
 import { processStore, RunningProcessModel } from "./runningProcess.store";
 import { localizationStore, LocalizationModel, localizationModelActions } from "./localization.store";
 import { toolingStore, ToolingStoreModel } from "./tooling.store";
@@ -25,6 +26,7 @@ export interface AppModel {
   isMainViewLiftedUp: boolean;
   isFavSoftkeySelection: boolean;
 
+  paddle: PaddleModel;
   machineInfo: MachineInfoModel;
   machineStatus: MachineStatusModel;
 
@@ -68,6 +70,7 @@ const _store = {
 
   modules: {
     // Sottomoduli dello store
+    paddle: paddleStore,
     machineInfo: machineInfoStore,
     machineStatus: machineStatusStore,
     process: processStore,
diff --git a/Thermo.Active/wwwroot/src/store/index.ts b/Thermo.Active/wwwroot/src/store/index.ts
index f7e6e9a6..6860fe59 100644
--- a/Thermo.Active/wwwroot/src/store/index.ts
+++ b/Thermo.Active/wwwroot/src/store/index.ts
@@ -1,5 +1,6 @@
 import { store, AppModel, appModelActions } from "./app.store";
 import { machineInfoActions, MachineInfoModel } from "./machineInfo.store";
+import { paddleActions, PaddleModel } from "./paddle.store"
 import { machineStatusActions, MachineStatusModel, buttonStatus } from "./machineStatus.store";
 import { AlarmsModel, alarmsModelActions, alarmsStore, AlarmModel } from "./alarms.store";
 import { processModelActions, processStore, RunningProcessModel } from "./runningProcess.store";
@@ -14,6 +15,8 @@ export {
     machineInfoActions,
     MachineInfoModel,
     machineStatusActions,
+    paddleActions,
+    PaddleModel,
     MachineStatusModel,
     AlarmsModel,
     alarmsModelActions,
diff --git a/Thermo.Active/wwwroot/src/store/paddle.store.ts b/Thermo.Active/wwwroot/src/store/paddle.store.ts
new file mode 100644
index 00000000..f74b748e
--- /dev/null
+++ b/Thermo.Active/wwwroot/src/store/paddle.store.ts
@@ -0,0 +1,26 @@
+
+export interface PaddleModel {
+    isNavOpen: boolean
+  }
+
+export const paddleStore={
+    state:{
+        isNavOpen:false
+    } as PaddleModel,
+    mutations: {
+        toggleNav(state){
+            state.isNavOpen=!state.isNavOpen
+        }
+    },
+    actions:{
+        Toggle(context){
+            context.commit("toggleNav");
+        }
+    }
+}
+
+export const paddleActions = paddleStore.actions; 
+
+
+
+