Adding mixins to display hamburger menu

src/_mixins.scss

+@mixin sm {
+  @media (max-width: 1200px) {
+    @content
+  }
+}
+
+@mixin md {
+  @media (min-width: 1200px) {
+    @content
+  }
+}
\ No newline at end of file

src/features/topBar/TopBar.vue

@@ -69,11 +69,17 @@ setInterval(() => {
                 <TopActionButton icon="icon-play" text="Aperçu" position="right" :disabled="editorStore.loadingPreview" @click="editorService.runPreviewAtPage()" />
                 <TopActionButton icon="icon-export" text="Exporter archive" position="right" :disabled="editorStore.exporting" @click="editorService.exportProject()" />
             </div>
+
+            <div class="menu-xs-container">
+                <button>hamburger menu</button>
+            </div>
         </div>
     </div>
 </template>
 
 <style scoped lang="scss">
+@use '@/src/mixins';
+
 .top-bar {
     background-color: var(--content);
     border-bottom: 1px solid var(--border);
@@ -123,5 +129,19 @@ setInterval(() => {
         background-position: right 0.7rem top 50%;
         background-size: .8rem auto;
     }
+
 }
+
+.top-bar-actions {
+    @include mixins.sm {
+        display: none;
+    }
+}
+
+.menu-xs-container {
+    @include mixins.md {
+        display: none;
+    }
+}
+
 </style>
\ No newline at end of file