From 30b2a6f22b3d3305e6d732f3eceec395764ad3be Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Fri, 22 Aug 2025 17:45:57 -0600 Subject: [PATCH 01/53] new navigation rail component, minor website redesign, and more tweaks --- src/lib/misc/recommended-styles.css | 5 + src/lib/nav/NavigationRail.svelte | 137 ++++++++++++++++++++++ src/lib/nav/NavigationRailItem.svelte | 158 ++++++++++++++++++++++++++ src/routes/+layout.svelte | 116 ++++++++----------- src/routes/+page.svelte | 24 ++-- src/routes/21.svelte | 89 +++++++++++++++ 6 files changed, 449 insertions(+), 80 deletions(-) create mode 100644 src/lib/nav/NavigationRail.svelte create mode 100644 src/lib/nav/NavigationRailItem.svelte create mode 100644 src/routes/21.svelte diff --git a/src/lib/misc/recommended-styles.css b/src/lib/misc/recommended-styles.css index fad46bec..df53b4c5 100644 --- a/src/lib/misc/recommended-styles.css +++ b/src/lib/misc/recommended-styles.css @@ -37,3 +37,8 @@ background-color: rgb(var(--m3-scheme-tertiary-container)); color: rgb(var(--m3-scheme-on-tertiary-container)); } + +:root { + scroll-behavior: smooth; + scrollbar-color: rgb(var(--m3-scheme-on-secondary-fixed-variant)) rgb(var(--m3-scheme-surface-container-low)); +} \ No newline at end of file diff --git a/src/lib/nav/NavigationRail.svelte b/src/lib/nav/NavigationRail.svelte new file mode 100644 index 00000000..4211daea --- /dev/null +++ b/src/lib/nav/NavigationRail.svelte @@ -0,0 +1,137 @@ + + +
+
+
+ {#if collapsible} + + {/if} + + {#if fab} +
+ {@render fab(open)} +
+ {/if} +
+ +
+ {@render children()} +
+
+
+ + \ No newline at end of file diff --git a/src/lib/nav/NavigationRailItem.svelte b/src/lib/nav/NavigationRailItem.svelte new file mode 100644 index 00000000..b49553ca --- /dev/null +++ b/src/lib/nav/NavigationRailItem.svelte @@ -0,0 +1,158 @@ + + + + + \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1253084b..dc50e37e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -12,11 +12,13 @@ import { page } from "$app/state"; import NavCMLX from "$lib/nav/NavCMLX.svelte"; import NavCMLXItem from "$lib/nav/NavCMLXItem.svelte"; + import NavigationRailItem from '$lib/nav/NavigationRailItem.svelte'; + import NavigationRail from '$lib/nav/NavigationRail.svelte'; import { styling } from "./state"; import "../app.css"; let { children }: { children: Snippet } = $props(); - let innerWidth = $state(0); + let innerWidth = $state(); const paths = [ { @@ -31,6 +33,24 @@ iconS: iconPaletteS, label: "Theme", }, + { + path: base + "/docs/quick-start", + icon: iconBook, + iconS: iconBookS, + label: "Setup", + }, + { + path: base + "/docs/detailed-walkthrough", + icon: iconBook, + iconS: iconBookS, + label: "Advanced", + }, + { + path: base + "/llms.txt", + icon: iconBook, + iconS: iconBookS, + label: "llms.txt", + } ]; const normalizePath = (path: string) => { const u = new URL(path, page.url.href); @@ -41,102 +61,62 @@ {@html ``} + +
- + {#each paths as { path, icon, iconS, label }} - {@const selected = normalizePath(path) === normalizePath(page.url.pathname)} - + {@const active = normalizePath(path) === normalizePath(page.url.pathname)} + + + {/each} - {#if page.url.pathname.startsWith(base + "/docs") || innerWidth >= 840} - {#each [["Quick start", `${base}/docs/quick-start`], ["Walkthrough", `${base}/docs/detailed-walkthrough`], ["llms.txt", `${base}/llms.txt`]] as [text, href]} - - {/each} - {:else} - - {/if} - - +
+
- {@render children()} +
+ {@render children()} +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index cc3eef57..40b7370d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,5 @@ + + showCode("Navigation Rail", minimalDemo, relevantLinks)}> + + + + + {#snippet demo()} +
+ + {#snippet fab(open)} + {}} /> + {/snippet} + + + + + + + + + +
+ {/snippet} + + + \ No newline at end of file From fed6e8562982217cb3fd7bdb93974dd2b4e321f4 Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Fri, 22 Aug 2025 18:03:30 -0600 Subject: [PATCH 02/53] ripple effect, demos.md, llms.txt --- src/demos.md | 119 ++++++++++- src/lib/misc/recommended-styles.css | 7 +- src/lib/nav/NavigationRail.svelte | 252 +++++++++++----------- src/lib/nav/NavigationRailItem.svelte | 296 +++++++++++++------------- src/routes/+layout.svelte | 10 +- src/routes/21.svelte | 158 ++++++++------ static/llms.txt | 95 ++++++++- 7 files changed, 585 insertions(+), 352 deletions(-) diff --git a/src/demos.md b/src/demos.md index 5e499ac7..7d547ebb 100644 --- a/src/demos.md +++ b/src/demos.md @@ -786,7 +786,13 @@ let Component = $derived( Minimal demo: ```svelte - ``` Full demo: @@ -816,15 +822,10 @@ let options = $derived([ {#snippet demo()} - {/snippet} ``` - ## Slider Minimal demo: @@ -1156,3 +1157,107 @@ let errored = $state(false); {/if} {/snippet} ``` + +## Navigation Rail + +Minimal demo: + +```svelte + + {#snippet fab(open)} + alert("!")} + /> + {/snippet} + + + + + + + + + +``` + +Full demo: + +```use +DateField +DateFieldOutlined +``` + +```ts +let fullyCollapse = $state(false); +let collapsible = $state(true); +let modal = $state(false); +``` + +```svelte + + + + +{#snippet demo()} +
+ + {#snippet fab(open)} + {}} + /> + {/snippet} + + + + + + + + + +
+{/snippet} +``` diff --git a/src/lib/misc/recommended-styles.css b/src/lib/misc/recommended-styles.css index df53b4c5..72e227c6 100644 --- a/src/lib/misc/recommended-styles.css +++ b/src/lib/misc/recommended-styles.css @@ -39,6 +39,7 @@ } :root { - scroll-behavior: smooth; - scrollbar-color: rgb(var(--m3-scheme-on-secondary-fixed-variant)) rgb(var(--m3-scheme-surface-container-low)); -} \ No newline at end of file + scroll-behavior: smooth; + scrollbar-color: rgb(var(--m3-scheme-on-secondary-fixed-variant)) + rgb(var(--m3-scheme-surface-container-low)); +} diff --git a/src/lib/nav/NavigationRail.svelte b/src/lib/nav/NavigationRail.svelte index 4211daea..934e8785 100644 --- a/src/lib/nav/NavigationRail.svelte +++ b/src/lib/nav/NavigationRail.svelte @@ -1,137 +1,137 @@
-
-
- {#if collapsible} - - {/if} - - {#if fab} -
- {@render fab(open)} -
- {/if} -
- -
- {@render children()} +
+
+ {#if collapsible} + + {/if} + + {#if fab} +
+ {@render fab(open)}
+ {/if}
+ +
+ {@render children()} +
+
\ No newline at end of file + } + diff --git a/src/lib/nav/NavigationRailItem.svelte b/src/lib/nav/NavigationRailItem.svelte index b49553ca..84394d42 100644 --- a/src/lib/nav/NavigationRailItem.svelte +++ b/src/lib/nav/NavigationRailItem.svelte @@ -1,158 +1,166 @@ - \ No newline at end of file + } + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index dc50e37e..b23121de 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -12,8 +12,8 @@ import { page } from "$app/state"; import NavCMLX from "$lib/nav/NavCMLX.svelte"; import NavCMLXItem from "$lib/nav/NavCMLXItem.svelte"; - import NavigationRailItem from '$lib/nav/NavigationRailItem.svelte'; - import NavigationRail from '$lib/nav/NavigationRail.svelte'; + import NavigationRailItem from "$lib/nav/NavigationRailItem.svelte"; + import NavigationRail from "$lib/nav/NavigationRail.svelte"; import { styling } from "./state"; import "../app.css"; @@ -50,7 +50,7 @@ icon: iconBook, iconS: iconBookS, label: "llms.txt", - } + }, ]; const normalizePath = (path: string) => { const u = new URL(path, page.url.href); @@ -75,7 +75,7 @@ {/each}
- +
{@render children()} @@ -113,7 +113,7 @@ padding: 1.5rem; } } - + @media (width >= 560px) { .content { border-top-left-radius: var(--m3-util-rounding-extra-large); diff --git a/src/routes/21.svelte b/src/routes/21.svelte index 38e0581a..bc07f4b3 100644 --- a/src/routes/21.svelte +++ b/src/routes/21.svelte @@ -1,25 +1,28 @@ - showCode("Navigation Rail", minimalDemo, relevantLinks)}> - - - - - {#snippet demo()} -
- - {#snippet fab(open)} - {}} /> - {/snippet} - - - - - - - - - -
- {/snippet} + showCode("Navigation Rail", minimalDemo, relevantLinks)} +> + + + + + {#snippet demo()} +
+ + {#snippet fab(open)} + {}} + /> + {/snippet} + + + + + + + + + +
+ {/snippet} \ No newline at end of file + } + diff --git a/static/llms.txt b/static/llms.txt index 03b70c60..301ccb28 100644 --- a/static/llms.txt +++ b/static/llms.txt @@ -1479,8 +1479,6 @@ let errored = $state(false);` to make this demo: {/snippet} ``` -## Addendum: more components - ### Nav CMLX This component works across all 4 breakpoints: compact, small, large, and expanded. Compact is equivalent to the old navigation bar (items vertical but arranged horizontally), Small is new (items horizontal and arranged horizontally), Large is equivalent to the old navigation rail (items vertical and arranged vertically), and Expanded is equivalent to the old navigation drawer (items horizontal but arranged vertically). It can take a `click` if it's a button or an `href` if it's a link. @@ -1492,3 +1490,96 @@ Minimal demo: item = "b"} /> ``` + +### Navigation Rail + +Minimal demo: +```svelte + + {#snippet fab(open)} + alert("!")} + /> + {/snippet} + + + + + + + + + +``` + +The M3 Svelte interactive demo for this component uses NavigationRail, NavigationRailItem with the TS `let fullyCollapse = $state(false); +let collapsible = $state(true); +let modal = $state(false);` to make this demo: +```svelte + + + + +{#snippet demo()} +
+ + {#snippet fab(open)} + {}} + /> + {/snippet} + + + + + + + + + +
+{/snippet} +``` \ No newline at end of file From 49b12f22cb575ea8d76d7b6387e42a9019e35507 Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Fri, 22 Aug 2025 18:10:34 -0600 Subject: [PATCH 03/53] actually export the components --- src/lib/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/index.ts b/src/lib/index.ts index db5da1dc..6b2f790b 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -49,6 +49,8 @@ export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgres export { default as NavCMLX } from "./nav/NavCMLX.svelte"; export { default as NavCMLXItem } from "./nav/NavCMLXItem.svelte"; +export { default as NavigationRail } from "./nav/NavigationRail.svelte"; +export { default as NavigationRailItem } from "./nav/NavigationRailItem.svelte"; export { default as Tabs } from "./nav/Tabs.svelte"; export { default as TabsLink } from "./nav/TabsLink.svelte"; export { default as VariableTabs } from "./nav/VariableTabs.svelte"; From 57e0844fac69c1bc88f6dfed5435d440d2e85155 Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Fri, 22 Aug 2025 18:59:29 -0600 Subject: [PATCH 04/53] non spec colors for better contrast --- src/lib/nav/NavigationRailItem.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/nav/NavigationRailItem.svelte b/src/lib/nav/NavigationRailItem.svelte index 84394d42..7715acd5 100644 --- a/src/lib/nav/NavigationRailItem.svelte +++ b/src/lib/nav/NavigationRailItem.svelte @@ -53,7 +53,7 @@ gap: 4px; font-size: 12px; user-select: none; - color: rgb(var(--m3-scheme-secondary)); + color: rgb(var(--m3-scheme-on-surface-variant)); width: fit-content; position: relative; } From 96fbe020c21c5906803237059e8ca04c46193e1b Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Fri, 22 Aug 2025 19:32:57 -0600 Subject: [PATCH 05/53] navrail modal and sidesheet shadow, update demos.md --- src/demos.md | 62 ++++++++++++------------ src/lib/nav/NavigationRail.svelte | 35 ++++++++++--- src/lib/nav/NavigationRailItem.svelte | 2 +- src/routes/+page.svelte | 22 ++++++--- src/routes/21.svelte | 4 +- src/routes/theme/TransformChooser.svelte | 1 + static/llms.txt | 62 ++++++++++++------------ 7 files changed, 107 insertions(+), 81 deletions(-) diff --git a/src/demos.md b/src/demos.md index 5dd1dee5..22f1b0e8 100644 --- a/src/demos.md +++ b/src/demos.md @@ -1227,41 +1227,39 @@ let modal = $state(false); {#snippet demo()} -
- - {#snippet fab(open)} - {}} - /> - {/snippet} + + {#snippet fab(open)} + {}} + /> + {/snippet} - + - + - + - - -
+ + {/snippet} ``` diff --git a/src/lib/nav/NavigationRail.svelte b/src/lib/nav/NavigationRail.svelte index 934e8785..95a3a6df 100644 --- a/src/lib/nav/NavigationRail.svelte +++ b/src/lib/nav/NavigationRail.svelte @@ -6,6 +6,7 @@ import Icon from "$lib/misc/_icon.svelte"; + let m3Container = $state(); let { open = false, collapsible = true, @@ -23,8 +24,8 @@ } = $props(); -
-
+
+
{#if collapsible}
+ + {#if modal} + +
open = false}>
+ {/if}
diff --git a/static/llms.txt b/static/llms.txt index 98f63a61..1006ea4e 100644 --- a/static/llms.txt +++ b/static/llms.txt @@ -1199,21 +1199,11 @@ let options = $derived([ {#snippet demo()} - {#if variant === "filled"} - {/snippet} ``` @@ -1494,18 +1484,6 @@ let errored = $state(false);` to make this demo: {/snippet} ``` -### Nav CMLX - -This component works across all 4 breakpoints: compact, small, large, and expanded. Compact is equivalent to the old navigation bar (items vertical but arranged horizontally), Small is new (items horizontal and arranged horizontally), Large is equivalent to the old navigation rail (items vertical and arranged vertically), and Expanded is equivalent to the old navigation drawer (items horizontal but arranged vertically). It can take a `click` if it's a button or an `href` if it's a link. - -Minimal demo: -```svelte - - item = "a"} /> - item = "b"} /> - -``` - ### Navigation Rail Minimal demo: @@ -1542,8 +1520,7 @@ Minimal demo: ``` -The M3 Svelte interactive demo for this component uses NavigationRail, NavigationRailItem with the TS `let fullyCollapse = $state(false); -let collapsible = $state(true); +The M3 Svelte interactive demo for this component uses DateField, DateFieldOutlined with the TS `let collapse = $state<'full' | 'normal' | 'none'>('normal'); let modal = $state(false);` to make this demo: ```svelte - {#snippet demo()} - + {#snippet fab(open)} (false);` to make this demo: /> {/snippet} -``` \ No newline at end of file +``` + +## Addendum: more components + +### Nav CMLX + +This component works across all 4 breakpoints: compact, small, large, and expanded. Compact is equivalent to the old navigation bar (items vertical but arranged horizontally), Small is new (items horizontal and arranged horizontally), Large is equivalent to the old navigation rail (items vertical and arranged vertically), and Expanded is equivalent to the old navigation drawer (items horizontal but arranged vertically). It can take a `click` if it's a button or an `href` if it's a link. + +Minimal demo: +```svelte + + item = "a"} /> + item = "b"} /> + +``` From 8166446ee8541b41c4dc9cfef28ae422fe987dd2 Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Sat, 23 Aug 2025 20:56:41 -0600 Subject: [PATCH 13/53] generating messes stuff up --- src/routes/21.svelte | 174 +++++++++++++++++++++++-------------------- 1 file changed, 94 insertions(+), 80 deletions(-) diff --git a/src/routes/21.svelte b/src/routes/21.svelte index 9cc1fbbb..2d731610 100644 --- a/src/routes/21.svelte +++ b/src/routes/21.svelte @@ -1,99 +1,113 @@ - showCode("Navigation Rail", minimalDemo, relevantLinks)}> - - + showCode("Navigation Rail", minimalDemo, relevantLinks)} +> + + -{#snippet demo()} - - {#snippet fab(open)} - {}} - /> - {/snippet} + {#snippet demo()} +
+ + {#snippet fab(open)} + {}} + /> + {/snippet} - + - + - + - - -{/snippet} + + +
+ {/snippet} + + From ccbcb0491c21ca576a0531b1095a2d8c41888032 Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Sat, 23 Aug 2025 21:38:12 -0600 Subject: [PATCH 14/53] remove themed scrollbars --- src/lib/misc/recommended-styles.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/lib/misc/recommended-styles.css b/src/lib/misc/recommended-styles.css index 72e227c6..06e04476 100644 --- a/src/lib/misc/recommended-styles.css +++ b/src/lib/misc/recommended-styles.css @@ -36,10 +36,4 @@ ::selection { background-color: rgb(var(--m3-scheme-tertiary-container)); color: rgb(var(--m3-scheme-on-tertiary-container)); -} - -:root { - scroll-behavior: smooth; - scrollbar-color: rgb(var(--m3-scheme-on-secondary-fixed-variant)) - rgb(var(--m3-scheme-surface-container-low)); -} +} \ No newline at end of file From 315d6957ac2e5cb9cd926b102469e12ce5a935dc Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Sat, 23 Aug 2025 23:46:36 -0600 Subject: [PATCH 15/53] update demo --- src/routes/21.svelte | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/routes/21.svelte b/src/routes/21.svelte index 2d731610..4201e98a 100644 --- a/src/routes/21.svelte +++ b/src/routes/21.svelte @@ -21,6 +21,10 @@ }[], ) => void; }>(); + + $effect(() => { + modal = collapse === 'full' ? true : modal; + }); const minimalDemo = `${"<"}NavigationRail> {#snippet fab(open)} @@ -68,12 +72,7 @@ ${"<"}/NavigationRail>`;
{#snippet fab(open)} - {}} - /> + {}} /> {/snippet} From 16ca778bba59924bad44029bb7940f68c36c4aad Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Sun, 24 Aug 2025 10:11:55 -0600 Subject: [PATCH 16/53] fighting eslint, font stuff --- eslint.config.js | 6 ++++++ src/lib/nav/NavigationRail.svelte | 5 ++--- src/lib/nav/NavigationRailItem.svelte | 14 +++++++++++--- src/routes/21.svelte | 1 + 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 051a9444..8df50d28 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -54,6 +54,12 @@ export default ts.config( "svelte/prefer-writable-derived": "off", }, }, + { + files: ["src/routes/*.svelte"], + rules: { + "svelte/prefer-writable-derived": "off", + }, + }, { files: ["src/routes/*.svelte"], rules: { diff --git a/src/lib/nav/NavigationRail.svelte b/src/lib/nav/NavigationRail.svelte index 49b9a170..d4a5f334 100644 --- a/src/lib/nav/NavigationRail.svelte +++ b/src/lib/nav/NavigationRail.svelte @@ -6,7 +6,6 @@ import Icon from "$lib/misc/_icon.svelte"; - let m3Container = $state(); let { open = false, collapse = 'normal', @@ -22,7 +21,7 @@ } = $props(); -
+
{#if collapse !== 'none' && collapse !== false} @@ -33,7 +32,7 @@ {#if fab}
- {@render fab(open)} + {@render fab(open && (collapse !== 'none' && collapse !== false))}
{/if}
diff --git a/src/lib/nav/NavigationRailItem.svelte b/src/lib/nav/NavigationRailItem.svelte index f1d45c7a..69e61252 100644 --- a/src/lib/nav/NavigationRailItem.svelte +++ b/src/lib/nav/NavigationRailItem.svelte @@ -24,7 +24,7 @@ } = $props(); -
{/snippet} From 3f28df7663579c131dc59e12f5216395724918a5 Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Sun, 24 Aug 2025 11:02:13 -0600 Subject: [PATCH 19/53] fix nesting, update demo --- src/demos.md | 16 ++++------------ src/lib/nav/NavigationRailItem.svelte | 20 ++++++++++++++++---- src/routes/+layout.svelte | 5 ++--- static/llms.txt | 16 ++++------------ 4 files changed, 26 insertions(+), 31 deletions(-) diff --git a/src/demos.md b/src/demos.md index 8b3100e9..72eac33b 100644 --- a/src/demos.md +++ b/src/demos.md @@ -1184,17 +1184,13 @@ Minimal demo: ``` @@ -1243,17 +1239,13 @@ let modal = $state(false); {/snippet} diff --git a/src/lib/nav/NavigationRailItem.svelte b/src/lib/nav/NavigationRailItem.svelte index 376ede80..e64d267a 100644 --- a/src/lib/nav/NavigationRailItem.svelte +++ b/src/lib/nav/NavigationRailItem.svelte @@ -1,5 +1,5 @@ - +{/if} + +{#snippet item()}
@@ -36,7 +48,7 @@
{label} - +{/snippet} \ No newline at end of file diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 63bb05f7..7cb66233 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,13 +7,15 @@ import iconBook from "@ktibow/iconset-material-symbols/book-2-outline"; import iconBookS from "@ktibow/iconset-material-symbols/book-2"; import iconAnimation from "@ktibow/iconset-material-symbols/animation"; - import iconAnimationS from "@ktibow/iconset-material-symbols/animation"; + import iconMenu from "@ktibow/iconset-material-symbols/menu"; import { base } from "$app/paths"; import { page } from "$app/state"; import NavCMLX from "$lib/nav/NavCMLX.svelte"; import NavCMLXItem from "$lib/nav/NavCMLXItem.svelte"; import NavigationRailItem from "$lib/nav/NavigationRailItem.svelte"; import NavigationRail from "$lib/nav/NavigationRail.svelte"; + import Button from "$lib/buttons/Button.svelte"; + import Icon from "$lib/misc/_icon.svelte"; import { styling } from "./state"; import "../app.css"; @@ -51,6 +53,12 @@ iconS: iconBookS, label: "llms.txt", }, + { + path: base + "/transitions", + icon: iconAnimation, + iconS: iconAnimation, + label: "Motion", + } ]; const normalizePath = (path: string) => { const u = new URL(path, page.url.href); @@ -66,7 +74,7 @@
- + {#each paths as { path, icon, iconS, label }} {@const active = normalizePath(path) === normalizePath(page.url.pathname)} @@ -76,6 +84,14 @@
+ {#if !!innerWidth && innerWidth < 560} +
+ +
+ {/if} + {@render children()}
@@ -97,6 +113,12 @@ background: rgb(var(--m3-scheme-background)); width: 100%; } + + .railtoggle { + margin-block-start: 40px; + margin-inline-start: 20px; + } + @media (width < 52.5rem) { .container { --m3-util-bottom-offset: 5rem; From 024a9b7de7c3104a9ccff8dea1e06eed2dd8bf57 Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Wed, 27 Aug 2025 09:42:55 -0600 Subject: [PATCH 34/53] finish navigationtoggle --- src/lib/nav/NavigationRail.svelte | 10 ++-------- src/lib/nav/NavigationToggle.svelte | 5 +---- src/routes/+layout.svelte | 14 ++++++-------- 3 files changed, 9 insertions(+), 20 deletions(-) diff --git a/src/lib/nav/NavigationRail.svelte b/src/lib/nav/NavigationRail.svelte index fd5b3b70..f009ab0d 100644 --- a/src/lib/nav/NavigationRail.svelte +++ b/src/lib/nav/NavigationRail.svelte @@ -2,11 +2,9 @@ import type { Snippet } from "svelte"; import NavigationToggle from "./NavigationToggle.svelte"; - import Icon from "$lib/misc/_icon.svelte"; - let active = $state(false); let { - open = false, + open = $bindable(false), collapse = 'normal', modal = false, alignment = 'top', @@ -28,10 +26,6 @@ open = false; } } - - $effect(() => { - console.log(active); - }); @@ -40,7 +34,7 @@
{#if collapse !== 'none' && collapse !== false} - + {/if} {#if fab} diff --git a/src/lib/nav/NavigationToggle.svelte b/src/lib/nav/NavigationToggle.svelte index c053b743..034b207d 100644 --- a/src/lib/nav/NavigationToggle.svelte +++ b/src/lib/nav/NavigationToggle.svelte @@ -7,16 +7,13 @@ let noAnimations = $state(true); let { - active + active = $bindable() } = $props<{ active: boolean; }>(); // Prevent the animation on page load onMount(() => setTimeout(() => noAnimations = false)); - $effect(() => { - console.log(active); - }); +
{/if} @@ -115,8 +113,8 @@ } .railtoggle { - margin-block-start: 40px; - margin-inline-start: 20px; + margin-block-start: 24px; + margin-inline-start: 4px; } @media (width < 52.5rem) { From 79e215c14250c3e69e76f1ca804f466a60e9da5f Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Wed, 27 Aug 2025 11:01:10 -0600 Subject: [PATCH 35/53] color fixes based off figma design --- src/lib/nav/NavigationRailItem.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/nav/NavigationRailItem.svelte b/src/lib/nav/NavigationRailItem.svelte index 45ad317f..f2e161f9 100644 --- a/src/lib/nav/NavigationRailItem.svelte +++ b/src/lib/nav/NavigationRailItem.svelte @@ -57,11 +57,11 @@ cursor: pointer; gap: 4px; user-select: none; - color: rgb(var(--m3-scheme-secondary)); width: fit-content; position: relative; font-family: var(--m3-font-body, var(--m3-font)); animation: none !important; + color: rgb(var(--m3-scheme-on-surface-variant)); } .icon { @@ -104,6 +104,7 @@ .m3-container.active > .icon { background: rgb(var(--m3-scheme-secondary-container)); + color: rgb(var(--m3-scheme-secondary)); } .m3-container:not(.active):hover > .icon { @@ -168,6 +169,7 @@ .m3-container.active { background: rgb(var(--m3-scheme-secondary-container)); + color: rgb(var(--m3-scheme-on-secondary-container)); } .m3-container:not(.active):hover { From 15cb131bf04fdfcb483d38b167b292530ac9efda Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Wed, 27 Aug 2025 14:01:05 -0600 Subject: [PATCH 36/53] small tweaks --- src/lib/nav/NavigationRail.svelte | 5 ++-- src/lib/nav/NavigationRailItem.svelte | 33 ++++++++++++++++----------- 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/lib/nav/NavigationRail.svelte b/src/lib/nav/NavigationRail.svelte index f009ab0d..61b855a1 100644 --- a/src/lib/nav/NavigationRail.svelte +++ b/src/lib/nav/NavigationRail.svelte @@ -44,7 +44,7 @@ {/if}
- @@ -76,7 +76,7 @@ flex-direction: column; width: 96px; height: 100%; - padding: 40px 0px; + padding: 44px 0px; transition: all var(--m3-util-easing-spatial); overflow: hidden; overflow-y: auto; @@ -109,7 +109,6 @@ display: flex; flex-direction: column; gap: 16px; - margin-inline-start: 20px; width: 56px; container: items / inline-size; align-self: stretch; diff --git a/src/lib/nav/NavigationRailItem.svelte b/src/lib/nav/NavigationRailItem.svelte index f2e161f9..d03ca625 100644 --- a/src/lib/nav/NavigationRailItem.svelte +++ b/src/lib/nav/NavigationRailItem.svelte @@ -20,48 +20,55 @@ {#if 'href' in props} - + {@render item()} {:else} - {/if} {#snippet item()} - +
+ -
- +
+ - {#if typeof badge === "string" || badge === true} - - {typeof badge === "string" ? badge : ""} - - {/if} -
+ {#if typeof badge === "string" || badge === true} + + {typeof badge === "string" ? badge : ""} + + {/if} +
- {label} + {label} +
{/snippet} From 38046d13bc8a28c034d44565b91b7dfd8b9495c1 Mon Sep 17 00:00:00 2001 From: MrSproutt <84256826+mrsproutt@users.noreply.github.com> Date: Wed, 27 Aug 2025 22:25:41 -0600 Subject: [PATCH 40/53] figma saves the day (again) --- src/demos.md | 4 ++-- src/lib/nav/NavigationRail.svelte | 35 +++++++++++++++++-------------- src/routes/+layout.svelte | 3 --- src/routes/21.svelte | 4 ++-- static/llms.txt | 4 ++-- 5 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/demos.md b/src/demos.md index 1f6f02f3..485a9eb8 100644 --- a/src/demos.md +++ b/src/demos.md @@ -1203,7 +1203,7 @@ DateFieldOutlined ``` ```ts -let collapse = $state<'full' | 'normal' | 'none'>('normal'); +let collapse = $state<'full' | 'normal' | 'no'>('normal'); let alignment = $state<'top' | 'center'>('center'); let modal = $state(false); ``` @@ -1220,7 +1220,7 @@ let modal = $state(false); : "Center"}