From 68664242c09552fce966fc32604b37c4909e7d5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20W=C3=B6rister?=
 <31357619+fwoerister@users.noreply.github.com>
Date: Thu, 5 Feb 2026 11:46:49 +0100
Subject: [PATCH] move debugger and challenge card to flyout div

---
 src/components/BlocksemblerCodingView.vue | 97 ++++++-----------------
 src/components/BlocksemblerNavigation.vue | 13 +++
 2 files changed, 36 insertions(+), 74 deletions(-)

diff --git a/src/components/BlocksemblerCodingView.vue b/src/components/BlocksemblerCodingView.vue
index cb2f0af..626130b 100644
--- a/src/components/BlocksemblerCodingView.vue
+++ b/src/components/BlocksemblerCodingView.vue
@@ -7,7 +7,6 @@ import SubmissionModal from "@/components/modals/SubmissionModal.vue";
 import DebuggerPanel from "@/components/DebuggerPanel.vue";
 import BaseCodeMirrorEditor from "@/components/base/BaseCodeMirrorEditor.vue";
 import BlocksemblerChallengeCard from "@/components/BlocksemblerChallengeCard.vue";
-import {BACKEND_DISABLED} from "@/config";
 
 let blocksEnabled = ref(true);
 
@@ -51,86 +50,36 @@ let options = ref({
 
   <SubmissionModal id="submission-modal"/>
 
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-6 p-0">
-        <BaseBlocklyEditor v-if="codingWorkspaceState.blocksEnabled" ref="blocklyEditor" :options="options"/>
-        <BaseCodeMirrorEditor v-if="!codingWorkspaceState.blocksEnabled" :highlightedLine="0"/>
-      </div>
-      <div class="col-6 p-3 debugger">
-        <ul id="debuggerTabs"
-            class="nav nav-tabs nav-tabs-dark gap-2 mb-3 shadow-sm p-2 rounded"
-            role="tablist">
+  <div class="container-fluid m-0 p-0">
+    <BaseBlocklyEditor v-if="codingWorkspaceState.blocksEnabled" ref="blocklyEditor" :options="options"/>
+    <BaseCodeMirrorEditor v-if="!codingWorkspaceState.blocksEnabled" :highlightedLine="0"/>
+  </div>
 
-          <li class="nav-item" role="presentation">
-            <button
-                id="debugger-tab"
-                class="nav-link active d-flex align-items-center gap-2"
-                data-bs-target="#debugger"
-                data-bs-toggle="tab"
-                role="tab"
-                type="button">
-              <i class="bi bi-bug"></i>
-              Debugger
-            </button>
-          </li>
+  <!-- Offcanvas Flyout -->
+  <div id="debuggerFlyout" aria-labelledby="debuggerFlyoutLabel" class="offcanvas offcanvas-end w-75" tabindex="-1">
+    <div class="offcanvas-header">
+      <h2 id="debuggerFlyoutLabel" class="offcanvas-title">Debugger</h2>
+      <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
+    </div>
 
-          <li v-if="!BACKEND_DISABLED" class="nav-item" role="presentation">
-            <button
-                id="challenge-tab"
-                class="nav-link d-flex align-items-center gap-2"
-                data-bs-target="#challenge"
-                data-bs-toggle="tab"
-                role="tab"
-                type="button">
-              <i class="bi bi-flag"></i>
-              Challenge
-            </button>
-          </li>
-        </ul>
+    <div class="offcanvas-body">
+      <DebuggerPanel/>
+    </div>
+  </div>
 
-        <div class="tab-content border rounded p-3 bg-white shadow-sm">
-          <div
-              id="debugger"
-              class="tab-pane fade show active"
-              role="tabpanel"
-          >
-            <DebuggerPanel/>
-          </div>
+  <div id="challengeCardFlyout" aria-labelledby="challengeCardFlyoutLabel" class="offcanvas offcanvas-end w-50"
+       tabindex="-1">
+    <div class="offcanvas-header">
+      <h2 id="challengeCardLabel" class="offcanvas-title">Exercise</h2>
+      <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
+    </div>
 
-          <div
-              id="challenge"
-              class="tab-pane fade"
-              role="tabpanel"
-          >
-            <BlocksemblerChallengeCard/>
-          </div>
-        </div>
-      </div>
+    <div class="offcanvas-body">
+      <BlocksemblerChallengeCard/>
     </div>
   </div>
+
 </template>
 
 <style scoped>
-.debugger {
-  height: calc(100vh - 100px);
-  overflow: scroll;
-}
-
-.nav-tabs-dark .nav-link {
-  color: white;
-  background-color: #6c757d;
-  margin-right: 5px;
-}
-
-.nav-tabs-dark .nav-link.active {
-  color: #fff;
-  background-color: #343a40; /* or #343a40 for pure dark */
-}
-
-.nav-tabs-dark .nav-link:hover {
-  background-color: #343a40;
-  color: #fff;
-}
-
 </style>
\ No newline at end of file
diff --git a/src/components/BlocksemblerNavigation.vue b/src/components/BlocksemblerNavigation.vue
index 3b19d61..ea476a9 100644
--- a/src/components/BlocksemblerNavigation.vue
+++ b/src/components/BlocksemblerNavigation.vue
@@ -139,6 +139,19 @@ let onModeChangeHandler = (e: Event) => {
                 </li>
               </ul>
             </li>
+
+            <li class="nav-item">
+              <a aria-controls="debuggerFlyout" class="nav-link" data-bs-target="#challengeCardFlyout"
+                 data-bs-toggle="offcanvas"
+                 href="#">Open Current Task</a>
+            </li>
+
+            <li class="nav-item">
+              <a aria-controls="debuggerFlyout" class="nav-link" data-bs-target="#debuggerFlyout"
+                 data-bs-toggle="offcanvas"
+                 href="#">Open Debugger</a>
+            </li>
+
             <li class="nav-item">
               <a class="nav-link" data-bs-target="#settingsModal" data-bs-toggle="modal" href="#" @click=openSettings>
                 Settings