diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte new file mode 100644 index 0000000000..91c6e97da7 --- /dev/null +++ b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte @@ -0,0 +1,29 @@ + + +
+ {@render children()} +
+ + diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index accb4f5714..eaa708c6bd 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -13,6 +13,7 @@ import { browser } from '$app/environment'; import SelectIcon from '$lib/components/SelectIcon.svelte'; import { untrack } from 'svelte'; + import SecondaryNav from '$lib/components/SecondaryNav.svelte'; interface Props { examples: Array<{ title: string; examples: any[] }>; @@ -228,7 +229,7 @@ export default app;` -
+ {/if}
- + diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte deleted file mode 100644 index 3aef2bc36a..0000000000 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Menu.svelte +++ /dev/null @@ -1,435 +0,0 @@ - - - e.key === 'Escape' && (is_open = false)} /> - -
(is_open = false)} - use:click_outside={() => (is_open = false)} -> -
- - - - - - - - - -
-
- - diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte index 5cd2c1f4b5..4eaf488cb1 100644 --- a/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte +++ b/apps/svelte.dev/src/routes/tutorial/[...slug]/Sidebar.svelte @@ -1,12 +1,8 @@ - -
li { - --bg: var(--sk-back-1); + --bg: var(--sk-back-3); --inset: calc((var(--depth) * 1.2rem) + 1.5rem); display: flex; position: relative; @@ -189,19 +189,6 @@ color: var(--sk-theme-1); } - [aria-current='true']::after { - content: ''; - position: absolute; - width: 1rem; - height: 1rem; - top: 0.3rem; - right: calc(-0.6rem - 2px); - background-color: var(--sk-back-3); - border: 1px solid var(--sk-back-4); - transform: translate(0, 0.2rem) rotate(45deg); - z-index: 2; - } - [aria-current='true']:has(:focus-visible)::after, :global(.mobile-filetree) [aria-current='true']::after { display: none; diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte index 31c08cbc70..93ca37b817 100644 --- a/packages/site-kit/src/lib/components/Dropdown.svelte +++ b/packages/site-kit/src/lib/components/Dropdown.svelte @@ -27,8 +27,9 @@ opacity: 0; pointer-events: none; position: absolute; - left: 0; - top: calc(100% - 1rem); + left: -1rem; + /* this is a bit of a kludge, but it ensures a contiguous hit area (50% + 50%) while also working for tall links like `Docs` (50% + 1.5rem) */ + top: calc(50% + min(50%, 1.5rem)); background-color: var(--sk-back-2); z-index: 1; box-shadow: var(--sk-shadow); @@ -38,7 +39,7 @@ &.align-right { left: auto; - right: 0; + right: -1rem; } :global { diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index c31208e035..ad40421c7e 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -156,7 +156,6 @@ button { background-color: transparent; border: none; color: currentColor; - cursor: pointer; } button[disabled] { diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css index b8cacdbb1f..a0a925c9e4 100644 --- a/packages/site-kit/src/lib/styles/index.css +++ b/packages/site-kit/src/lib/styles/index.css @@ -10,4 +10,5 @@ @import './base.css'; @import './text.css'; @import './utils/buttons.css'; +@import './utils/dividers.css'; @import './utils/twoslash.css'; diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 6a74b62ce2..f7573ce365 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -16,7 +16,7 @@ --sk-secondary-nav-height: 5rem; --sk-page-padding-top: 6rem; --sk-page-padding-bottom: 6rem; - --sk-page-padding-side: 2.4rem; + --sk-page-padding-side: 1.6rem; --sk-thick-border-width: 0.3rem; --sk-border-radius: 0.4rem; --sk-page-content-width: 84rem; diff --git a/packages/site-kit/src/lib/styles/utils/dividers.css b/packages/site-kit/src/lib/styles/utils/dividers.css new file mode 100644 index 0000000000..c43f3e1840 --- /dev/null +++ b/packages/site-kit/src/lib/styles/utils/dividers.css @@ -0,0 +1,6 @@ +.divider { + z-index: 2; + &::after { + background-color: var(--sk-back-5) !important; + } +}