From e5f2080e4db679d16f8bb14f3729e48f7ce85c5a Mon Sep 17 00:00:00 2001
From: spatialfree <mail@ethanmerchant.com>
Date: Sun, 3 Nov 2024 01:44:10 -0500
Subject: [PATCH] side bar

---
 web/public/style.css | 75 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/web/public/style.css b/web/public/style.css
index 6558c74..7e2e7b4 100644
--- a/web/public/style.css
+++ b/web/public/style.css
@@ -99,6 +99,81 @@ body {
   height: 2px;
   width: 100%;
   z-index: 5;
+}
+#side {
+  background-color: #80808000;
+  z-index: 4;
+  width: auto;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  padding: 6px;
+  padding-top: calc(44px + 6px);
+  display: flex;
+  flex-flow: column;
+  justify-content: space-between;
+  gap: 6px;
+  > div > a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    /* background-color: #11111166; */
+    border-radius: 6px;
+    padding: 6px;
+    user-select: none;
+
+    flex-flow: column;
+    width: 52px;
+    gap: 0px;
+    font-family: "legible";
+    font-size: 11px;
+    color: var(--col-10);
+
+    > img {
+      margin: 0;
+    }
+  }
+  > a.onpage {
+    background-color: #11111166;
+  }
+  > #support {
+    display: none;
+  }
+  > #foot {
+    display: none;
+  }
+}
+#side a:hover {
+  background-color: #11111166;
+  transition: 0.166s;
+}
+#side.open {
+  > div > a {
+    flex-flow: row;
+    width: auto;
+    gap: 12px;
+    font-family: "mono";
+    font-size: 14px;
+    color: var(--col-01);
+  }
+  > #support {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+  > #foot {
+    display: block;
+  }
+}
+#side_border {
+  z-index: 4;
+  width: 2px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  transform: translateX(-2px);
 }
   height: 100dvh;
   margin: 0 auto;