add sidebar

This commit is contained in:
b1ek 2023-08-23 23:53:09 +10:00
parent f4406777e0
commit 52e66737bf
Signed by: blek
GPG Key ID: 14546221E3595D0C
6 changed files with 74 additions and 3 deletions

View File

@ -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;

View File

@ -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']}>

41
src/lib/css_var.ts Normal file
View File

@ -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);
}

View File

@ -1,3 +1,7 @@
:root {
--sidebar-width: 60px;
}
input[type=text] {
padding: 6px 12px;

View File

@ -0,0 +1,7 @@
<script lang="ts">
import style from './style.module.scss';
</script>
<div class={style.root}>
</div>

View File

@ -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;
}