Merge pull request #1566 from appwrite/tabs-dropdown

Tabs dropdown
appwrite · Dec 21, 2024 · e23c6bf · e23c6bf
2 parents ecca33d + 153ba09
commit e23c6bf
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 4 deletions.
diff --git a/src/lib/components/Select.svelte b/src/lib/components/Select.svelte
@@ -26,6 +26,8 @@
         change: unknown;
     }>();
 
+    export let initialLabel: string = 'Select an option';
+
     const {
         elements: { trigger, menu, option: optionEl, group: groupEl, groupLabel },
         states: { open, selected, selectedLabel }
@@ -80,6 +82,8 @@
         duration: 150,
         y: placement === 'top' ? 4 : -4
     } as FlyParams;
+
+    console.log({ initialLabel, $selectedLabel });
 </script>
 
 <button
@@ -93,7 +97,7 @@
         {#if selectedOption?.icon}
             <span class={selectedOption.icon} aria-hidden="true" />
         {/if}
-        <span>{$selectedLabel}</span>
+        <span>{$selectedLabel || initialLabel}</span>
     </div>
     <span class="icon-cheveron-{$open ? 'up' : 'down'}" aria-hidden="true" />
 </button>

diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte
@@ -7,6 +7,7 @@
 </script>
 
 <script lang="ts">
+    import Select from '$lib/components/Select.svelte';
     import { classNames } from '$lib/utils/classnames';
     import { createTabs } from '@melt-ui/svelte';
     import { setContext } from 'svelte';
@@ -28,11 +29,11 @@
 
 <div class="web-card is-normal mt-4" {...$root} use:root>
     <div
-        class="tabs flex gap-4 overflow-scroll"
+        class="tabs flex items-center gap-4 overflow-scroll"
         style="scrollbar-width: none; -ms-overflow-style: none;"
     >
-        <ul class="tabs-list flex items-center gap-4" {...$list} use:list>
-            {#each $ctx.triggers.entries() as [id, title]}
+        <ul class="tabs-list hidden items-center gap-4 sm:flex" {...$list} use:list>
+            {#each Array.from($ctx.triggers.entries()).slice(0, 7) as [id, title]}
                 <li
                     class="tabs-item rounded-t-[0.625rem] text-center hover:bg-white/4"
                     class:text-[var(--color-primary)]={$value === id}
@@ -50,6 +51,60 @@
                     >
                 </li>
             {/each}
+            {#if Array.from($ctx.triggers.entries()).slice(7, Array.from($ctx.triggers.entries()).length - 1).length}
+                {@const entries = Array.from($ctx.triggers.entries())}
+                {@const desktopOptions = entries.slice(7, entries.length - 1)}
+
+                <li>
+                    <Select
+                        initialLabel="More"
+                        options={desktopOptions.map(([value, label]) => {
+                            return {
+                                value,
+                                label
+                            };
+                        })}
+                        bind:value={$value}
+                    />
+                </li>
+            {/if}
+        </ul>
+        <ul class="tabs-list flex items-center gap-4 sm:hidden" {...$list} use:list>
+            {#each Array.from($ctx.triggers.entries()).slice(0, 3) as [id, title]}
+                <li
+                    class="tabs-item rounded-t-[0.625rem] text-center hover:bg-white/4"
+                    class:text-[var(--color-primary)]={$value === id}
+                >
+                    <button
+                        class={classNames(
+                            'tabs-button relative cursor-pointer bg-clip-padding py-[0.625rem] px-1 font-light outline-none',
+                            'after:relative after:top-1 after:bottom-0 after:block after:h-px after:transition-all',
+                            {
+                                'after:bg-[var(--color-primary)]': $value === id
+                            }
+                        )}
+                        {...$trigger(id)}
+                        use:trigger>{title}</button
+                    >
+                </li>
+            {/each}
+            {#if Array.from($ctx.triggers.entries()).slice(3, Array.from($ctx.triggers.entries()).length - 1).length}
+                {@const entries = Array.from($ctx.triggers.entries())}
+                {@const desktopOptions = entries.slice(3, entries.length - 1)}
+
+                <li>
+                    <Select
+                        initialLabel="More"
+                        options={desktopOptions.map(([value, label]) => {
+                            return {
+                                value,
+                                label
+                            };
+                        })}
+                        bind:value={$value}
+                    />
+                </li>
+            {/if}
         </ul>
     </div>
     <slot />