From 969b784f53c3045c99ca1bf488c96943bd3e6598 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Mon, 21 Aug 2023 11:00:08 +0200 Subject: [PATCH] feat: menu collapse global css (#278) # Motivation Prefer usage of global CSS instead of JS to define the "collapsed" state of the menu, this to avoid glitch when deployed on mainnet. --- src/app.html | 18 +++++ src/lib/components/Menu.svelte | 59 +++------------- src/lib/components/MenuBackground.svelte | 9 +-- src/lib/components/MenuItem.svelte | 16 ----- src/lib/stores/layout.store.ts | 1 - src/lib/stores/menu.store.ts | 20 ++++++ src/lib/styles/global.scss | 1 + src/lib/styles/global/menu.scss | 87 ++++++++++++++++++++++++ src/lib/types/menu.ts | 4 ++ src/lib/utils/menu.utils.ts | 43 ++++++++++++ 10 files changed, 185 insertions(+), 73 deletions(-) create mode 100644 src/lib/stores/menu.store.ts create mode 100644 src/lib/styles/global/menu.scss create mode 100644 src/lib/types/menu.ts create mode 100644 src/lib/utils/menu.utils.ts diff --git a/src/app.html b/src/app.html index 0dabdd9b..6381776f 100644 --- a/src/app.html +++ b/src/app.html @@ -125,6 +125,24 @@ } + + + %sveltekit.head% diff --git a/src/lib/components/Menu.svelte b/src/lib/components/Menu.svelte index 40f75174..33d7ca7e 100644 --- a/src/lib/components/Menu.svelte +++ b/src/lib/components/Menu.svelte @@ -1,18 +1,17 @@ -
+
-
- -
+
applyMenu({ menu: Menu.COLLAPSED })}>
@@ -67,16 +64,6 @@ } position: relative; - - --menu-width: var(--menu-expanded-width); - - &.collapsed { - --menu-width: var(--menu-collapsed-width); - - .inner { - overflow-x: hidden; - } - } } .inner { @@ -116,30 +103,4 @@ padding-top: var(--padding-4x); } } - - .bottom { - position: absolute; - right: 0; - bottom: 64px; - transform: rotate(-180deg); - } - - button { - opacity: 0; - visibility: hidden; - transition: opacity var(--animation-time-long); - - padding: var(--padding-1_5x); - - @include media.min-width(large) { - &.visible { - opacity: 1; - visibility: visible; - } - } - } - - .expand { - display: flex; - } diff --git a/src/lib/components/MenuBackground.svelte b/src/lib/components/MenuBackground.svelte index a1162ae2..764b6939 100644 --- a/src/lib/components/MenuBackground.svelte +++ b/src/lib/components/MenuBackground.svelte @@ -6,7 +6,7 @@ import backgroundLight from "$lib/assets/menu-bg-light.png"; import { themeStore } from "$lib/stores/theme.store"; import { Theme } from "$lib/types/theme"; - import {layoutMenuCollapsed, layoutMenuOpen} from "$lib/stores/layout.store"; + import { layoutMenuOpen } from "$lib/stores/layout.store"; import { nonNullish } from "@dfinity/utils"; let logoOnChain: string; @@ -18,7 +18,7 @@ $themeStore === Theme.LIGHT ? backgroundLight : backgroundDark; -
+
diff --git a/src/lib/components/MenuItem.svelte b/src/lib/components/MenuItem.svelte index 6ffb2f88..f1662edd 100644 --- a/src/lib/components/MenuItem.svelte +++ b/src/lib/components/MenuItem.svelte @@ -1,6 +1,4 @@