From 677d3cdba6305c33bf6e6b5b255a22f80abfbd57 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 15 Jan 2025 15:31:12 +0100
Subject: [PATCH] Add feedback to mobile menu

---
 src/lib/components/sidebar.svelte | 37 +++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index eff61f78b..6d75c822a 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -23,6 +23,9 @@
         IconUserGroup
     } from '@appwrite.io/pink-icons-svelte';
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
+    import { feedback } from '$lib/stores/feedback';
+    import { DropList } from '$lib/components/index';
+    import { Feedback } from '$lib/components/feedback';
 
     type $$Props = HTMLElement & {
         state?: 'closed' | 'open' | 'icons';
@@ -41,6 +44,15 @@
     export let progressCard: $$Props['progressCard'];
     export let sideBarIsOpen: boolean;
 
+    function toggleFeedback() {
+        console.log('toggleFeedback!');
+        feedback.toggleFeedback();
+        if ($feedback.notification) {
+            feedback.toggleNotification();
+            feedback.addVisualization();
+        }
+    }
+
     const projectOptions = [
         { name: 'Auth', icon: IconUserGroup, slug: 'auth' },
         { name: 'Databases', icon: IconDatabase, slug: 'databases' },
@@ -134,8 +146,13 @@
             {:else}
                 <div class="action-buttons">
                     <Layout.Stack direction="column" gap="s">
-                        <Button.Button variant="secondary" size="s"
-                            ><span>Feedback</span></Button.Button>
+                        <DropList show={$feedback.show} scrollable on:blur={toggleFeedback}>
+                            <Button.Button variant="secondary" size="s" on:click={toggleFeedback}
+                                >Feedback</Button.Button>
+                            <svelte:fragment slot="other">
+                                <Feedback />
+                            </svelte:fragment>
+                        </DropList>
                         <Button.Button variant="secondary" size="s"
                             ><span>Support</span></Button.Button>
                     </Layout.Stack>
@@ -161,8 +178,15 @@
                 <div class="only-mobile">
                     <div class="action-buttons">
                         <Layout.Stack direction="column" gap="s">
-                            <Button.Button variant="secondary" size="s"
-                                ><span>Feedback</span></Button.Button>
+                            <DropList show={$feedback.show} scrollable on:blur={toggleFeedback}>
+                                <Button.Button
+                                    variant="secondary"
+                                    size="s"
+                                    on:click={toggleFeedback}>Feedback</Button.Button>
+                                <svelte:fragment slot="other">
+                                    <Feedback />
+                                </svelte:fragment>
+                            </DropList>
                             <Button.Button variant="secondary" size="s"
                                 ><span>Support</span></Button.Button>
                         </Layout.Stack>
@@ -241,6 +265,11 @@
             width: 144px;
             text-align: center;
         }
+
+        :global(div),
+        :global(button) {
+            width: 100%;
+        }
     }
     .avatar {
         width: 32px;