long sidebar style

src/lib/css_var.ts

@@ -1,4 +1,16 @@
 
+let events: CSSVariableEventHandler[] = [];
+
+export interface CSSVariableEvent {
+    name: string
+    newValue: string,
+    oldValue: string
+}
+
+export interface CSSVariableEventHandler {
+    (event: CSSVariableEvent): any | void | Promise<any>
+}
+
 /**
  * Set CSS variable
  * 
@@ -10,6 +22,12 @@ export function setCSSVariable(name: string, val: string | number): void {
     if (typeof val == 'number') val = `${val}px`;
     if (!name.startsWith('--')) name = `--${name}`;
 
+    callEvent({
+        name,
+        newValue: val,
+        oldValue: getCSSVariable(name)
+    });
+
     // @ts-ignore
     document.querySelector(':root').style.setProperty(name, val);
 }
@@ -38,4 +56,25 @@ export function setCSSVariableFor(name: string, val: string | number, timeout: n
     const old = getCSSVariable(name);
     setCSSVariable(name, val);
     setTimeout(() => setCSSVariable(name, old), timeout);
+}
+
+/**
+ * Register an event handler that would watch for
+ * CSS variable changes
+ * 
+ * @param handler Handler to be called
+ */
+export function registerEventHandler(handler: CSSVariableEventHandler) {
+    events.push(handler)
+}
+
+async function callEvent(e: CSSVariableEvent) {
+    let promises = [];
+    
+    for (const event of events) {
+        promises.push(event(e));
+    }
+
+    // trick to execute all promises concurrently
+    await Promise.all(promises);
 }

src/lib/global_styles.scss

@@ -1,7 +1,9 @@
 :root {
     --sidebar-width: 60px;
     --sidebar-button-margin: 8px;
-    --sidebar-button-icon-size: 16px;
+    --sidebar-button-icon-size: 11pt;
+    --sidebar-button-font-size: 9pt;
+    --sidebar-button-size: 60px;
 }
 
 input[type=text] {

src/widget/Sidebar/Sidebar.svelte

@@ -6,21 +6,53 @@
     import VscArrowLeft from "svelte-icons-pack/vsc/VscArrowLeft";
     import BsGearFill from 'svelte-icons-pack/bs/BsGearFill';
     import { route, back } from '../../store/RouteStore';
+    import { onMount } from 'svelte';
+
+    import { registerEventHandler } from '../../lib/css_var';
+
+    let self: HTMLElement;
+    let longStyle = false;
+
+    const checkLongStyle = () => {
+        if (self.clientWidth >= 120) {
+            longStyle = true;
+        } else {
+            longStyle = false;
+        }
+    }
+
+    registerEventHandler((e) => {
+        if (e.name !== '--sidebar-width') return;
+        checkLongStyle();
+    })
+
+    onMount(() => {
+        checkLongStyle()
+    })
 </script>
 
-<div class={style.sidebar}>
+<div class={style.sidebar} bind:this={self}>
 
     <button aria-label="back" class={style.button + ' ' + style.back} on:click={(_) => { back() }}>
         <Icon src={VscArrowLeft} color='#b2b2b2' size='17px' />
+        {#if longStyle}
+        Go Back
+        {/if }
     </button>
 
     <button class={style.button} on:click={() => {route('/')}}>
         <Icon src={VscHome} />
+        {#if longStyle}
+        Home
+        {/if }
     </button>
 
     <div class={style.bottom}>
         <button class={style.button}>
             <Icon src={BsGearFill} />
+            {#if longStyle}
+            Settings
+            {/if }
         </button>
     </div>
 </div>

src/widget/Sidebar/style.module.scss

@@ -20,11 +20,13 @@
     .button {
         transition: 650ms ease;
         width: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
-        height: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
+        height: calc(var(--sidebar-button-size) - (var(--sidebar-button-margin) * 2));
         margin: var(--sidebar-button-margin);
         margin-bottom: 0;
         border: 3px solid #272222;
         border-radius: 9px;
+        text-align: center;
+        line-height: calc(var(--sidebar-button-size) / 3);
         
         &:hover {
             border: 3px solid #444;
@@ -39,9 +41,10 @@
         &[active] {
             border: 3px solid #777;
         }
+        font-size: var(--sidebar-button-font-size);
 
         svg {
-            transform: translate(-1px, 1px);
+            transform: translate(-2px, 2px);
             height: var(--sidebar-button-icon-size);
             width: var(--sidebar-button-icon-size);
             pointer-events: none;
@@ -50,16 +53,12 @@
     .back {
         height: fit-content !important;
         border-width: 1px;
-        padding: calc(var(--sidebar-button-margin) / 2);
+        padding: calc(var(--sidebar-button-margin) * .6) calc(var(--sidebar-button-margin) * 1.5);
 
         margin-top: calc(var(--sidebar-button-margin) + 4px);
         &:hover, &:active {
             margin-top: var(--sidebar-button-margin);
         }
-
-        svg {
-            transform: translate(0, 1px);
-        }
     }
     .bottom {
         position: absolute;