From 3fe2b3df6d8e831648a203b8dfd8741573631202 Mon Sep 17 00:00:00 2001 From: cuptain Date: Sat, 2 Nov 2024 18:32:24 +1100 Subject: [PATCH] Moving page elements out of the way when the navbar opens --- fclauncher/frontend/src/App.svelte | 19 ++++++++++++++----- fclauncher/frontend/src/Navbar.svelte | 2 +- fclauncher/frontend/src/Testpage.svelte | 4 ++-- 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/fclauncher/frontend/src/App.svelte b/fclauncher/frontend/src/App.svelte index 837b587..dc4b0a0 100644 --- a/fclauncher/frontend/src/App.svelte +++ b/fclauncher/frontend/src/App.svelte @@ -4,25 +4,33 @@ import Loading from './Loading.svelte' import {CheckPrerequisites} from '../wailsjs/go/main/App.js' import { onMount } from 'svelte' - import { loading, testPage, navMargin } from './global' + import { loading, testPage, } from './global' import { slide } from 'svelte/transition' import Navbar from './Navbar.svelte' import Testpage from './Testpage.svelte' + import { set_attributes, set_style } from 'svelte/internal'; let width: int = 10 + let navMargin = document.getElementById("body") as HTMLElement; onMount(() => { CheckPrerequisites().then(() => $loading = false) }) + function setMargin(){ + document.documentElement.style.setProperty('--navMargin', '17rem'); + } + function unsetMargin(){ + document.documentElement.style.setProperty('--navMargin', '5rem'); + }
-
+
- + {#if $testPage}
@@ -49,6 +57,7 @@ --text-secondary: #ececec; --bg-primary: #23232e; --bg-secondary: #141418; + --navMargin: 5rem; background-color: var(--bg-secondary); } .navbar{ @@ -70,8 +79,8 @@ body{ display: flex; flex-direction: column; - margin-left: 5rem; - + margin-left: var(--navMargin); + transition: 200ms; } main{ diff --git a/fclauncher/frontend/src/Navbar.svelte b/fclauncher/frontend/src/Navbar.svelte index 34b33f4..354ff51 100644 --- a/fclauncher/frontend/src/Navbar.svelte +++ b/fclauncher/frontend/src/Navbar.svelte @@ -12,7 +12,7 @@ function unextend(){
-