add sidebar

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;
+  top: 0; left: var(--sidebar-width);
-  border-radius: 16px;
+  border-radius: 16px 16px 16px 0;
   z-index: 0;
   transition: 500ms ease;
   overflow-y: scroll;

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

src/lib/css_var.ts

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

src/lib/global_styles.scss

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

src/widget/Sidebar/Sidebar.svelte

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

src/widget/Sidebar/style.module.scss

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