From caf5bf154eb314a33680b2516efea8f891cfa6e7 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Sat, 26 Aug 2023 11:17:14 +1000
Subject: [PATCH] add sidebar buttons

---
 src/lib/global_styles.scss           |  2 ++
 src/widget/Sidebar/Sidebar.svelte    | 17 +++++++++++--
 src/widget/Sidebar/style.module.scss | 38 ++++++++++++++++++++++++++--
 3 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/src/lib/global_styles.scss b/src/lib/global_styles.scss
index f437a2a..9656a5a 100644
--- a/src/lib/global_styles.scss
+++ b/src/lib/global_styles.scss
@@ -1,5 +1,7 @@
 :root {
     --sidebar-width: 60px;
+    --sidebar-button-margin: 8px;
+    --sidebar-button-icon-size: 16px;
 }
 
 input[type=text] {
diff --git a/src/widget/Sidebar/Sidebar.svelte b/src/widget/Sidebar/Sidebar.svelte
index 8fabc2a..cb9c09b 100644
--- a/src/widget/Sidebar/Sidebar.svelte
+++ b/src/widget/Sidebar/Sidebar.svelte
@@ -1,7 +1,20 @@
 <script lang="ts">
     import style from './style.module.scss';
+
+    import Icon from 'svelte-icons-pack/Icon.svelte';
+    import VscHome from 'svelte-icons-pack/vsc/VscHome';
+    import BsGearFill from 'svelte-icons-pack/bs/BsGearFill';
+    import { route } from '../../store/RouteStore';
 </script>
 
-<div class={style.root}>
-    
+<div class={style.sidebar}>
+    <button class={style.button} on:click={() => {route('/')}}>
+        <Icon src={VscHome} />
+    </button>
+
+    <div class={style.bottom}>
+        <button class={style.button}>
+            <Icon src={BsGearFill} />
+        </button>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/widget/Sidebar/style.module.scss b/src/widget/Sidebar/style.module.scss
index 718c228..ec8d991 100644
--- a/src/widget/Sidebar/style.module.scss
+++ b/src/widget/Sidebar/style.module.scss
@@ -1,5 +1,5 @@
-.root {
-    background: #050005;
+.sidebar {
+    background: #080808;
 
     position: fixed;
     top: 32px;
@@ -12,4 +12,38 @@
     border-radius: 0 0 0 16px;
 
     transition: 1250ms ease;
+
+    border-right: 1px solid #10101080;
+
+    clip-path: inset(0 0 0 0);
+
+    .button {
+        transition: 650ms ease;
+        width: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
+        height: calc(var(--sidebar-width) - (var(--sidebar-button-margin) * 2));
+        margin: var(--sidebar-button-margin);
+        border: 3px solid #272222;
+        
+        &:hover {
+            border: 3px solid #444;
+        }
+        &:active {
+            transition: 450ms ease;
+            border: 3px solid #777;
+            transform: translateY(3px) scale(0.95);
+        }
+        &[active] {
+            border: 3px solid #777;
+        }
+
+        svg {
+            transform: translate(-1px, 1px);
+            height: var(--sidebar-button-icon-size);
+            width: var(--sidebar-button-icon-size);
+        }
+    }
+    .bottom {
+        position: absolute;
+        bottom: 0;
+    }
 }
\ No newline at end of file