From ec59cd6e4f1b47ede5f344c49222da3f70328228 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Sun, 6 Jul 2025 18:26:46 +0200
Subject: [PATCH] playing around with a help dialog

---
 vue3/src/components/dialogs/HelpDialog.vue | 52 ++++++++++++++++++++++
 vue3/src/pages/HelpPage.vue                |  6 +++
 2 files changed, 58 insertions(+)
 create mode 100644 vue3/src/components/dialogs/HelpDialog.vue

diff --git a/vue3/src/components/dialogs/HelpDialog.vue b/vue3/src/components/dialogs/HelpDialog.vue
new file mode 100644
index 000000000..0568b8705
--- /dev/null
+++ b/vue3/src/components/dialogs/HelpDialog.vue
@@ -0,0 +1,52 @@
+<template>
+
+    <v-dialog height="70vh" activator="parent">
+        <v-card>
+            <v-closable-card-title v-model="dialog" :title="$t('Help')" icon="fa-solid fa-question"></v-closable-card-title>
+            <v-divider></v-divider>
+            <v-card-text class="pa-0">
+                <v-layout style="height: 100%">
+                    <v-navigation-drawer style="height: calc(100% + 0px)">
+                        <v-list-item>
+                            <v-text-field density="compact" variant="outlined" class="pt-2 pb-2" :label="$t('Search')" hide-details clearable ></v-text-field>
+                        </v-list-item>
+                        <v-divider></v-divider>
+                        <v-list-item link title="Start" @click="window = 'start'"></v-list-item>
+                        <v-list-item link title="Test" @click="window = 'test'"></v-list-item>
+
+                    </v-navigation-drawer>
+
+                    <v-main>
+                        <v-container>
+                            <v-window v-model="window">
+                                <v-window-item value="start">
+                                    Start
+                                </v-window-item>
+                                <v-window-item value="test">
+                                    Test
+                                </v-window-item>
+                            </v-window>
+                        </v-container>
+                    </v-main>
+                </v-layout>
+
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+
+</template>
+
+<script setup lang="ts">
+
+import VClosableCardTitle from "@/components/dialogs/VClosableCardTitle.vue";
+import {ref} from "vue";
+
+const dialog = ref(false)
+const window = ref('start')
+
+</script>
+
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/vue3/src/pages/HelpPage.vue b/vue3/src/pages/HelpPage.vue
index 337e6bbad..8ce257eab 100644
--- a/vue3/src/pages/HelpPage.vue
+++ b/vue3/src/pages/HelpPage.vue
@@ -14,6 +14,11 @@
             </v-col>
         </v-row>
 
+        <v-btn>
+            Test Dialog
+            <help-dialog></help-dialog>
+        </v-btn>
+
         <v-row>
             <v-col>
                 <v-expansion-panels>
@@ -90,6 +95,7 @@
 
 import {TKeyword, TRecipe, TUnit, TUserSpace} from "@/types/Models";
 import {useUserPreferenceStore} from "../stores/UserPreferenceStore";
+import HelpDialog from "@/components/dialogs/HelpDialog.vue";
 </script>
 
 <style scoped>