From d032974bf67ab48a21335b56870f2c2b538f334d Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Fri, 15 Nov 2024 17:36:31 -0500 Subject: [PATCH 01/24] start submenu --- src/lib/components/ProductsSubmenu.svelte | 83 +++++++++++++++++++++++ src/lib/layouts/Main.svelte | 2 + 2 files changed, 85 insertions(+) create mode 100644 src/lib/components/ProductsSubmenu.svelte diff --git a/src/lib/components/ProductsSubmenu.svelte b/src/lib/components/ProductsSubmenu.svelte new file mode 100644 index 00000000000..8acc52c6c18 --- /dev/null +++ b/src/lib/components/ProductsSubmenu.svelte @@ -0,0 +1,83 @@ + + +
  • Products
    • +
    +
    +
    + Products_ +
    + {#each products as product} + + {product.name} + {product.name} +

    {product.description}

    +     + {/each} +
    +
    +
    +
    diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte index 0edb612ccb9..cb8819d7f68 100644 --- a/src/lib/layouts/Main.svelte +++ b/src/lib/layouts/Main.svelte @@ -26,6 +26,7 @@ import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte'; import InitBanner from '$lib/components/InitBanner.svelte'; import { trackEvent } from '$lib/actions/analytics'; + import ProductsSubmenu from '$lib/components/ProductsSubmenu.svelte'; export let omitMainId = false; let theme: 'light' | 'dark' | null = 'dark'; @@ -254,6 +255,7 @@ {/each} + From dcef3902c0deba49834fab1c179677d9e95b91b4 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Sat, 16 Nov 2024 14:26:12 -0500 Subject: [PATCH 02/24] update components --- src/lib/components/MainNav.svelte | 104 ++++++++++++++++++++++ src/lib/components/ProductsSubmenu.svelte | 6 +- src/lib/layouts/Main.svelte | 20 +---- 3 files changed, 110 insertions(+), 20 deletions(-) create mode 100644 src/lib/components/MainNav.svelte diff --git a/src/lib/components/MainNav.svelte b/src/lib/components/MainNav.svelte new file mode 100644 index 00000000000..180ba7a6c1e --- /dev/null +++ b/src/lib/components/MainNav.svelte @@ -0,0 +1,104 @@ + + + + + + + diff --git a/src/lib/components/ProductsSubmenu.svelte b/src/lib/components/ProductsSubmenu.svelte index 8acc52c6c18..147b2cb6f9c 100644 --- a/src/lib/components/ProductsSubmenu.svelte +++ b/src/lib/components/ProductsSubmenu.svelte @@ -4,6 +4,8 @@ elements: { menu, item, trigger } } = createDropdownMenu(); + export let label: string; + const products = [ { name: 'Auth', @@ -50,14 +52,14 @@ ]; -
  • Products
    • +
  • {label}
    • Products_{label}_
    - +
    Date: Sat, 16 Nov 2024 14:28:18 -0500 Subject: [PATCH 03/24] Update ProductsSubmenu.svelte --- src/lib/components/ProductsSubmenu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/ProductsSubmenu.svelte b/src/lib/components/ProductsSubmenu.svelte index 147b2cb6f9c..bf4294a7e23 100644 --- a/src/lib/components/ProductsSubmenu.svelte +++ b/src/lib/components/ProductsSubmenu.svelte @@ -15,7 +15,7 @@ }, { name: 'Database', - href: '/products/database', + href: '/products/databases', description: 'Scalable and robust database backed by the latest technologies.', icon: '/images/icons/illustrated/dark/databases.png' }, From b4ed72c04de9e03d586e0075a48b9436d9dbf2c7 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Sun, 17 Nov 2024 17:43:56 -0500 Subject: [PATCH 04/24] udpate menu --- package.json | 2 +- pnpm-lock.yaml | 18 +++++++++--------- src/lib/components/ProductsSubmenu.svelte | 18 +++++++++++++----- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index be7a6110b29..11b743fd0ca 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@appwrite.io/repo": "github:appwrite/appwrite#1.6.x", "@internationalized/date": "3.5.0", "@melt-ui/pp": "^0.3.2", - "@melt-ui/svelte": "^0.74.4", + "@melt-ui/svelte": "^0.86.0", "@playwright/test": "^1.44.1", "@sveltejs/adapter-node": "^4.0.1", "@sveltejs/enhanced-img": "^0.1.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f4c904f6ac..38475a351e7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,10 +35,10 @@ importers: version: 3.5.0 '@melt-ui/pp': specifier: ^0.3.2 - version: 0.3.2(@melt-ui/svelte@0.74.4(svelte@4.2.19))(svelte@4.2.19) + version: 0.3.2(@melt-ui/svelte@0.86.0(svelte@4.2.19))(svelte@4.2.19) '@melt-ui/svelte': - specifier: ^0.74.4 - version: 0.74.4(svelte@4.2.19) + specifier: ^0.86.0 + version: 0.86.0(svelte@4.2.19) '@playwright/test': specifier: ^1.44.1 version: 1.48.0 @@ -836,10 +836,10 @@ packages: '@melt-ui/svelte': '>= 0.29.0' svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1 - '@melt-ui/svelte@0.74.4': - resolution: {integrity: sha512-EeDP3C1grK+bPTezJQXKid2k4RRGZakyHTghD/zg//fM6Gqe4JykVtV0Yih4QJs+yGTgJq/EaNQMQ6JkTnvHxg==} + '@melt-ui/svelte@0.86.0': + resolution: {integrity: sha512-kFyioxwvDZfD7nChq+sHaJKyLQPleJlzIORNJx1Ou1NavMrwK1sJkAdtgxuyEzief7SU3f4skSF0Cpvjewx5fA==} peerDependencies: - svelte: '>=3 <5' + svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118 '@motionone/animation@10.18.0': resolution: {integrity: sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==} @@ -5060,14 +5060,14 @@ snapshots: optionalDependencies: '@types/markdown-it': 12.2.3 - '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.74.4(svelte@4.2.19))(svelte@4.2.19)': + '@melt-ui/pp@0.3.2(@melt-ui/svelte@0.86.0(svelte@4.2.19))(svelte@4.2.19)': dependencies: - '@melt-ui/svelte': 0.74.4(svelte@4.2.19) + '@melt-ui/svelte': 0.86.0(svelte@4.2.19) estree-walker: 3.0.3 magic-string: 0.30.12 svelte: 4.2.19 - '@melt-ui/svelte@0.74.4(svelte@4.2.19)': + '@melt-ui/svelte@0.86.0(svelte@4.2.19)': dependencies: '@floating-ui/core': 1.6.8 '@floating-ui/dom': 1.6.11 diff --git a/src/lib/components/ProductsSubmenu.svelte b/src/lib/components/ProductsSubmenu.svelte index bf4294a7e23..2d88a7bb55a 100644 --- a/src/lib/components/ProductsSubmenu.svelte +++ b/src/lib/components/ProductsSubmenu.svelte @@ -1,8 +1,13 @@
  • {label}
    • -
    + +{#if open}
    -
    +{/if} From d4119e9d93579ddaaf3e72987097b16c2ae9e69b Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Sun, 17 Nov 2024 17:47:33 -0500 Subject: [PATCH 05/24] submenu --- src/lib/components/ProductsSubmenu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/ProductsSubmenu.svelte b/src/lib/components/ProductsSubmenu.svelte index 2d88a7bb55a..77a06c5c92d 100644 --- a/src/lib/components/ProductsSubmenu.svelte +++ b/src/lib/components/ProductsSubmenu.svelte @@ -5,7 +5,6 @@ elements: { trigger, menu, item, overlay }, states: { open } } = createDropdownMenu({ - forceVisible: true, loop: true }); @@ -63,6 +62,7 @@
    From 5fe2afc66a0364fb1c7b1b460c1788747fea1216 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Mon, 18 Nov 2024 12:42:39 -0500 Subject: [PATCH 06/24] update mobile nav --- src/app.css | 6 +- src/lib/components/MainNav.svelte | 49 ++------ src/lib/components/MobileNav.svelte | 14 ++- .../components/ProductsMobileSubmenu.svelte | 108 ++++++++++++++++++ src/lib/components/ProductsSubmenu.svelte | 79 +++++++------ src/lib/layouts/Main.svelte | 39 ++----- src/scss/7-components/_side-nav.scss | 3 +- .../images/icons/illustrated/dark/sites.png | Bin 0 -> 1572 bytes 8 files changed, 183 insertions(+), 115 deletions(-) create mode 100644 src/lib/components/ProductsMobileSubmenu.svelte create mode 100644 static/images/icons/illustrated/dark/sites.png diff --git a/src/app.css b/src/app.css index e4496d66cdf..2c0605023e8 100644 --- a/src/app.css +++ b/src/app.css @@ -77,8 +77,10 @@ /* Animations */ --animate-scale-in: scale-in 200ms ease-out forwards; - --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both, + --animate-text: fade 0.75s ease-in-out both, blur 0.75s ease-in-out both, up 0.75s ease-in-out both; + --animate-fade-in: fade 0.25s ease-in-out both; + --animate-fade-out: fade 0.25s ease-in-out both reverse; /* Pink polyfills */ --transition: 0.2s; @@ -111,7 +113,7 @@ } } - @keyframes fade-in { + @keyframes fade { 0% { opacity: 0; } diff --git a/src/lib/components/MainNav.svelte b/src/lib/components/MainNav.svelte index 180ba7a6c1e..90ed2e339dc 100644 --- a/src/lib/components/MainNav.svelte +++ b/src/lib/components/MainNav.svelte @@ -4,57 +4,24 @@ href?: string; showBadge?: boolean; submenu?: ComponentType; + mobileSubmenu?: ComponentType; };