add sidebar
This commit is contained in:
parent
f4406777e0
commit
52e66737bf
|
@ -5,11 +5,11 @@ body, html {
|
||||||
font-family: 'Red Hat Display Variable', 'Open Sans', sans-serif;
|
font-family: 'Red Hat Display Variable', 'Open Sans', sans-serif;
|
||||||
}
|
}
|
||||||
.backdrop {
|
.backdrop {
|
||||||
width: 100%;
|
width: calc(100% - var(--sidebar-width));
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0; left: 0;
|
top: 0; left: var(--sidebar-width);
|
||||||
border-radius: 16px;
|
border-radius: 16px 16px 16px 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
transition: 500ms ease;
|
transition: 500ms ease;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
|
@ -11,6 +11,8 @@
|
||||||
import RouteStore from './store/RouteStore';
|
import RouteStore from './store/RouteStore';
|
||||||
import Background from './widget/Background/Background.svelte';
|
import Background from './widget/Background/Background.svelte';
|
||||||
import Explore from './page/Explore/Explore.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";
|
export let url = "/load";
|
||||||
|
|
||||||
|
@ -30,10 +32,12 @@
|
||||||
RouteStore.dispatch({ type: 'setPath', path: '/load' })
|
RouteStore.dispatch({ type: 'setPath', path: '/load' })
|
||||||
|
|
||||||
setTimeout(() => { RouteStore.dispatch({ type: 'setPath', path: '/' }) }, 3000)
|
setTimeout(() => { RouteStore.dispatch({ type: 'setPath', path: '/' }) }, 3000)
|
||||||
|
setCSSVariableFor('sidebar-width', '0px', 3000);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Titlebar />
|
<Titlebar />
|
||||||
<Background />
|
<Background />
|
||||||
|
<Sidebar />
|
||||||
|
|
||||||
<div class={style.backdrop} style={`opacity:${page_faded ? 0 : 1}`}>
|
<div class={style.backdrop} style={`opacity:${page_faded ? 0 : 1}`}>
|
||||||
<div class={style['delay-show']}>
|
<div class={style['delay-show']}>
|
||||||
|
|
|
@ -0,0 +1,41 @@
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set CSS variable
|
||||||
|
*
|
||||||
|
* @param name Name of the variable
|
||||||
|
* @param val Value to be set
|
||||||
|
*/
|
||||||
|
export function setCSSVariable(name: string, val: string | number): void {
|
||||||
|
|
||||||
|
if (typeof val == 'number') val = `${val}px`;
|
||||||
|
if (!name.startsWith('--')) name = `--${name}`;
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
document.querySelector(':root').style.setProperty(name, val);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the CSS variable's contents
|
||||||
|
*
|
||||||
|
* @param name Name of the variable
|
||||||
|
* @returns Its current value
|
||||||
|
*/
|
||||||
|
export function getCSSVariable(name: string): string {
|
||||||
|
if (!name.startsWith('--')) name = `--${name}`;
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
return document.querySelector(':root').style.getPropertyValue(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set CSS variable and after n milliseconds revert it back
|
||||||
|
*
|
||||||
|
* @param name Name of the variable
|
||||||
|
* @param val Value to be set
|
||||||
|
* @param timeout Time for which the variable should be set
|
||||||
|
*/
|
||||||
|
export function setCSSVariableFor(name: string, val: string | number, timeout: number): void {
|
||||||
|
const old = getCSSVariable(name);
|
||||||
|
setCSSVariable(name, val);
|
||||||
|
setTimeout(() => setCSSVariable(name, old), timeout);
|
||||||
|
}
|
|
@ -1,3 +1,7 @@
|
||||||
|
:root {
|
||||||
|
--sidebar-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
input[type=text] {
|
input[type=text] {
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import style from './style.module.scss';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={style.root}>
|
||||||
|
|
||||||
|
</div>
|
|
@ -0,0 +1,15 @@
|
||||||
|
.root {
|
||||||
|
background: #050005;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: 32px;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: var(--sidebar-width);
|
||||||
|
height: calc(100% - 32px);
|
||||||
|
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0 0 0 16px;
|
||||||
|
|
||||||
|
transition: 1250ms ease;
|
||||||
|
}
|
Loading…
Reference in New Issue