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;
|
||||
}
|
||||
.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;
|
||||
|
|
|
@ -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);
|
||||
</script>
|
||||
|
||||
<Titlebar />
|
||||
<Background />
|
||||
<Sidebar />
|
||||
|
||||
<div class={style.backdrop} style={`opacity:${page_faded ? 0 : 1}`}>
|
||||
<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] {
|
||||
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