feat: initial commit

src/lib/components/support.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import SupportLight from '$lib/images/support/support-light.png';
+    import SupportDark from '$lib/images/support/support-dark.png';
+    import { app } from '$lib/stores/app';
+
+    export let show = false;
+</script>
+
+<section class="drop-section u-overflow-y-auto">
+    <div class="common-section">
+        {#if $app.themeInUse === 'light'}
+            <img src={SupportLight} alt="Support" />
+        {:else}
+            <img src={SupportDark} alt="Support" />
+        {/if}
+        <h5 class="eyebrow-heading-3">Premium support</h5>
+        <p class="text">Get personalized support from the Appwrite team</p>
+        <Button href="https://appwrite.io" external>Get premium support</Button>
+    </div>
+    <div class="common-section">
+        <h5 class="eyebrow-heading-3">troubleshooting</h5>
+        <div class="u-flex u-gap-16">
+            <Button secondary href="https://appwrite.io/docs">
+                <span class="icon-book-open" aria-hidden="true" />
+                <span class="text">Docs</span>
+            </Button>
+            <Button secondary href="https://appwrite.io/docs">
+                <span class="icon-github" aria-hidden="true" />
+                <span class="text">Open issue</span>
+            </Button>
+        </div>
+    </div>
+    <div class="common-section">
+        <h5 class="eyebrow-heading-3">Community support</h5>
+        <p class="text">Get help from our community</p>
+        <div class="u-flex u-gap-16">
+            <Button
+                href="https://github.com/appwrite"
+                round
+                text
+                noMargin
+                external
+                ariaLabel="Github">
+                <span class="icon-github" aria-hidden="true" />
+            </Button>
+            <Button
+                href="https://appwrite.io/discord"
+                round
+                text
+                noMargin
+                external
+                ariaLabel="Discord">
+                <span class="icon-discord" aria-hidden="true" />
+            </Button>
+        </div>
+    </div>
+</section>

src/lib/layout/header.svelte

@@ -10,9 +10,12 @@
     import SystemMode from '$lib/images/mode/system-mode.svg';
     import { slide } from 'svelte/transition';
     import { page } from '$app/stores';
+    import Support from '$lib/components/support.svelte';
 
     let showDropdown = false;
+    let showSupport = false;
     let droplistElement: HTMLDivElement;
+    let supportElement: HTMLDivElement;
 
     const onBlur = (event: MouseEvent) => {
         if (
@@ -21,6 +24,12 @@
         ) {
             showDropdown = false;
         }
+        if (
+            showSupport &&
+            !(event.target === supportElement || supportElement.contains(event.target as Node))
+        ) {
+            showSupport = false;
+        }
     };
 </script>
 
@@ -39,13 +48,22 @@
 <div class="main-header-end">
     <nav class="u-flex is-only-desktop">
         <button class="button is-small is-text"><span class="text">Feedback</span></button>
-        <a
-            href="https://appwrite.io/support"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="button is-small is-text">
-            <span class="text">Support</span>
-        </a>
+        <div
+            class="drop-wrapper"
+            style="--drop-width-size-desktop: 17.5rem"
+            class:is-open={showSupport}
+            bind:this={supportElement}>
+            <button class="button is-small is-text" on:click={() => (showSupport = !showSupport)}>
+                <span class="text">Support</span>
+            </button>
+            {#if showSupport}
+                <div
+                    class="drop is-no-arrow is-block-end is-inline-end"
+                    transition:slide={{ duration: 100 }}>
+                    <Support />
+                </div>
+            {/if}
+        </div>
     </nav>
     <nav class="u-flex u-height-100-percents u-sep-inline-start">
         {#if $user}