diff --git a/frontend/src/lib/navbar.svelte b/frontend/src/lib/navbar.svelte index f3d3f81..af62bc1 100644 --- a/frontend/src/lib/navbar.svelte +++ b/frontend/src/lib/navbar.svelte @@ -9,9 +9,10 @@ SPDX-License-Identifier: MPL-2.0 import { getLocalization } from '$lib/i18n'; import { signedIn, pathname } from '$lib/stores'; import { createTippy } from 'svelte-tippy'; - import { browser } from '$app/environment'; import BrownButton from '$lib/components/buttons/brown.svelte'; - // import { fade } from 'svelte/transition'; + import { browser } from '$app/environment'; + import { beforeNavigate } from '$app/navigation'; + import { draw, slide } from 'svelte/transition'; const tippy = createTippy({ arrow: true, @@ -21,10 +22,15 @@ SPDX-License-Identifier: MPL-2.0 const { t } = getLocalization(); - let openMenu = true; + let menuIsClosed = true; const toggleMenu = () => { - openMenu = !openMenu; + menuIsClosed = !menuIsClosed; }; + + beforeNavigate(() => { + menuIsClosed = true; // Closes menu to let the user see the page beneath + }); + let darkMode = false; if (browser) { darkMode = @@ -33,232 +39,310 @@ SPDX-License-Identifier: MPL-2.0 window.matchMedia('(prefers-color-scheme: dark)').matches); } - const switchDarkMode = (on: boolean): void => { - if (on) { - localStorage.setItem('theme', 'dark'); - } else { - localStorage.setItem('theme', 'light'); - } + const switchDarkMode = () => { + !darkMode ? localStorage.setItem('theme', 'dark') : localStorage.setItem('theme', 'light'); window.location.reload(); }; - -