WIP adding mobile view

2026-06-06 19:27:48 +00:00 · 2025-02-25 14:14:59 +01:00
parent 9e3103a22a
commit 0cdbd4e1ae
5 changed files with 152 additions and 89 deletions
@@ -340,19 +340,8 @@

 <style lang="scss">
    .menu {
-        //display: flex;
-        //flex-direction: column;
-        //outline: none !important;
        min-width: 220px;
-        //border-radius: var(--border-radius-m, 12px);
-        //border: 1px solid var(--color-border-neutral, #ededf0);
-        //background: var(--color-bgcolor-neutral-primary, #fff);
        z-index: 20;
-        //
-        ///* box-shadow/neutral/L */
-        //box-shadow:
-        //    -2px 8px 16px 0px rgba(0, 0, 0, 0.02),
-        //    -2px 20px 24px 0px rgba(0, 0, 0, 0.02);
    }

    .not-mobile {
@@ -375,6 +364,7 @@
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60px;
+        color: var(--color-fgcolor-neutral-secondary);

        @media (min-width: 390px) {
            max-width: 95px;
@@ -323,10 +323,14 @@
 <style lang="scss">
    .left {
        display: flex;
-        gap: 17px;
+        gap: 8px;
        align-items: center;
        flex-shrink: 0;
        max-width: 100%;
+
+        @media (min-width: 1024px) {
+            gap: 17px;
+        }
    }

    .right {
@@ -551,19 +551,23 @@
    }

    .sub-navigation {
-        width: 400px;
-        height: calc(100vh - 48px);
-        display: flex;
-        justify-content: flex-end;
-        background-color: var(--color-bgcolor-neutral-primary, #fff);
-        z-index: 14;
-        position: fixed;
-        top: 48px;
-        transition: width 0.2s linear;
+        margin-top: 48px;
+        @media (min-width: 1024px) {
+            margin-top: 0;
+            width: 400px;
+            height: calc(100vh - 48px);
+            display: flex;
+            justify-content: flex-end;
+            background-color: var(--color-bgcolor-neutral-primary, #fff);
+            z-index: 14;
+            position: fixed;
+            top: 48px;
+            transition: width 0.2s linear;

-        &.icons {
-            width: 266px;
-            transition: width 0.3s linear;
+            &.icons {
+                width: 266px;
+                transition: width 0.3s linear;
+            }
        }
    }
 </style>
@@ -6,6 +6,7 @@
    import { Cover, CoverTitle } from '$lib/layout';
    import { canWriteCollections } from '$lib/stores/roles';
    import { collection } from './store';
+    import { isTabletViewport } from '$lib/stores/viewport';

    $: projectId = $page.params.project;
    $: databaseId = $page.params.database;
@@ -49,24 +50,26 @@
    ].filter((tab) => !tab.disabled);
 </script>

-<Cover>
-    <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${projectId}/databases/database-${databaseId}`}>
-            {$collection?.name}
-        </CoverTitle>
-        {#key $collection?.$id}
-            <Id value={$collection?.$id}>{$collection?.$id}</Id>
-        {/key}
-    </svelte:fragment>
+<div style:margin-top={$isTabletViewport ? '48px' : 0}>
+    <Cover>
+        <svelte:fragment slot="header">
+            <CoverTitle href={`${base}/project-${projectId}/databases/database-${databaseId}`}>
+                {$collection?.name}
+            </CoverTitle>
+            {#key $collection?.$id}
+                <Id value={$collection?.$id}>{$collection?.$id}</Id>
+            {/key}
+        </svelte:fragment>

-    <Tabs>
-        {#each tabs as tab}
-            <Tab
-                href={tab.href}
-                selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
-                event={tab.event}>
-                {tab.title}
-            </Tab>
-        {/each}
-    </Tabs>
-</Cover>
+        <Tabs>
+            {#each tabs as tab}
+                <Tab
+                    href={tab.href}
+                    selected={isTabSelected(tab, $page.url.pathname, path, tabs)}
+                    event={tab.event}>
+                    {tab.title}
+                </Tab>
+            {/each}
+        </Tabs>
+    </Cover>
+</div>
@@ -4,8 +4,10 @@
    import { showCreate } from '../store';
    import type { PageData } from './$types';
    import { showSubNavigation } from '$lib/stores/layout';
-    import { Icon, Sidebar } from '@appwrite.io/pink-svelte';
-    import { IconDatabase, IconTable } from '@appwrite.io/pink-icons-svelte';
+    import { Icon, Sidebar, Navbar, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { IconChevronDown, IconDatabase, IconTable } from '@appwrite.io/pink-icons-svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
+    import { BottomSheet } from '$lib/components';

    $: data = $page.data as PageData;
    $: project = $page.params.project;
@@ -15,52 +17,89 @@
    $: sortedCollections = data?.allCollections?.collections?.sort((a, b) =>
        a.$createdAt > b.$createdAt ? -1 : 1
    );
+
+    $: selectedCollection = sortedCollections.find((collection) => collection.$id === collectionId);
+
+    let openBottomSheet = false;
 </script>

-<Sidebar.Base state="open" resizable={false}>
-    <section class="list-container" slot="top" style:width="100%">
-        <a
-            class="u-flex u-cross-center u-sep-block-end u-padding-block-12 is-not-desktop"
-            href={`${base}/project-${project}/databases/database-${databaseId}?openNavbar=true`}>
-            <span class="icon-cheveron-left" aria-hidden="true" />
-            <h5 class="eyebrow-heading-3 u-margin-inline-auto">Collections</h5>
-        </a>
-        <h5
-            class="u-flex u-cross-center body-text-2 u-gap-8 u-padding-inline-12 u-padding-block-8 is-not-mobile is-selected">
-            <Icon icon={IconDatabase} size="s" color="light-neutral" />
-            {data.database.name}
-        </h5>
-        <div class="collection-content">
-            {#if data?.allCollections?.total}
-                <ul
-                    class="drop-list u-padding-inline-8 u-margin-inline-start-20 u-margin-block-start-8">
-                    {#each sortedCollections as collection}
-                        {@const href = `${base}/project-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
-                        {@const isSelected = collectionId === collection.$id}
-                        <li class:is-selected={isSelected}>
-                            <a
-                                class="u-padding-block-4 u-padding-inline-12 u-flex u-cross-center u-gap-8"
-                                {href}>
-                                <Icon icon={IconTable} size="s" />
-                                <span class="text collection-name" data-private
-                                    >{collection.name}</span>
-                            </a>
-                        </li>
-                    {/each}
-                </ul>
-            {/if}
+{#if !$isTabletViewport}
+    <Sidebar.Base state="open" resizable={false}>
+        <section class="list-container" slot="top" style:width="100%">
+            <h5
+                class="u-flex u-cross-center body-text-2 u-gap-8 u-padding-inline-12 u-padding-block-8 is-not-mobile is-selected">
+                <Icon icon={IconDatabase} size="s" color="light-neutral" />
+                {data.database.name}
+            </h5>
+            <div class="collection-content">
+                {#if data?.allCollections?.total}
+                    <ul
+                        class="drop-list u-padding-inline-8 u-margin-inline-start-20 u-margin-block-start-8">
+                        {#each sortedCollections as collection}
+                            {@const href = `${base}/project-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
+                            {@const isSelected = collectionId === collection.$id}
+                            <li class:is-selected={isSelected}>
+                                <a
+                                    class="u-padding-block-4 u-padding-inline-12 u-flex u-cross-center u-gap-8"
+                                    {href}>
+                                    <Icon icon={IconTable} size="s" />
+                                    <span class="text collection-name" data-private
+                                        >{collection.name}</span>
+                                </a>
+                            </li>
+                        {/each}
+                    </ul>
+                {/if}
+            </div>
+            <button
+                class="new-button body-text-2 u-gap-8 u-margin-inline-start-12 u-flex u-cross-center u-margin-block-start-8 is-full-width"
+                on:click={() => {
+                    $showCreate = true;
+                    $showSubNavigation = false;
+                }}>
+                <span class="icon-plus" aria-hidden="true" />
+                <span class="text">Create collection</span>
+            </button>
+        </section>
+    </Sidebar.Base>
+{:else}
+    <Navbar.Base>
+        <div slot="left">
+            <Layout.Stack direction="row" alignItems="center" gap="s">
+                <Icon icon={IconDatabase} size="s" color="--neutral-300" />
+                <Typography.Text color="--color-fgcolor-neutral-secondary"
+                    >{data.database.name}</Typography.Text>
+                <span style:margin-left="8px">/</span>
+                <button
+                    type="button"
+                    class="trigger"
+                    aria-label="Open collections"
+                    on:click={() => {
+                        openBottomSheet = !openBottomSheet;
+                    }}>
+                    <span class="orgName">{selectedCollection.name}</span>
+                    <Icon icon={IconChevronDown} size="s" />
+                </button>
+            </Layout.Stack>
        </div>
-        <button
-            class="new-button body-text-2 u-gap-8 u-margin-inline-start-12 u-flex u-cross-center u-margin-block-start-8 is-full-width"
-            on:click={() => {
-                $showCreate = true;
-                $showSubNavigation = false;
-            }}>
-            <span class="icon-plus" aria-hidden="true" />
-            <span class="text">Create collection</span>
-        </button>
-    </section>
-</Sidebar.Base>
+    </Navbar.Base>
+{/if}
+{#if openBottomSheet}
+    <BottomSheet.Menu
+        bind:isOpen={openBottomSheet}
+        menu={{
+            top: {
+                items: sortedCollections.slice(0, 10).map((collection) => {
+                    return {
+                        name: collection.name,
+                        leadingIcon: IconTable,
+                        href: `${base}/project-${project}/databases/database-${databaseId}/collection-${collection.$id}`
+                    };
+                })
+            },
+            bottom: undefined
+        }}></BottomSheet.Menu>
+{/if}

 <style lang="scss">
    .list-container {
@@ -120,4 +159,27 @@
    .new-button {
        flex-shrink: 0;
    }
+
+    :global(.sub-navigation header) {
+        top: 48px !important;
+    }
+    .trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-1, 2px) var(--space-2, 4px) var(--space-1, 2px) var(--space-3, 6px);
+        gap: var(--space-2, 4px);
+        transition: color 0.2s ease;
+
+        color: var(--color-fgcolor-neutral-secondary);
+        border-radius: var(--corner-radius-medium, 8px);
+
+        cursor: default;
+        /* Body text/level 2 Regular */
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%; /* 21px */
+    }
 </style>