Skip to content

Commit 73b1d5a

Browse files
Rich-HarrisRich-Harris
authored
Split nav (#118)
* move search bar to right hand side * shuffle nav around * tweaks
1 parent 9e4672f commit 73b1d5a

File tree

11 files changed

+77
-121
lines changed

11 files changed

+77
-121
lines changed

‎apps/svelte.dev/src/lib/icons/discord-black.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/svelte.dev/src/lib/icons/discord-white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/svelte.dev/src/lib/icons/github-black.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/svelte.dev/src/lib/icons/github-white.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/svelte.dev/src/lib/icons/theme-dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/svelte.dev/src/lib/icons/theme-light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/svelte.dev/src/routes/+layout.svelte‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,12 @@
3131
{/snippet}
3232

3333
{#snippet external_links()}
34-
<a href="/chat" title="Discord Chat">
35-
<span class="small">Discord</span>
36-
<span class="large"><Icon name="discord" /></span>
34+
<a href="/chat" data-icon="discord" title="Discord Chat">
35+
<span>Discord</span>
3736
</a>
3837

39-
<a href="https://github.com/sveltejs/svelte" title="GitHub Repo">
40-
<span class="small">GitHub</span>
41-
<span class="large"><Icon name="github" /></span>
38+
<a href="https://github.com/sveltejs/svelte" data-icon="github" title="GitHub Repo">
39+
<span>GitHub</span>
4240
</a>
4341
{/snippet}
4442
</Nav>
@@ -66,4 +64,46 @@
6664
height: 100%;
6765
width: 100%;
6866
}
67+
68+
@media (min-width: 800px) {
69+
[data-icon] {
70+
background: no-repeat 50% 50%;
71+
background-size: calc(100% - 1rem) auto;
72+
padding: 0 0.5rem;
73+
opacity: 0.6;
74+
75+
:global(.dark) & {
76+
opacity: 0.8;
77+
}
78+
79+
/* visually hidden, but visible to screen readers */
80+
span {
81+
clip: rect(0 0 0 0);
82+
clip-path: inset(50%);
83+
height: 1px;
84+
overflow: hidden;
85+
position: absolute;
86+
white-space: nowrap;
87+
width: 1px;
88+
}
89+
}
90+
91+
[data-icon='discord'] {
92+
width: 3.4rem;
93+
background-image: url($lib/icons/discord-black.svg);
94+
95+
:global(.dark) & {
96+
background-image: url($lib/icons/discord-white.svg);
97+
}
98+
}
99+
100+
[data-icon='github'] {
101+
width: 3rem;
102+
background-image: url($lib/icons/github-black.svg);
103+
104+
:global(.dark) & {
105+
background-image: url($lib/icons/github-white.svg);
106+
}
107+
}
108+
}
69109
</style>

‎packages/site-kit/src/lib/components/Icons.svelte‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -51,20 +51,6 @@ Provides a list of svg icons that can be referenced through the `Icon` component
5151
<polygon points="18 2 22 6 12 16 8 16 8 12 18 2" />
5252
</symbol>
5353

54-
<symbol viewBox="0 0 24 24" id="github" stroke-width="0">
55-
<path
56-
fill="currentColor"
57-
d="M12 0a12 12 0 1 0 0 24a12 12 0 0 0 0-24zm3.163 21.783h-.093a.513.513 0 0 1-.382-.14a.513.513 0 0 1-.14-.372v-1.406c.006-.467.01-.94.01-1.416a3.693 3.693 0 0 0-.151-1.028a1.832 1.832 0 0 0-.542-.875a8.014 8.014 0 0 0 2.038-.471a4.051 4.051 0 0 0 1.466-.964c.407-.427.71-.943.885-1.506a6.77 6.77 0 0 0 .3-2.13a4.138 4.138 0 0 0-.26-1.476a3.892 3.892 0 0 0-.795-1.284a2.81 2.81 0 0 0 .162-.582c.033-.2.05-.402.05-.604c0-.26-.03-.52-.09-.773a5.309 5.309 0 0 0-.221-.763a.293.293 0 0 0-.111-.02h-.11c-.23.002-.456.04-.674.111a5.34 5.34 0 0 0-.703.26a6.503 6.503 0 0 0-.661.343c-.215.127-.405.249-.573.362a9.578 9.578 0 0 0-5.143 0a13.507 13.507 0 0 0-.572-.362a6.022 6.022 0 0 0-.672-.342a4.516 4.516 0 0 0-.705-.261a2.203 2.203 0 0 0-.662-.111h-.11a.29.29 0 0 0-.11.02a5.844 5.844 0 0 0-.23.763c-.054.254-.08.513-.081.773c0 .202.017.404.051.604c.033.199.086.394.16.582A3.888 3.888 0 0 0 5.702 10a4.142 4.142 0 0 0-.263 1.476a6.871 6.871 0 0 0 .292 2.12c.181.563.483 1.08.884 1.516c.415.422.915.75 1.466.964c.653.25 1.337.41 2.033.476a1.828 1.828 0 0 0-.452.633a2.99 2.99 0 0 0-.2.744a2.754 2.754 0 0 1-1.175.27a1.788 1.788 0 0 1-1.065-.3a2.904 2.904 0 0 1-.752-.824a3.1 3.1 0 0 0-.292-.382a2.693 2.693 0 0 0-.372-.343a1.841 1.841 0 0 0-.432-.24a1.2 1.2 0 0 0-.481-.101c-.04.001-.08.005-.12.01a.649.649 0 0 0-.162.02a.408.408 0 0 0-.13.06a.116.116 0 0 0-.06.1a.33.33 0 0 0 .14.242c.093.074.17.131.232.171l.03.021c.133.103.261.214.382.333c.112.098.213.209.3.33c.09.119.168.246.231.381c.073.134.15.288.231.463c.188.474.522.875.954 1.145c.453.243.961.364 1.476.351c.174 0 .349-.01.522-.03c.172-.028.343-.057.515-.091v1.743a.5.5 0 0 1-.533.521h-.062a10.286 10.286 0 1 1 6.324 0v.005z"
58-
/>
59-
</symbol>
60-
61-
<symbol viewBox="0 0 24 24" id="discord" stroke-width="0">
62-
<path
63-
fill="currentColor"
64-
d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"
65-
/>
66-
</symbol>
67-
6854
<symbol id="git-branch" class="icon" viewBox="0 0 24 24">
6955
<line x1="6" y1="3" x2="6" y2="15" />
7056
<circle cx="18" cy="6" r="3" />

‎packages/site-kit/src/lib/components/ThemeToggle.svelte‎

Lines changed: 12 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script lang="ts">
22
import { theme } from '../stores';
3-
import { BROWSER } from 'esm-env';
43
import { onDestroy } from 'svelte';
54
65
let { label = 'Dark mode' }: { label?: string } = $props();
@@ -44,72 +43,20 @@
4443
type="button"
4544
aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
4645
aria-label={label}
47-
>
48-
<span class="check" class:checked={$theme.current === 'dark'}>
49-
<span class="icon">
50-
{#if BROWSER}
51-
{#if $theme.current === 'dark'}
52-
{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>`}
53-
{:else}
54-
{@html `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></g></svg>`}
55-
{/if}
56-
{/if}
57-
</span>
58-
</span>
59-
</button>
46+
></button>
6047

6148
<style>
6249
button {
63-
position: relative;
64-
border-radius: 11px;
65-
display: block;
66-
width: 40px;
67-
height: 22px;
68-
flex-shrink: 0;
69-
border: 1px solid var(--sk-text-4);
70-
background-color: var(--sk-back-2);
71-
transition: border-color 0.25s;
72-
}
73-
74-
button:hover {
75-
color: var(--sk-text-1);
76-
77-
border-color: var(--sk-text-1);
78-
}
79-
80-
.check {
81-
position: absolute;
82-
top: 1px;
83-
left: 1px;
84-
width: 18px;
85-
height: 18px;
86-
border-radius: 50%;
87-
background-color: var(--sk-back-4);
88-
box-shadow:
89-
0 1px 2px rgba(0, 0, 0, 0.04),
90-
0 1px 2px rgba(0, 0, 0, 0.06);
91-
transition: transform 0.25s;
92-
pointer-events: none;
93-
}
94-
95-
.check.checked {
96-
transform: translate(18px);
97-
}
98-
99-
.icon {
100-
position: relative;
101-
display: block;
102-
width: 18px;
103-
height: 18px;
104-
border-radius: 50%;
105-
overflow: hidden;
106-
}
107-
108-
.icon :global(svg) {
109-
position: absolute;
110-
top: 3px;
111-
left: 3px;
112-
width: 12px;
113-
height: 12px;
50+
width: 2rem;
51+
height: 2rem;
52+
background: red;
53+
background: url($lib/icons/theme-light.svg);
54+
background-size: contain;
55+
opacity: 0.6;
56+
57+
:global(.dark) & {
58+
background: url($lib/icons/theme-dark.svg);
59+
opacity: 0.8;
60+
}
11461
}
11562
</style>

‎packages/site-kit/src/lib/nav/Nav.svelte‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
2121
links: NavigationLink[];
2222
search?: Snippet;
2323
external_links?: Snippet;
24-
theme_label?: Snippet;
2524
}
2625
27-
let {
28-
home_title = 'Homepage',
29-
title,
30-
links,
31-
search,
32-
external_links,
33-
theme_label
34-
}: Props = $props();
26+
let { home_title = 'Homepage', title, links, search, external_links }: Props = $props();
3527
3628
let visible = $state(true);
3729
@@ -88,10 +80,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
8880
{/if}
8981

9082
<div class="desktop">
91-
<div class="center-area">
92-
{@render search?.()}
93-
</div>
94-
9583
<div class="menu">
9684
{#each links as link}
9785
{#if link.sections?.[0].path}
@@ -105,15 +93,15 @@ Top navigation bar for the application. It provides a slot for the left side, th
10593
</a>
10694
{/if}
10795
{/each}
96+
</div>
10897

109-
<Separator />
110-
98+
<div class="menu">
11199
{@render external_links?.()}
112100

101+
{@render search?.()}
102+
113103
<div class="appearance">
114-
<span class="caption"
115-
>{#if theme_label}{@render theme_label()}{:else}Theme{/if}</span
116-
>
104+
<span class="caption">Theme</span>
117105
<ThemeToggle />
118106
</div>
119107
</div>
@@ -138,9 +126,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
138126
<Separator />
139127

140128
<div class="appearance">
141-
<span class="caption"
142-
>{#if theme_label}{@render theme_label()}{:else}Theme{/if}</span
143-
>
129+
<span class="caption">Theme</span>
144130
<ThemeToggle />
145131
</div>
146132
</Menu>
@@ -224,6 +210,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
224210
background-size: auto 70%;
225211
align-items: center;
226212
padding-left: calc(var(--sk-page-padding-side) + 4rem);
213+
padding-right: 2rem;
227214
text-decoration: none;
228215
text-transform: uppercase;
229216
letter-spacing: 0.05em;
@@ -317,13 +304,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
317304
}
318305
}
319306
320-
.desktop .center-area {
321-
display: flex;
322-
align-items: center;
323-
justify-content: center;
324-
flex: 1;
325-
}
326-
327307
@media (min-width: 800px) {
328308
nav {
329309
display: grid;
@@ -342,6 +322,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
342322
height: 100%;
343323
align-items: center;
344324
padding: 0 var(--sk-page-padding-side) 0 0;
325+
}
326+
327+
.menu:last-child {
345328
justify-content: end;
346329
}
347330
@@ -357,11 +340,4 @@ Top navigation bar for the application. It provides a slot for the left side, th
357340
display: none;
358341
}
359342
}
360-
361-
@media (min-width: 1240px) {
362-
nav {
363-
display: grid;
364-
grid-template-columns: 1fr auto 1fr;
365-
}
366-
}
367343
</style>

0 commit comments

Comments
 (0)