From 23562e877d6ac8aa40ef3a8ffa0529a2258367f0 Mon Sep 17 00:00:00 2001 From: Dave879 Date: Tue, 21 Nov 2023 15:00:38 +0100 Subject: [PATCH] :children_crossing: Navbar usability improvements --- frontend/src/lib/navbar.svelte | 516 +++++++++++++++++++-------------- 1 file changed, 300 insertions(+), 216 deletions(-) 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(); }; - -