Made expandable man in REST Mock (#269)

Reviewed-on: #269
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-committed-by: Adam Bem <adam.bem@zoho.eu>

Frontend/src/views/RestMockView.vue

@@ -1,14 +1,29 @@
 <script setup lang="ts">
 import RestMockMessageComponent from '@components/mock/RestMockMessageComponent.vue'
 import HistoryComponent from '@components/mock/HistoryComponent.vue'
+import ManTooltipComponent from '@/components/man/ManTooltipComponent.vue';
+import RestMockManComponent from '@/components/man/RestMockManComponent.vue';
+import { ref } from 'vue';
+
+
+const historyVisibility = ref(true);
+
+function setHistoryVisibility(visibility : boolean) {
+    historyVisibility.value = !visibility;
+}
 
 </script>
 
-
 <template>
     <div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-auto overflow-x-hidden h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
-        <HistoryComponent></HistoryComponent>
+        <HistoryComponent :class="{'hidden': !historyVisibility}"></HistoryComponent>
+        <ManTooltipComponent @update:visible="setHistoryVisibility">
+            <div class="mt-2">
+                <a class="tool-button" href="/man/rest-mock">Expand</a>
+            </div>
+            <RestMockManComponent></RestMockManComponent>
+        </ManTooltipComponent>
     </div>
 </template>
 

Frontend/src/views/man/RestMockManView.vue

@@ -10,6 +10,11 @@ export default {
 
 
 <template>
-    <RestMockManComponent></RestMockManComponent>
+    <div class="flex flex-col h-full gap-4">
+        <div class="flex flex-row">
+        <a href="/rest/mock" class="tool-button">Back to REST Mock</a>
+        </div>
+        <RestMockManComponent></RestMockManComponent>
+    </div>
 </template>