From 090224fc70010c3415ed8915f72db05aa4c5da1d Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Tue, 22 Oct 2024 20:15:02 +0100 Subject: [PATCH 01/36] refactor(#35): move nav into component --- src/lib/components/Nav.svelte | 130 ++++++++++++++++++++++++++++++++++ src/routes/+layout.svelte | 121 ++----------------------------- 2 files changed, 135 insertions(+), 116 deletions(-) create mode 100644 src/lib/components/Nav.svelte diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte new file mode 100644 index 0000000..1fcf0b3 --- /dev/null +++ b/src/lib/components/Nav.svelte @@ -0,0 +1,130 @@ + + + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 9e50d24..e9471e0 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,22 +2,16 @@ import '../app.postcss'; import { onDestroy, onMount } from 'svelte'; import { isBrowser } from '@supabase/ssr'; - import { basket, type Basket, type Item } from '$lib/stores/basket.js'; import { general } from '$lib/stores/generalStore.js'; import { invalidate } from '$app/navigation'; - import SignOut from '$lib/components/SignOut.svelte'; import CookieConsent from '$lib/components/CookieConsent.svelte'; - import NavLinks from '$lib/components/NavLinks.svelte'; - import MagicLink from '$lib/components/MagicLink.svelte'; + import Nav from '$lib/components/Nav.svelte'; export let data; let { supabase, session } = data; $: ({ supabase, session } = data); - let localBasket: Basket; - const unsubscribeToBasket = basket.subscribe((value) => { - localBasket = value; - }); + let localGeneral: any; const unsubscribeToGeneralStore = general.subscribe((value) => { @@ -25,7 +19,6 @@ }); onDestroy(() => { - unsubscribeToBasket(); unsubscribeToGeneralStore(); }); @@ -48,11 +41,9 @@ return () => data.subscription.unsubscribe(); }); - let isMobileMenuOpen = false; + - function toggleMobileMenu() { - isMobileMenuOpen = !isMobileMenuOpen; - } + @@ -69,109 +60,7 @@
- +
From 6959bcdd04cb274d25348a876215e48ebdc9da94 Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Tue, 22 Oct 2024 20:15:27 +0100 Subject: [PATCH 02/36] refactor: remove unused refs --- src/routes/checkout/+page.svelte | 6 +++--- src/routes/checkout/success/+page.svelte | 2 +- src/routes/products/[productId]/+page.svelte | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/routes/checkout/+page.svelte b/src/routes/checkout/+page.svelte index e60cc21..639fa0c 100644 --- a/src/routes/checkout/+page.svelte +++ b/src/routes/checkout/+page.svelte @@ -1,11 +1,11 @@ + \ No newline at end of file + diff --git a/src/lib/components/NavLinkParent.svelte b/src/lib/components/NavLinkParent.svelte new file mode 100644 index 0000000..b08255b --- /dev/null +++ b/src/lib/components/NavLinkParent.svelte @@ -0,0 +1,16 @@ + + +
+ ▼{text} +
    + {#each children ?? [] as child} +
  • {child.text}
    • + {/each} +
+
diff --git a/src/lib/components/NavLinks.svelte b/src/lib/components/NavLinks.svelte index 481167b..cab7a22 100644 --- a/src/lib/components/NavLinks.svelte +++ b/src/lib/components/NavLinks.svelte @@ -1,23 +1,41 @@ -
  • Products
    • -
  • - {#if isMobile} -
    Parent
    - {:else} -
    - ▼Parent -
    - {/if} - -
    • -
  • Example Product
    • +
      + {#each links as link} +
    • + {#if link.isParent} + + {:else} + {link.text} + {/if} +
      • + {/each} +
    diff --git a/src/lib/types/Nav/NavLinkItem.ts b/src/lib/types/Nav/NavLinkItem.ts new file mode 100644 index 0000000..6c0afb4 --- /dev/null +++ b/src/lib/types/Nav/NavLinkItem.ts @@ -0,0 +1,6 @@ +export interface NavLinkItem { + text: string; + href?: string; + isParent?: boolean; + children?: NavLinkItem[]; +} From ec8adbf8074b78683ebe410bc212a54a432b9358 Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Tue, 22 Oct 2024 21:35:05 +0100 Subject: [PATCH 04/36] refactor(#35): Add dropdown and closing logic to parent nav link --- src/lib/components/NavLinkParent.svelte | 37 ++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/lib/components/NavLinkParent.svelte b/src/lib/components/NavLinkParent.svelte index b08255b..4988000 100644 --- a/src/lib/components/NavLinkParent.svelte +++ b/src/lib/components/NavLinkParent.svelte @@ -1,16 +1,45 @@ -
    - ▼{text} -
      +
      +
      + +
      + -
    + \ No newline at end of file From f20e856d449858c670308f32fe1cf2dfb40a92b7 Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Tue, 22 Oct 2024 21:43:31 +0100 Subject: [PATCH 05/36] refactor(#35): Split dropdown into standalone component --- src/lib/components/Dropdown.svelte | 44 ++++++++++++++++++++++++ src/lib/components/NavLinkParent.svelte | 45 ++++--------------------- 2 files changed, 51 insertions(+), 38 deletions(-) create mode 100644 src/lib/components/Dropdown.svelte diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte new file mode 100644 index 0000000..d7068e3 --- /dev/null +++ b/src/lib/components/Dropdown.svelte @@ -0,0 +1,44 @@ + + +
    +
    + +
    +
      + +
    +
    \ No newline at end of file diff --git a/src/lib/components/NavLinkParent.svelte b/src/lib/components/NavLinkParent.svelte index 4988000..b15005a 100644 --- a/src/lib/components/NavLinkParent.svelte +++ b/src/lib/components/NavLinkParent.svelte @@ -1,45 +1,14 @@ -
    -
    - -
    -
      - {#each children ?? [] as child} -
    • {child.text}
      • - {/each} -
    -
    \ No newline at end of file + +
    {text}
    + {#each children ?? [] as child} +
  • {child.text}
    • + {/each} +     \ No newline at end of file From d6baf11a7c2b42c097e2636d935516d1ff2b8563 Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Tue, 22 Oct 2024 21:53:44 +0100 Subject: [PATCH 06/36] refactor(#35): add guard clause to escape event listener if dropdown is not open --- src/lib/components/Dropdown.svelte | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte index d7068e3..150d867 100644 --- a/src/lib/components/Dropdown.svelte +++ b/src/lib/components/Dropdown.svelte @@ -13,10 +13,8 @@ onMount(() => { const handleClick = (event: MouseEvent) => { - if (!dropdown.contains(event.target as Node) && isOpen) { - isOpen = false; - } - if (event.target instanceof HTMLAnchorElement) { + if (!isOpen) return; + if (!dropdown.contains(event.target as Node) || event.target instanceof HTMLAnchorElement) { isOpen = false; } }; From a16959d7ba716816aed87b22fe188a13abaadcfc Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Tue, 22 Oct 2024 22:04:19 +0100 Subject: [PATCH 07/36] refactor(#35): use dropdown component for user/signin --- src/lib/components/Dropdown.svelte | 5 +-- src/lib/components/Nav.svelte | 56 +++++++++++++----------------- src/lib/components/NavLinks.svelte | 2 +- 3 files changed, 29 insertions(+), 34 deletions(-) diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte index 150d867..3940f8a 100644 --- a/src/lib/components/Dropdown.svelte +++ b/src/lib/components/Dropdown.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte'; export let indicator: boolean = false; + export let posRight: boolean = false; let isOpen = false; let dropdown: HTMLDivElement; @@ -27,7 +28,7 @@ }); -
    +
    -
      +
    \ No newline at end of file diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte index 4df31ae..b562109 100644 --- a/src/lib/components/Nav.svelte +++ b/src/lib/components/Nav.svelte @@ -3,6 +3,7 @@ import MagicLink from "./MagicLink.svelte"; import NavLinks from "./NavLinks.svelte"; import SignOut from "./SignOut.svelte"; + import Dropdown from "./Dropdown.svelte"; import { basket, type Basket } from '$lib/stores/basket.js'; import { onDestroy } from "svelte"; @@ -73,42 +74,35 @@ -
    - -
    - {#if session?.user} -
    - {session?.user.email ? session?.user.email[0].toUpperCase() : '?'} -
    - {:else} - - - - {/if} + +
    +
    +
    + {#if session?.user} +
    + {session?.user.email ? session?.user.email[0].toUpperCase() : '?'} +
    + {:else} + + + + {/if} +
    -
    +
    {#if session?.user} - +
  • Account
    • +
  • Settings
    • +
    • {:else} -
    - -
    + {/if} - + diff --git a/src/lib/components/NavLinks.svelte b/src/lib/components/NavLinks.svelte index cab7a22..b7643b1 100644 --- a/src/lib/components/NavLinks.svelte +++ b/src/lib/components/NavLinks.svelte @@ -30,7 +30,7 @@
      {#each links as link} -
    • +
    • {#if link.isParent} {:else} From 867f0f43f69024a10df7a18f49cf3653a79e2f0a Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Tue, 22 Oct 2024 22:18:59 +0100 Subject: [PATCH 08/36] refactor(#35): center text in avatar button --- src/lib/components/Nav.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte index b562109..3def3ab 100644 --- a/src/lib/components/Nav.svelte +++ b/src/lib/components/Nav.svelte @@ -76,11 +76,11 @@
      -
      +
      {#if session?.user}
      - {session?.user.email ? session?.user.email[0].toUpperCase() : '?'} + {session?.user.email ? session?.user.email[0].toUpperCase() : '?'}
      {:else} From 6ed1b255839e62e27c88f041798ee33565b8cc1b Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Tue, 22 Oct 2024 22:19:19 +0100 Subject: [PATCH 09/36] refactor(#35): conditionally display basket indicator --- src/lib/components/Nav.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte index 3def3ab..6018b49 100644 --- a/src/lib/components/Nav.svelte +++ b/src/lib/components/Nav.svelte @@ -69,7 +69,9 @@ d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> - {localBasket.items.length} + {#if localBasket.items.length > 0} + {localBasket.items.length} + {/if}
      From 3a5e961d540fdb70f2430706617801fd4c4622c3 Mon Sep 17 00:00:00 2001 From: OllyNicholass Date: Thu, 24 Oct 2024 00:28:28 +0100 Subject: [PATCH 10/36] feat(#35): add new mobile menu --- src/lib/components/CookieConsent.svelte | 7 +- src/lib/components/Dropdown.svelte | 74 ++++---- src/lib/components/Nav.svelte | 222 +++++++++++++----------- src/lib/components/NavLinkParent.svelte | 43 ++++- src/lib/components/NavLinks.svelte | 20 ++- src/routes/+layout.svelte | 99 +++++------ 6 files changed, 264 insertions(+), 201 deletions(-) diff --git a/src/lib/components/CookieConsent.svelte b/src/lib/components/CookieConsent.svelte index 09984b7..8872559 100644 --- a/src/lib/components/CookieConsent.svelte +++ b/src/lib/components/CookieConsent.svelte @@ -1,5 +1,7 @@ {#if showBanner} -
      +

      We use cookies to ensure you get the best experience on our website. By continuing, you agree to our use of cookies. diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte index 3940f8a..0c3c645 100644 --- a/src/lib/components/Dropdown.svelte +++ b/src/lib/components/Dropdown.svelte @@ -1,43 +1,51 @@ -

      -
      - -
      -
        - -
      -
      \ No newline at end of file +
      +
      + +
      + {#if isOpen} +
        + +
      + {/if} +
      diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte index 6018b49..5879ace 100644 --- a/src/lib/components/Nav.svelte +++ b/src/lib/components/Nav.svelte @@ -1,110 +1,136 @@ - diff --git a/src/lib/components/NavLinkParent.svelte b/src/lib/components/NavLinkParent.svelte index b15005a..57ea726 100644 --- a/src/lib/components/NavLinkParent.svelte +++ b/src/lib/components/NavLinkParent.svelte @@ -1,14 +1,39 @@ - -
      {text}
      - {#each children ?? [] as child} -
    • {child.text}
      • - {/each} - \ No newline at end of file +{#if !isMobile} + +
      {text}
      + {#each children ?? [] as child} +
    • {child.text}
      • + {/each} +       +{:else} + + {#if isOpen} +
        + {#each children ?? [] as child} +
      • {child.text}
        • + {/each} +
      + {/if} +{/if} diff --git a/src/lib/components/NavLinks.svelte b/src/lib/components/NavLinks.svelte index b7643b1..51c657e 100644 --- a/src/lib/components/NavLinks.svelte +++ b/src/lib/components/NavLinks.svelte @@ -2,10 +2,12 @@ import { type NavLinkItem } from '$lib/types/Nav/NavLinkItem'; import NavLinkParent from './NavLinkParent.svelte'; + export let isMobile = false; + const links: NavLinkItem[] = [ { text: 'Products', - href: '/products', + href: '/products' }, { text: 'Parent', @@ -13,26 +15,26 @@ children: [ { text: 'Submenu 1', - href: '/', + href: '/' }, { text: 'Submenu 2', - href: '/', - }, - ], + href: '/' + } + ] }, { text: 'Example Product', - href: '/tools/exampleproduct', - }, + href: '/tools/exampleproduct' + } ]; -
        +
          {#each links as link}
        • {#if link.isParent} - + {:else} {link.text} {/if} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index e9471e0..600a745 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,13 +6,13 @@ import { invalidate } from '$app/navigation'; import CookieConsent from '$lib/components/CookieConsent.svelte'; import Nav from '$lib/components/Nav.svelte'; + import { slide } from 'svelte/transition'; + import { cubicInOut } from 'svelte/easing'; export let data; let { supabase, session } = data; $: ({ supabase, session } = data); - - let localGeneral: any; const unsubscribeToGeneralStore = general.subscribe((value) => { localGeneral = value; @@ -40,10 +40,6 @@ return () => data.subscription.unsubscribe(); }); - - - - @@ -126,52 +122,53 @@ - +{/if}