diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte index 3cc07642..ab03e68e 100644 --- a/src/lib/components/app-sidebar.svelte +++ b/src/lib/components/app-sidebar.svelte @@ -26,7 +26,7 @@ // Games data import { gmaes } from '$lib/gmaes'; - import { settingsOpen } from '$lib/state.svelte'; + import { commandOpen, settingsOpen } from '$lib/state.svelte'; // Auth import posthog from 'posthog-js'; @@ -40,12 +40,10 @@ const sidebar = useSidebar(); - let commandOpen = $state(false); - function handleKeydown(e: KeyboardEvent) { const shortcuts = createSidebarShortcuts({ set: (value: boolean) => { - commandOpen = value; + commandOpen.current = value; } }); if (handleGlobalKeydown(e, shortcuts)) { @@ -64,248 +62,257 @@ (item) => !item.experimental || $preferencesStore.experimentalFeatures ) ); + + let commandInput = $state(''); - - - - - - {#snippet child({ props })} - { - sidebar.setOpenMobile(false); - }} - {...props} - > -
- -
-
- EduTools {#if $preferencesStore.experimentalFeatures} - Experimental{/if} -
- - {/snippet} - - - - -
- -
-
- Search -
- - ⌘K - -
- - - - - - +{#if $preferencesStore.experimentalFeatures} + + - {#each filteredMainNavigation as groupItem (groupItem.title)} - {@const Icon = groupItem.icon} - - {#if groupItem.items?.length} - - + + {#snippet child({ props })} + { - sidebar.setOpen(true); + sidebar.setOpenMobile(false); }} + {...props} > - +
+ +
+
+ EduTools {#if $preferencesStore.experimentalFeatures} + Experimental{/if} +
+ + {/snippet} + + + + +
+ +
+
+ Search +
+ + ⌘K + +
+ + + + + + + + {#each filteredMainNavigation as groupItem (groupItem.title)} + {@const Icon = groupItem.icon} + + {#if groupItem.items?.length} + + { + sidebar.setOpen(true); + }} + > + + {#snippet child({ props })} + + {#snippet child({ props })} + { + sidebar.setOpenMobile(false); + }} + {...props} + > + {#if Icon} + + {/if} + {groupItem.title} + + + {/snippet} + + {/snippet} + + + {#snippet child({ props, open })} + {#if open} + + {/if} + {/snippet} + + + {:else} + + {#snippet child({ props })} - { + sidebar.setOpenMobile(false); + }} > - {#snippet child({ props })} - { - sidebar.setOpenMobile(false); - }} - {...props} - > - {#if Icon} - - {/if} - {groupItem.title} - - - {/snippet} - - {/snippet} - - - {#snippet child({ props, open })} - {#if open} - - {/if} + {#if Icon} + + {/if} + {groupItem.title} + {/snippet} - - - {:else} - - - {#snippet child({ props })} - { - sidebar.setOpenMobile(false); - }} - > - {#if Icon} - - {/if} - {groupItem.title} - - {/snippet} - - - {/if} - {/each} - - - - - {#if $preferencesStore.experimentalFeatures === true} - - - {#snippet child({ props })} - { - sidebar.setOpenMobile(false); - }} - target="_blank" - href="https://github.com/EducationalTools/src" - {...props} - > - -
EducationalTools/src
-
-
+ + {/if} + {/each} + + + + + {#if $preferencesStore.experimentalFeatures === true} + + + {#snippet child({ props })} + { + sidebar.setOpenMobile(false); + }} + target="_blank" + href="https://github.com/EducationalTools/src" + {...props} > - - {process.env.BRANCH_NAME} -
- - {/snippet} - - - - { - settingsOpen.current = true; - sidebar.setOpenMobile(false); - }} - > - - Settings - -
- +
EducationalTools/src
+
+
+ + {process.env.BRANCH_NAME} +
+ + {/snippet} + + + + { + settingsOpen.current = true; + sidebar.setOpenMobile(false); + }} > - ⌘, - - - - {/if} - {#if !sidebar.isMobile} - - { - posthog.capture('sidebar_toggle', { state: sidebar.open }); - sidebar.toggle(); - }} - > - - Sidebar -
- + Settings + +
+ + ⌘, + + + + {/if} + {#if !sidebar.isMobile} + + { + posthog.capture('sidebar_toggle', { state: sidebar.open }); + sidebar.toggle(); + }} > - ⌘B - - - - {/if} - - - + + Sidebar +
+ + ⌘B + + + + {/if} + + + +{/if} - - + { + if (!state) commandInput = ''; + }} +> + No results found. {#each filteredMainNavigation as groupItem (groupItem.title)} @@ -314,7 +321,7 @@ {#each groupItem.items as item (item.title)} (commandOpen = false)} + onSelect={() => (commandOpen.current = false)} target={item.url.startsWith('http') ? '_blank' : undefined} rel={item.url.startsWith('http') ? 'noopener noreferrer' : undefined} > @@ -327,7 +334,7 @@ (commandOpen = false)} + onSelect={() => (commandOpen.current = false)} target={groupItem.url.startsWith('http') ? '_blank' : undefined} rel={groupItem.url.startsWith('http') ? 'noopener noreferrer' : undefined} > @@ -337,18 +344,21 @@ {/if} {/each} - + {#if $preferencesStore.experimentalFeatures} { settingsOpen.current = true; - commandOpen = false; + commandOpen.current = false; }} > Settings {/if} ($preferencesStore.experimentalFeatures = !$preferencesStore.experimentalFeatures)} > diff --git a/src/lib/state.svelte.ts b/src/lib/state.svelte.ts index 4bec3075..18f7ca3e 100644 --- a/src/lib/state.svelte.ts +++ b/src/lib/state.svelte.ts @@ -1,2 +1,3 @@ export let settingsOpen = $state({ current: false }); +export let commandOpen = $state({ current: false }); export let syncState: { current: '' | 'uploading' | 'downloading' } = $state({ current: '' }); diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3f3d9614..f3ab7e0d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -30,6 +30,8 @@ import Button from '$lib/components/ui/button/button.svelte'; import PanelLeftIcon from '@lucide/svelte/icons/panel-left'; import Identify from './identify.svelte'; + import { Search } from '@lucide/svelte'; + import { commandOpen } from '$lib/state.svelte'; // State let trackerBlockerDialog = $state(false); @@ -81,9 +83,30 @@ - + {#if $preferencesStore.experimentalFeatures} + + {:else} +
+
+ +
+ +
+

EduTools

+ +
+ +
+
+ {/if} {@render children()} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 66c3e8ce..f7da8651 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -19,88 +19,90 @@ ]; -
+
- + }} + /> + {/if}

EduTools {#if $preferencesStore.experimentalFeatures}Experimental{/if}

@@ -110,7 +112,12 @@ >
-
+