From a27bdaf9332864e87758161ff7326f8806762c7b Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Mon, 27 Apr 2026 09:35:18 +0200
Subject: [PATCH 1/5] Created cEscapemenu component

---
 app/src/components/EscapeMenu.vue | 44 +++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 app/src/components/EscapeMenu.vue

diff --git a/app/src/components/EscapeMenu.vue b/app/src/components/EscapeMenu.vue
new file mode 100644
index 00000000..a7b5f8b2
--- /dev/null
+++ b/app/src/components/EscapeMenu.vue
@@ -0,0 +1,44 @@
+<template>
+  <Teleport to="body">
+    <div 
+      v-if="model.isOpen" 
+      class="modal modal-open !z-[9999] bg-black/40 backdrop-blur-sm"
+      @keydown.esc="close"
+    >
+      <form method="dialog" class="modal-backdrop" @click="close">
+        <button>close</button>
+      </form>
+      
+      <div class="modal-box bg-base-100/10 backdrop-blur-xl border border-base-200/50 max-w-lg">
+        <h3 class="text-2xl font-bold text-base-content mb-6">VR Menu</h3>
+        
+        <div class="space-y-4">
+            <button class="w-full btn btn-primary btn-wide">Återuppta</button>
+            <button class="w-full btn btn-error btn-wide">Lämna VR miljö</button>
+        </div>
+        
+        <div class="mt-8 pt-6 border-t border-base-200/50 text-sm text-base-content/70 text-center">
+          <p><kbd class="kbd kbd-sm">Esc</kbd> to close</p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+interface EscapeMenuModel {
+  isOpen: boolean
+  onResume: () => void
+  onSettings: () => void
+  onShare: () => void
+  onLeave: () => void
+}
+
+const props = defineProps<{
+  model: EscapeMenuModel
+}>()
+
+function close() {
+  props.model.onResume()
+}
+</script>
\ No newline at end of file

From 8d3b1200b7d43fce505203166d79502ea57ae9c9 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Mon, 27 Apr 2026 09:36:26 +0200
Subject: [PATCH 2/5] Removed unnessecary input functions

---
 app/src/components/EscapeMenu.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/src/components/EscapeMenu.vue b/app/src/components/EscapeMenu.vue
index a7b5f8b2..f0a19d13 100644
--- a/app/src/components/EscapeMenu.vue
+++ b/app/src/components/EscapeMenu.vue
@@ -29,8 +29,6 @@
 interface EscapeMenuModel {
   isOpen: boolean
   onResume: () => void
-  onSettings: () => void
-  onShare: () => void
   onLeave: () => void
 }
 

From cbff5e102801e77f8433cee6f500493635eb2c1a Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Mon, 27 Apr 2026 10:21:20 +0200
Subject: [PATCH 3/5] Linked the buttons to the functions and changed text
 color

---
 app/src/components/EscapeMenu.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/src/components/EscapeMenu.vue b/app/src/components/EscapeMenu.vue
index f0a19d13..4218ca02 100644
--- a/app/src/components/EscapeMenu.vue
+++ b/app/src/components/EscapeMenu.vue
@@ -10,14 +10,14 @@
       </form>
       
       <div class="modal-box bg-base-100/10 backdrop-blur-xl border border-base-200/50 max-w-lg">
-        <h3 class="text-2xl font-bold text-base-content mb-6">VR Menu</h3>
+        <h3 class="text-2xl font-bold text-base-content mb-6 text-white">VR Menu</h3>
         
         <div class="space-y-4">
-            <button class="w-full btn btn-primary btn-wide">Återuppta</button>
-            <button class="w-full btn btn-error btn-wide">Lämna VR miljö</button>
+            <button @click="props.model.onResume" class="w-full btn btn-primary btn-wide">Återuppta</button>
+            <button @click="props.model.onLeave" class="w-full btn btn-neutral btn-wide">Lämna VR miljö</button>
         </div>
         
-        <div class="mt-8 pt-6 border-t border-base-200/50 text-sm text-base-content/70 text-center">
+        <div class="mt-8 pt-6 border-t border-base-200/50 text-sm text-base-content/70 text-center text-white">
           <p><kbd class="kbd kbd-sm">Esc</kbd> to close</p>
         </div>
       </div>

From bc708d7eef211067ba7f3bbe4fdae566aa6a1ee4 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Mon, 27 Apr 2026 10:21:43 +0200
Subject: [PATCH 4/5] Added escapemenu to vrscene renderer

---
 app/src/views/user/VrSpaceSceneView.vue | 40 ++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/app/src/views/user/VrSpaceSceneView.vue b/app/src/views/user/VrSpaceSceneView.vue
index 74aebeef..90f694c3 100644
--- a/app/src/views/user/VrSpaceSceneView.vue
+++ b/app/src/views/user/VrSpaceSceneView.vue
@@ -2,12 +2,22 @@
   <div>
     <div class="min-h-screen z-0">
       <div class="pointer-events-none *:pointer-events-auto absolute z-50" ref="domOutlet" id="aframe-dom-outlet">
+        <!-- Menu -->
+        <EscapeMenu 
+          :model="{
+            isOpen: isMenuOpen,
+            onResume: () => closeMenu(),
+            onLeave: () => {
+              closeMenu();
+              router.push('/')}
+          }" 
+        />
       </div>
       <UIOverlay />
       <WaitForAframe>
         <template v-if="vrSpaceStore.currentVrSpace && mediasoupInitialized">
           <a-scene :background="`color: ${skyColor}`" renderer="logarithmicDepthBuffer: false" scene-cleanup
-            ref="aframeScene" cursor="fuse:false; rayOrigin:mouse;"
+            ref="aframeScene" cursor="fuse:false; rayOrigin:mouse; enabled: !isMenuOpen"
             :raycaster="`objects: ${currentRaycastSelectorString}; mouseCursorStyleEnabled: ${pointerOnHover}`"
             raycaster-update @raycast-update="setCursorIntersection($event.detail)">
             <a-assets>
@@ -58,6 +68,7 @@
 <script setup lang="ts">
 import { aFrameSceneProvideKey } from '@/modules/injectionKeys';
 import VrAFrame from '../../components/lobby/VrAFrame.vue';
+import EscapeMenu from '../../components/EscapeMenu.vue';
 import { useVrSpaceStore } from '@/stores/vrSpaceStore';
 import type { VrSpaceId } from 'schemas';
 import { onBeforeMount, provide, ref, watch, getCurrentInstance, onBeforeUnmount, computed, nextTick, onMounted, onUpdated, reactive } from 'vue';
@@ -105,6 +116,33 @@ watch(() => vrSpaceStore.screenShares, (newScreenShares) => {
   console.log('screenshares changed', newScreenShares);
 })
 
+const isMenuOpen = ref(false);
+
+function toggleMenu() {
+  isMenuOpen.value = !isMenuOpen.value;
+}
+
+function closeMenu() {
+  isMenuOpen.value = false;
+}
+
+function onGlobalKeyDown(e: KeyboardEvent) {
+  if (e.key !== 'Escape') return;
+  
+  e.preventDefault();
+  e.stopPropagation();
+  
+  toggleMenu();
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onGlobalKeyDown, true);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onGlobalKeyDown, true);
+});
+
 // Emoji stuff
 function setEmojiSelf(coords: Tuple, active: boolean) {
   // Send things to server

From 2546919752e3ef75218fc551ee5f739b3a71d0f7 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Mon, 27 Apr 2026 11:22:44 +0200
Subject: [PATCH 5/5] Made it so user can't move in the vr space while the menu
 is open

---
 app/src/components/lobby/VrAFrame.vue   | 6 ++++--
 app/src/views/user/VrSpaceSceneView.vue | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/src/components/lobby/VrAFrame.vue b/app/src/components/lobby/VrAFrame.vue
index b7072914..718bc82c 100644
--- a/app/src/components/lobby/VrAFrame.vue
+++ b/app/src/components/lobby/VrAFrame.vue
@@ -50,8 +50,8 @@
     :nipple-controls="`enabled: ${isTouchDevice};mode: static; rotationSensitivity: 2.0; bottomMargin: 70px; sideMargin: 30px;`">
     <!-- <a-sphere radius="0.3" /> -->
     <a-entity camera id="camera" ref="cameraTag"
-      look-controls="touchEnabled: true; reverseMouseDrag: false; reverseTouchDrag: true; pointerLockEnabled: true;"
-      wasd-controls="acceleration:35;"
+      :look-controls="`touchEnabled: true; enabled: ${!props.isMenuOpen}; reverseMouseDrag: false; reverseTouchDrag: true; pointerLockEnabled: true;`"
+      :wasd-controls="`acceleration:35; enabled: ${!props.isMenuOpen};`"
       :simple-navmesh-constraint="`navmesh: .navmesh; fall: 0.3; height: ${defaultHeightOverGround};`"
       emit-move="interval: 20;" :position="`0 ${defaultHeightOverGround} 0`">
       <a-entity ref="cameraAttacher" :position="cameraAttacherPosString">
@@ -185,6 +185,7 @@ import { usePointerLock } from '@vueuse/core';
 import { overlayGUILeft, overlayGUIRight, leftHandVRGui, rightHandVRGui, cameraAttacher } from '@/composables/teleportTargets';
 import AvatarHand from '@/components/entities/AvatarHand.vue';
 import PlacedObject from '@/components/entities/PlacedObject.vue';
+import { is } from 'date-fns/locale';
 const { currentCursorIntersection, triggerCursorClick, isCursorOnNavmesh, currentRaycastSelectorString, pointerOnHover } = useCurrentCursorIntersection();
 const { lock, unlock, element } = usePointerLock();
 
@@ -220,6 +221,7 @@ const props = defineProps({
   // navmeshUrl: {type: String, default: ''},
   // showNavMesh: { type: Boolean, default: false },
   // modelScale: {type: Number, default: 1},
+  isMenuOpen: { type: Boolean, default: false },
 });
 
 const worldModelLoaded = ref(false);
diff --git a/app/src/views/user/VrSpaceSceneView.vue b/app/src/views/user/VrSpaceSceneView.vue
index 90f694c3..b705cbd2 100644
--- a/app/src/views/user/VrSpaceSceneView.vue
+++ b/app/src/views/user/VrSpaceSceneView.vue
@@ -24,7 +24,8 @@
               <a-asset-item id="icon-font"
                 src="https://fonts.gstatic.com/s/materialicons/v70/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff" />
             </a-assets>
-            <VrAFrame>
+            <VrAFrame
+            :isMenuOpen="isMenuOpen">
               <a-entity ref="vrCursor">
                 <a-ring :visible="currentCursorMode === 'teleport'" transparent opacity="0.3" position="0 0 0.01"
                   radius-inner="0.13" radius-outer="0.17" material="shader: flat;" rotation="0 0 0" color="white" />