diff --git a/src/App.module.scss b/src/App.module.scss
index 4eb6644..8a0d344 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -5,11 +5,11 @@ body, html {
font-family: 'Red Hat Display Variable', 'Open Sans', sans-serif;
}
.backdrop {
- width: 100%;
+ width: calc(100% - var(--sidebar-width));
height: 100%;
position: fixed;
- top: 0; left: 0;
- border-radius: 16px;
+ top: 0; left: var(--sidebar-width);
+ border-radius: 16px 16px 16px 0;
z-index: 0;
transition: 500ms ease;
overflow-y: scroll;
diff --git a/src/App.svelte b/src/App.svelte
index 5aaabaa..8a98745 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -11,6 +11,8 @@
import RouteStore from './store/RouteStore';
import Background from './widget/Background/Background.svelte';
import Explore from './page/Explore/Explore.svelte';
+ import Sidebar from './widget/Sidebar/Sidebar.svelte';
+ import { setCSSVariableFor } from './lib/css_var';
export let url = "/load";
@@ -30,10 +32,12 @@
RouteStore.dispatch({ type: 'setPath', path: '/load' })
setTimeout(() => { RouteStore.dispatch({ type: 'setPath', path: '/' }) }, 3000)
+ setCSSVariableFor('sidebar-width', '0px', 3000);