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 @@
-
-
+
\ 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