From 68a7060e867aca31fd303834369991ae82ea6b6d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 15 Oct 2024 12:59:52 -0400 Subject: [PATCH 1/6] various fixes --- packages/site-kit/src/lib/nav/Menu.svelte | 46 +++++------------------ 1 file changed, 10 insertions(+), 36 deletions(-) diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index f17e84843d..26a112da2c 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -194,7 +194,7 @@ {#if link.sections} {/if} @@ -230,12 +230,11 @@ - {#if $open_store} + {#if open}
- + {/snippet} @@ -69,50 +59,8 @@ {/if} diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index 552b24ce25..5fa5aecbf5 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -18,13 +18,11 @@ import type { NavigationLink } from '../types'; interface Props { - open: boolean; links: NavigationLink[]; - children?: Snippet; back_button?: Snippet; } - let { links, children, back_button }: Props = $props(); + let { links, back_button }: Props = $props(); let open = $state(false); @@ -175,37 +173,44 @@ >
- {#each links as link} -
- - {link.title} - - - {#if link.sections} - - {/if} -
- {/each} - - {@render children?.()} +
    + {#each links as link} +
  • + + {link.title} + + + {#if link.sections} + + {/if} +
    • + {/each} +
+ +
+ +
@@ -380,11 +385,25 @@ pointer-events: all; } - .universal .link-item { - display: flex; + .universal { + ul { + list-style: none; + margin: 0; + } + + li { + display: flex; + + a { + flex: 1; + } + } - a { - flex: 1; + hr { + margin: 0.5rem 0; + height: 1px; + background: var(--sk-back-6); + border: none; } } diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 125a6bfaf7..a6f38f2a7b 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -8,7 +8,6 @@ Top navigation bar for the application. It provides a slot for the left side, th import { page } from '$app/stores'; import ThemeToggle from '../components/ThemeToggle.svelte'; import Menu from './Menu.svelte'; - import Separator from './Separator.svelte'; import type { NavigationLink } from '../types'; import type { Snippet } from 'svelte'; import Dropdown from '../components/Dropdown.svelte'; @@ -19,10 +18,9 @@ Top navigation bar for the application. It provides a slot for the left side, th title: string | undefined; links: NavigationLink[]; search?: Snippet; - external_links?: Snippet; } - let { home_title = 'Homepage', title, links, search, external_links }: Props = $props(); + let { home_title = 'Homepage', title, links, search }: Props = $props(); let visible = $state(true); @@ -107,7 +105,9 @@ Top navigation bar for the application. It provides a slot for the left side, th {@render search?.()}
- {@render external_links?.()} + +
@@ -127,11 +127,7 @@ Top navigation bar for the application. It provides a slot for the left side, th - - - - {@render external_links?.()} - +
@@ -260,18 +256,6 @@ Top navigation bar for the application. It provides a slot for the left side, th display: block; } - .appearance { - display: flex; - align-items: center; - margin-left: 1.5rem; - } - - .appearance .caption { - display: none; - line-height: 1; - margin-right: 0rem; - } - @media (max-width: 799px) { nav { top: unset; @@ -286,19 +270,6 @@ Top navigation bar for the application. It provides a slot for the left side, th padding: 1rem var(--sk-page-padding-side); } - .appearance { - position: relative; - display: flex; - padding: 1.5rem 0; - margin: 0 1rem; - justify-content: space-between; - } - - .appearance .caption { - display: block; - font: var(--sk-font-ui-medium); /* TODO this should be inherited */ - } - nav :global(.large) { display: none; } @@ -338,6 +309,31 @@ Top navigation bar for the application. It provides a slot for the left side, th .desktop { display: contents; + + [data-icon] { + background: no-repeat 50% 50%; + background-size: calc(100% - 1rem) auto; + padding: 0 0.5rem; + height: 100%; + } + + [data-icon='discord'] { + width: 3.4rem; + background-image: url($lib/icons/discord-light.svg); + + :global(.dark) & { + background-image: url($lib/icons/discord-dark.svg); + } + } + + [data-icon='github'] { + width: 3rem; + background-image: url($lib/icons/github-light.svg); + + :global(.dark) & { + background-image: url($lib/icons/github-dark.svg); + } + } } nav :global(.small) { diff --git a/packages/site-kit/src/lib/nav/Separator.svelte b/packages/site-kit/src/lib/nav/Separator.svelte deleted file mode 100644 index bb6160853e..0000000000 --- a/packages/site-kit/src/lib/nav/Separator.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - -
- - diff --git a/packages/site-kit/src/lib/nav/index.ts b/packages/site-kit/src/lib/nav/index.ts index ab0e653725..12c8c7365b 100644 --- a/packages/site-kit/src/lib/nav/index.ts +++ b/packages/site-kit/src/lib/nav/index.ts @@ -1,4 +1,3 @@ export { default as Nav } from './Nav.svelte'; export { default as PreloadingIndicator } from './PreloadingIndicator.svelte'; -export { default as Separator } from './Separator.svelte'; export { default as SkipLink } from './SkipLink.svelte'; From a547fc9e8532f762a464a8a3ffceeb5f3b692ac6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 15 Oct 2024 13:40:37 -0400 Subject: [PATCH 6/6] more --- apps/svelte.dev/src/routes/+layout.svelte | 13 +------------ packages/site-kit/src/lib/nav/Nav.svelte | 7 +++---- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte index 23b085672d..d8f6ef1cfe 100644 --- a/apps/svelte.dev/src/routes/+layout.svelte +++ b/apps/svelte.dev/src/routes/+layout.svelte @@ -38,11 +38,7 @@ {#snippet top_nav()} - +
- {@render search?.()} +