From 52e66737bf768bd534f9e416126e869bafc187d8 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Wed, 23 Aug 2023 23:53:09 +1000
Subject: [PATCH] add sidebar

---
 src/App.module.scss                  |  6 ++--
 src/App.svelte                       |  4 +++
 src/lib/css_var.ts                   | 41 ++++++++++++++++++++++++++++
 src/lib/global_styles.scss           |  4 +++
 src/widget/Sidebar/Sidebar.svelte    |  7 +++++
 src/widget/Sidebar/style.module.scss | 15 ++++++++++
 6 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/css_var.ts
 create mode 100644 src/widget/Sidebar/Sidebar.svelte
 create mode 100644 src/widget/Sidebar/style.module.scss

diff --git a/src/App.module.scss b/src/App.module.scss
index 4eb6644..8a0d344 100644
--- a/src/App.module.scss
+++ b/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;
-  border-radius: 16px;
+  top: 0; left: var(--sidebar-width);
+  border-radius: 16px 16px 16px 0;
   z-index: 0;
   transition: 500ms ease;
   overflow-y: scroll;
diff --git a/src/App.svelte b/src/App.svelte
index 5aaabaa..8a98745 100644
--- a/src/App.svelte
+++ b/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']}>
diff --git a/src/lib/css_var.ts b/src/lib/css_var.ts
new file mode 100644
index 0000000..43e6056
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/lib/global_styles.scss b/src/lib/global_styles.scss
index 193ef11..f437a2a 100644
--- a/src/lib/global_styles.scss
+++ b/src/lib/global_styles.scss
@@ -1,3 +1,7 @@
+:root {
+    --sidebar-width: 60px;
+}
+
 input[type=text] {
     padding: 6px 12px;
 
diff --git a/src/widget/Sidebar/Sidebar.svelte b/src/widget/Sidebar/Sidebar.svelte
new file mode 100644
index 0000000..8fabc2a
--- /dev/null
+++ b/src/widget/Sidebar/Sidebar.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    import style from './style.module.scss';
+</script>
+
+<div class={style.root}>
+    
+</div>
\ No newline at end of file
diff --git a/src/widget/Sidebar/style.module.scss b/src/widget/Sidebar/style.module.scss
new file mode 100644
index 0000000..718c228
--- /dev/null
+++ b/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;
+}
\ No newline at end of file