Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add feedback to mobile menu

Browse Source
This commit is contained in:
ernstmul
2025-01-15 15:31:12 +01:00
parent aba7703a6c
commit 677d3cdba6
1 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/sidebar.svelte
+33 -4
View File
@@ -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;