From 169ae4b03e34d61f6e08b9809850f53ea762bae8 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 14 Jun 2023 19:28:27 -0400 Subject: [PATCH 01/17] WIP --- packages/site-kit/src/lib/nav/Menu.svelte | 16 +- packages/site-kit/src/lib/nav/Nav.svelte | 141 ++++++++++++------ .../src/lib/nav/NavContextMenu.svelte | 9 +- packages/site-kit/src/lib/nav/NavItem.svelte | 124 --------------- packages/site-kit/src/lib/nav/index.js | 1 - packages/site-kit/src/lib/nav/nav.context.js | 24 --- packages/site-kit/src/lib/types.d.ts | 9 +- 7 files changed, 108 insertions(+), 216 deletions(-) delete mode 100644 packages/site-kit/src/lib/nav/NavItem.svelte delete mode 100644 packages/site-kit/src/lib/nav/nav.context.js diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index 13965e69..65790abc 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -5,30 +5,20 @@ const dispatch = createEventDispatcher(); - let open = false; - - function toggle() { - open = !open; - - if (!open) dispatch('close'); - } + /** @type {boolean} */ + export let open; function close() { dispatch('close'); - open = false; } $: $overlay_open = open;
-
- -
- {#if open}
- +
{/if}
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 32e87b9c..ac6ddc49 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -16,32 +16,23 @@ Top navigation bar for the application. It provides a slot for the left side, th import Menu from './Menu.svelte'; import NavContextMenu from './NavContextMenu.svelte'; import Separator from './Separator.svelte'; - import { set_nav_context } from './nav.context'; export let home_title = 'Homepage'; /** @type {string | undefined} */ export let title; - /** @type {import('../types').Menu} */ - export let menu; + /** @type {import('../types').NavigationLink[]} */ + export let links; - /** @type {import('svelte/store').Writable} */ - const current_menu_view = writable(null); + /** @type {import('../types').NavigationLink | undefined} */ + let current_menu_view = undefined; + + let show_context_menu = false; /** @type {import('svelte/store').Writable} */ const page_selected = writable(null); - set_nav_context({ current_menu_view, page_selected }); - - let context_menu = 'docs'; - - $: if ($current_menu_view ?? $page_selected) { - context_menu = /** @type {string} */ ($current_menu_view ?? $page_selected); - } - - $: context_menu_content = menu[context_menu]; - /** @type {NavContextMenu} */ let nav_context_instance; @@ -79,20 +70,22 @@ Top navigation bar for the application. It provides a slot for the left side, th } $: { - if (browser && $current_menu_view !== null) { + if (browser && current_menu_view) { nav_context_instance?.scrollToActive(); } } onMount(() => { - $current_menu_view = $page_selected; + const segment = $page.url.pathname.split('/')[1]; + current_menu_view = links.find((link) => link.prefix === segment); }); afterNavigate(({ to }) => { - if (to?.url.pathname === '/') { - $current_menu_view = null; - $page_selected = null; - } + // if (to?.url.pathname === '/') { + // const segment = $page.url.pathname.split('/')[1]; + // current_menu_view = links.find((link) => link.prefix === segment); + // show_context_menu = !!current_menu_view; + // } open = false; }); @@ -103,7 +96,7 @@ Top navigation bar for the application. It provides a slot for the left side, th * @returns {import('svelte/transition').TransitionConfig} */ const slide = (node, { duration = 400, easing = expoOut } = {}) => { - const height = context_menu ? node.clientHeight : universal_menu_inner_height; + const height = current_menu_view ? node.clientHeight : universal_menu_inner_height; return { css: (t, u) => @@ -167,21 +160,20 @@ Top navigation bar for the application. It provides a slot for the left side, th
- ($current_menu_view = $page_selected)}> - - + + + (open = false)}>
(ready = mounted)} /> @@ -210,8 +202,8 @@ Top navigation bar for the application. It provides a slot for the left side, th const a = 'calc(var(--height-difference) + 10px)'; const b = '10px'; - const start = $current_menu_view ? a : b; - const end = $current_menu_view ? b : a; + const start = current_menu_view ? a : b; + const end = current_menu_view ? b : a; const container = e.currentTarget; @@ -234,6 +226,25 @@ Top navigation bar for the application. It provides a slot for the left side, th
    + {#each links as link} +
  • + + {link.title} + + + {#if link.sections} + + {/if} +
    • + {/each}
@@ -247,10 +258,15 @@ Top navigation bar for the application. It provides a slot for the left side, th
- + {#if current_menu_view} + + {/if}
- @@ -266,8 +282,13 @@ Top navigation bar for the application. It provides a slot for the left side, th
Theme @@ -581,19 +602,39 @@ Top navigation bar for the application. It provides a slot for the left side, th } .mobile-main-menu :global(li) { + position: relative; + display: block; + align-items: center; padding: 0.3rem 0; + height: 4rem; + } + + .mobile-main-menu li button { + position: absolute; + right: 0; + top: 0; + width: 4rem; + height: 100%; + } + + .mobile-main-menu li button :global(svg) { + stroke-width: 0; } .mobile-main-menu :global(li a) { + display: flex; + align-items: center; border-radius: var(--sk-border-radius); width: 100%; + height: 100%; + padding-left: 1rem; } .mobile-main-menu :global(li a[aria-current]) { background-color: hsla(var(--sk-theme-1-hsl), 0.05); } - .mobile-main-menu :global(li a:hover) { + .mobile-main-menu :global(li:hover a) { border-radius: var(--sk-border-radius); color: initial; @@ -623,6 +664,10 @@ Top navigation bar for the application. It provides a slot for the left side, th font-size: var(--sk-text-s); } + + nav :global(.large) { + display: none; + } } @media (min-width: 800px) { @@ -640,7 +685,6 @@ Top navigation bar for the application. It provides a slot for the left side, th } ul :global(li) { - margin: 0 0.5rem; padding: 0; } @@ -648,6 +692,11 @@ Top navigation bar for the application. It provides a slot for the left side, th display: flex; align-items: center; height: 100%; + padding: 0.5rem; + } + + ul :global(a:hover) { + color: var(--sk-theme-3); } .external { @@ -658,5 +707,9 @@ Top navigation bar for the application. It provides a slot for the left side, th .buttons { display: none; } + + nav :global(.small) { + display: none; + } } diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte index aa301dbe..6d3f81df 100644 --- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte +++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte @@ -3,14 +3,7 @@ import { tick } from 'svelte'; /** - * @type {{ - * title: string; - * sections: { - * title: string; - * path: string; - * badge?: string; - * }[] - * }[]} + * @type {import('../types').Section[]} */ export let contents = []; diff --git a/packages/site-kit/src/lib/nav/NavItem.svelte b/packages/site-kit/src/lib/nav/NavItem.svelte deleted file mode 100644 index 6f16514d..00000000 --- a/packages/site-kit/src/lib/nav/NavItem.svelte +++ /dev/null @@ -1,124 +0,0 @@ - - - - -
  • - - - - - - - - - {#if relatedMenuName} - - - {/if} - -
    • - - diff --git a/packages/site-kit/src/lib/nav/index.js b/packages/site-kit/src/lib/nav/index.js index 48026495..ab0e6537 100644 --- a/packages/site-kit/src/lib/nav/index.js +++ b/packages/site-kit/src/lib/nav/index.js @@ -1,5 +1,4 @@ export { default as Nav } from './Nav.svelte'; -export { default as NavItem } from './NavItem.svelte'; export { default as PreloadingIndicator } from './PreloadingIndicator.svelte'; export { default as Separator } from './Separator.svelte'; export { default as SkipLink } from './SkipLink.svelte'; diff --git a/packages/site-kit/src/lib/nav/nav.context.js b/packages/site-kit/src/lib/nav/nav.context.js deleted file mode 100644 index dd8c33dc..00000000 --- a/packages/site-kit/src/lib/nav/nav.context.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @typedef {{ - * current_menu_view: import("svelte/store").Writable - * page_selected: import("svelte/store").Writable - * }} NavContext - */ - -import { getContext, setContext } from 'svelte'; - -const symbol = Symbol('NavContext'); - -/** - * @param {NavContext} value - */ -export function set_nav_context(value) { - setContext(symbol, value); -} - -/** - * @returns {NavContext} - */ -export function get_nav_context() { - return getContext(symbol); -} diff --git a/packages/site-kit/src/lib/types.d.ts b/packages/site-kit/src/lib/types.d.ts index 72048a78..96c84ae4 100644 --- a/packages/site-kit/src/lib/types.d.ts +++ b/packages/site-kit/src/lib/types.d.ts @@ -1,4 +1,4 @@ -export interface Section { +interface Section { title: string; sections: { title: string; @@ -7,4 +7,9 @@ export interface Section { }[]; } -export type Menu = Record; +export interface NavigationLink { + title: string; + prefix: string; + pathname: string; + sections?: Section[]; +} From f90429d28814bcdccc41d4ed97064c73af1e2811 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 15 Jun 2023 20:41:32 -0400 Subject: [PATCH 02/17] various --- .../src/lib/components/ThemeToggle.svelte | 2 +- packages/site-kit/src/lib/nav/Menu.svelte | 40 ++- packages/site-kit/src/lib/nav/Nav.svelte | 257 +++++++----------- .../site-kit/src/lib/nav/Separator.svelte | 10 +- 4 files changed, 136 insertions(+), 173 deletions(-) diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte index 98995396..55a5760d 100644 --- a/packages/site-kit/src/lib/components/ThemeToggle.svelte +++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte @@ -68,7 +68,7 @@ width: 40px; height: 22px; flex-shrink: 0; - border: 1px solid var(--sk-text-3); + border: 1px solid var(--sk-text-4); background-color: var(--sk-back-2); transition: border-color 0.25s; } diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index 65790abc..e031bf7e 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -1,21 +1,32 @@
    + + {#if open}
    @@ -26,16 +37,33 @@ diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index ac6ddc49..463727ab 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -4,7 +4,6 @@ Top navigation bar for the application. It provides a slot for the left side, th - -{#if linear} - -{:else} - -{/if} + From e95d5dceb0746c6d8ff7d422cf2b30a4c9e9eb78 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 16 Jun 2023 07:58:47 -0400 Subject: [PATCH 08/17] remove unused styles --- packages/site-kit/src/lib/nav/Nav.svelte | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 8daa6c5f..a789aa71 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -368,20 +368,6 @@ Top navigation bar for the application. It provides a slot for the left side, th font-weight: inherit; } - .home .nav-title { - display: flex; - align-items: center; - - margin-left: 1rem; - padding: 0.5rem 0 0.5rem 1rem; - font-size: 0.7em; - color: var(--sk-text-3); - line-height: 1; - height: 40%; - - border-left: solid 1px var(--sk-text-4); - } - .mobile { display: flex; position: absolute; @@ -409,10 +395,6 @@ Top navigation bar for the application. It provides a slot for the left side, th padding-left: 2rem; } - .menu-toggle { - padding-right: 2rem; - } - .appearance { display: flex; align-items: center; From 35db724c31dc90dad74bf7275eda955abc696972 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 16 Jun 2023 08:13:13 -0400 Subject: [PATCH 09/17] fix homepage link --- packages/site-kit/src/lib/nav/Nav.svelte | 26 ++++++++++++------------ 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index a789aa71..b12c0a85 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -131,7 +131,7 @@ Top navigation bar for the application. It provides a slot for the left side, th style:z-index={$overlay_open && $searching ? 80 : null} aria-label="Primary" > - + @@ -332,7 +332,13 @@ Top navigation bar for the application. It provides a slot for the left side, th } .home { - height: var(--sk-nav-height); + height: 100%; + display: flex; + align-items: center; + } + + .home a { + height: 100%; display: flex; background-image: url(../branding/svelte-logo.svg); background-position: calc(var(--sk-page-padding-side) - 1rem) 50%; @@ -340,11 +346,6 @@ Top navigation bar for the application. It provides a slot for the left side, th background-size: auto 70%; align-items: center; padding-left: calc(var(--sk-page-padding-side) + 4rem); - } - - .home { - display: flex; - align-items: center; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; @@ -352,6 +353,11 @@ Top navigation bar for the application. It provides a slot for the left side, th color: var(--sk-text-4); } + .home { + display: flex; + align-items: center; + } + .home .home-small { display: none; @@ -409,11 +415,6 @@ Top navigation bar for the application. It provides a slot for the left side, th } @media (max-width: 799px) { - .nav-spot, - nav .mobile :global(button) { - z-index: 7; - } - nav { top: unset; bottom: 0; @@ -428,7 +429,6 @@ Top navigation bar for the application. It provides a slot for the left side, th align-items: center; height: var(--sk-nav-height); - padding-left: calc(var(--sk-page-padding-side) + 4rem); } .home .home-small { From 3344e262cd59f185d3302ba4564bd30586ebded6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 16 Jun 2023 08:20:22 -0400 Subject: [PATCH 10/17] fix link, simplify markup --- packages/site-kit/src/lib/nav/Nav.svelte | 80 ++++++++++-------------- 1 file changed, 34 insertions(+), 46 deletions(-) diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index b12c0a85..f5022408 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -131,23 +131,21 @@ Top navigation bar for the application. It provides a slot for the left side, th style:z-index={$overlay_open && $searching ? 80 : null} aria-label="Primary" > - - - - - - - - - - - - {#if title} -
    - ｜ {title} -
    - {/if} -     + + + + + + + + + + + {#if title} +
    + ｜ {title} +
    + {/if}
    @@ -170,7 +168,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
    -
    +
    {#if open} -
    - +
    +
    +
    (ready = mounted)} + /> + +
    { + const target = /** @type {HTMLElement} */ (e.target); + + if (!target?.classList.contains('viewport')) return; + if (e.propertyName !== 'transform') return; + + // we need to apply a clip-path during the transition so that the contents + // are constrained to the menu background, but only while the transition + // is running, otherwise it prevents the contents from being scrolled + const a = 'calc(var(--height-difference) + 10px)'; + const b = '10px'; + + const start = show_context_menu ? a : b; + const end = show_context_menu ? b : a; + + const container = e.currentTarget; + + container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`; + + setTimeout(() => { + container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`; + }, 0); + }} + on:transitionend={(e) => { + const target = /** @type {HTMLElement} */ (e.target); + + if (!target?.classList.contains('viewport')) return; + if (e.propertyName !== 'transform') return; + + e.currentTarget.style.clipPath = ''; + }} + > +
    +
    +
    + {#each links as link} + + {link.title} + + {#if link.sections} + + {/if} + + {/each} + + +
    +
    + +
    + {#if current_menu_view} + + {/if} +
    + + +
    +
    +
    {/if}
    @@ -62,4 +229,154 @@ line-height: 1; } + + .menu-background { + position: absolute; + width: 100%; + left: 0; + bottom: 0; + height: 100%; + border-radius: 1rem 1rem 0 0; + background: var(--background, var(--sk-back-2)); + } + + .menu-background.ready { + transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1); + } + + .menu-background.dark { + border-top: solid 1.1px hsla(0, 0%, 100%, 0.2); + } + + .mobile-main-menu { + height: 100%; + } + + .clip { + width: 100%; + height: 100%; + transition: clip-path 0.4s cubic-bezier(0.23, 1, 0.32, 1); + } + + .viewport { + position: relative; + display: grid; + width: 200%; + height: 100%; + grid-template-columns: 50% 50%; + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + grid-auto-rows: 100%; + } + + .viewport.reduced-motion { + transition: none; + } + + .viewport.offset { + transform: translate3d(-50%, 0, 0); + } + + .universal .contents { + position: absolute; + width: 50%; + bottom: 0; + padding: 1rem; + max-height: 70vh; + overflow-y: scroll; + } + + .viewport > * { + overflow-y: auto; + transition: inherit; + transition-property: transform, opacity; + } + + .context { + position: relative; + height: 100%; + padding-bottom: 2rem; + } + + .back-button { + position: absolute; + bottom: 0; + right: 0; + z-index: 9; + + display: flex; + align-items: center; + justify-content: start; + gap: 1rem; + + font-size: 0.9em; + color: var(--sk-text-3); + + background-color: var(--sk-back-2); + + width: 50%; + height: 48px; + padding: 0 1.5rem; + } + + .back-button :global(svg) { + transform: scale(0.8); + } + + .viewport :global(a) { + position: relative; + display: block; + align-items: center; + padding: 0.3rem 0; + height: 4rem; + color: var(--sk-text-2); + } + + .universal .contents, + .context, + .back-button { + pointer-events: all; + } + + .universal :global(a) { + position: relative; + } + + .universal .contents :global(a button) { + position: absolute; + right: 0; + top: 0; + width: 4rem; + height: 100%; + } + + .viewport :global(a svg) { + stroke-width: 0; + } + + .viewport :global(a) { + display: flex; + align-items: center; + border-radius: var(--sk-border-radius); + width: 100%; + height: 100%; + padding-left: 1rem; + } + + .viewport :global(a[aria-current='true']) { + background-color: hsla(var(--sk-theme-1-hsl), 0.05); + } + + .viewport :global(a:hover) { + border-radius: var(--sk-border-radius); + + color: initial; + text-decoration: none; + + background-color: var(--sk-back-4); + } + + .viewport :global(a[aria-current='true']:hover) { + background-color: hsla(var(--sk-theme-1-hsl), 0.05); + color: var(--sk-theme-1); + } diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index f5022408..defe83db 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -3,16 +3,10 @@ Top navigation bar for the application. It provides a slot for the left side, th --> - -
    -
    (ready = mounted)} - /> - -
    { - const target = /** @type {HTMLElement} */ (e.target); - - if (!target?.classList.contains('viewport')) return; - if (e.propertyName !== 'transform') return; - - // we need to apply a clip-path during the transition so that the contents - // are constrained to the menu background, but only while the transition - // is running, otherwise it prevents the contents from being scrolled - const a = 'calc(var(--height-difference) + 10px)'; - const b = '10px'; - - const start = show_context_menu ? a : b; - const end = show_context_menu ? b : a; - - const container = e.currentTarget; - - container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`; - - setTimeout(() => { - container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`; - }, 0); - }} - on:transitionend={(e) => { - const target = /** @type {HTMLElement} */ (e.target); - - if (!target?.classList.contains('viewport')) return; - if (e.propertyName !== 'transform') return; - - e.currentTarget.style.clipPath = ''; - }} - > -
    -
    -
    - {#each links as link} - - {link.title} - - {#if link.sections} - - {/if} - - {/each} - - - - - - - -
    - Theme - -
    -
    -
    - -
    - {#if current_menu_view} - - {/if} -
    - - -
    -
    + + + + + + + +
    + Theme +
    @@ -416,17 +255,6 @@ Top navigation bar for the application. It provides a slot for the left side, th bottom: 0; } - /* .home { - position: absolute; - left: 0rem; - bottom: 0; - - display: flex; - align-items: center; - - height: var(--sk-nav-height); - } */ - .home-small { display: block; } @@ -443,161 +271,6 @@ Top navigation bar for the application. It provides a slot for the left side, th padding: 1rem var(--sk-page-padding-side); } - .menu-background { - position: absolute; - width: 100%; - left: 0; - bottom: 0; - height: 100%; - border-radius: 1rem 1rem 0 0; - background: var(--background, var(--sk-back-2)); - } - - .menu-background.ready { - transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1); - } - - .menu-background.dark { - border-top: solid 1.1px hsla(0, 0%, 100%, 0.2); - } - - .mobile-main-menu { - height: 100%; - } - - .mobile-main-menu .clip { - width: 100%; - height: 100%; - transition: clip-path 0.4s cubic-bezier(0.23, 1, 0.32, 1); - } - - .mobile-main-menu .viewport { - position: relative; - display: grid; - width: 200%; - height: 100%; - grid-template-columns: 50% 50%; - transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); - grid-auto-rows: 100%; - } - - .mobile-main-menu.reduced-motion .viewport { - transition: none; - } - - .mobile-main-menu.offset .viewport { - transform: translate3d(-50%, 0, 0); - } - - .mobile-main-menu .universal .contents { - position: absolute; - width: 50%; - bottom: 0; - padding: 1rem; - max-height: 70vh; - overflow-y: scroll; - } - - .mobile-main-menu.offset .context { - transform: translate3d(0, 0, 0); - opacity: 1; - } - - .mobile-main-menu .viewport > * { - overflow-y: auto; - transition: inherit; - transition-property: transform, opacity; - } - - .mobile-main-menu .context { - position: relative; - height: 100%; - padding-bottom: 2rem; - } - - .mobile-main-menu .back-button { - position: absolute; - bottom: 0; - right: 0; - z-index: 9; - - display: flex; - align-items: center; - justify-content: start; - gap: 1rem; - - font-size: 0.9em; - color: var(--sk-text-3); - - background-color: var(--sk-back-2); - - width: 50%; - height: 48px; - padding: 0 1.5rem; - } - - .mobile-main-menu .back-button :global(svg) { - transform: scale(0.8); - } - - .mobile-main-menu :global(a) { - position: relative; - display: block; - align-items: center; - padding: 0.3rem 0; - height: 4rem; - color: var(--sk-text-2); - } - - .mobile-main-menu .universal .contents, - .mobile-main-menu .context, - .mobile-main-menu .back-button { - pointer-events: all; - } - - .mobile-main-menu .universal a { - position: relative; - } - - .mobile-main-menu .universal button { - position: absolute; - right: 0; - top: 0; - width: 4rem; - height: 100%; - } - - .mobile-main-menu :global(a svg) { - stroke-width: 0; - } - - .mobile-main-menu :global(a) { - display: flex; - align-items: center; - border-radius: var(--sk-border-radius); - width: 100%; - height: 100%; - padding-left: 1rem; - } - - .mobile-main-menu :global(a[aria-current]) { - background-color: hsla(var(--sk-theme-1-hsl), 0.05); - } - - .mobile-main-menu :global(a:hover) { - border-radius: var(--sk-border-radius); - - color: initial; - text-decoration: none; - - background-color: var(--sk-back-4); - } - - .mobile-main-menu :global(a[aria-current]:hover) { - background-color: hsla(var(--sk-theme-1-hsl), 0.05); - color: var(--sk-theme-1); - } - .appearance { position: relative; display: flex; diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte index 6d3f81df..8f064477 100644 --- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte +++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte @@ -1,62 +1,36 @@ -