52 lines
1.6 KiB
Svelte
52 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import style from './App.module.scss';
|
|
|
|
import Load from './page/Load/Load.svelte';
|
|
import Greet from './page/Greet/Greet.svelte';
|
|
import SignIn from './page/SignIn/SignIn.svelte';
|
|
|
|
import Titlebar from './widget/Titlebar/Titlebar.svelte';
|
|
|
|
import { Router, Link, Route, navigate } from "svelte-routing";
|
|
import RouteStore, { route } 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";
|
|
|
|
let page_faded = false;
|
|
|
|
RouteStore.subscribe(() => {
|
|
let new_url = RouteStore.getState().path;
|
|
if (url == new_url) return;
|
|
|
|
url = RouteStore.getState().path;
|
|
page_faded = true;
|
|
setTimeout(() => {
|
|
navigate(url);
|
|
page_faded = false;
|
|
}, 550);
|
|
});
|
|
RouteStore.dispatch({ type: 'setPath', path: '/load' })
|
|
|
|
setTimeout(() => { route('/') }, 3000)
|
|
setCSSVariableFor('sidebar-width', '0px', 3000);
|
|
</script>
|
|
|
|
<Titlebar />
|
|
<Background />
|
|
<Sidebar />
|
|
|
|
<div class={style.backdrop} style={`opacity:${page_faded ? 0 : 1}`}>
|
|
<div class={style['delay-show']}>
|
|
<Router {url}>
|
|
<Route path='/' component={Greet} />
|
|
<Route path='/load' component={Load} />
|
|
<Route path='/sign-in' component={SignIn} />
|
|
<Route path='/explore' component={Explore} />
|
|
</Router>
|
|
</div>
|
|
</div>
|