From 3785e5700a92157762420e2d892bbfa7757ee3dd Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Tue, 11 Jul 2023 01:16:55 -0400
Subject: [PATCH] Add Sidebar Toggle option and button

---
 astro/components/Sidebar.astro | 11 ++++++++---
 astro/styles/index.scss        | 23 +++++++++++++++++++++-
 public/scripts/toggle.js       | 35 ++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 public/scripts/toggle.js

diff --git a/astro/components/Sidebar.astro b/astro/components/Sidebar.astro
index 1d17580..ae48b8c 100644
--- a/astro/components/Sidebar.astro
+++ b/astro/components/Sidebar.astro
@@ -1,13 +1,18 @@
 ---
 import { APP } from '../config'
-import { SIDEBARTOP, SIDEBARBOTTOM } from '../tabs'
+import { SIDEBARTOP, SIDEBARBOTTOM } from '../sidebar'
 ---
 
 <div class="sidebar">
     <div class="drag-area"></div>
     <div class="sidebar-header">
-        <img src="./logo.png">
-        {APP.map(item => (<p>{item.name}</p>))}
+        <div class="sidebar-header-left">
+            <img src="./logo.png">
+            {APP.map(item => (<p>{item.name}</p>))}
+        </div>
+        <div class="sidebar-header-right">
+            <button id="sidebar-toggle" onclick="ToggleSidebar()"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm224 0V416H448V96H224zM88 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88zM64 216c0 13.3 10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88c-13.3 0-24 10.7-24 24zm24 72c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/></svg></button>
+        </div>
     </div>
     <div class="sidebar-top">
         {SIDEBARTOP.map(item => (
diff --git a/astro/styles/index.scss b/astro/styles/index.scss
index e114f86..4224ede 100644
--- a/astro/styles/index.scss
+++ b/astro/styles/index.scss
@@ -106,9 +106,10 @@ body {
     display: grid;
     grid-template-rows: 50px auto auto;
     background: var(--SidebarBackground);
+    z-index: 5;
     .drag-area {
         position: absolute;
-        width: 280px;
+        width: 200px;
         height: 74px;
         app-region: drag;
     }
@@ -121,8 +122,28 @@ body {
         }
         img {
             width: 32px;
+            height: 32px;
             margin-right: 16px;
             pointer-events: none;
+            align-self: center;
+        }
+        .sidebar-header-left {
+            display: flex;
+        }
+        .sidebar-header-right {
+            margin-inline-start: auto;
+            button {
+                border-radius: 6px;
+                border: none;
+                fill: white;
+                padding: 8px 8px 6px 8px;
+                background: transparent;
+                font-size: 16px;
+                cursor: pointer;
+            }
+            button:hover {
+                background: rgb(255 255 255 / 10%);
+            }
         }
     }
     .sidebar-top {
diff --git a/public/scripts/toggle.js b/public/scripts/toggle.js
new file mode 100644
index 0000000..837f972
--- /dev/null
+++ b/public/scripts/toggle.js
@@ -0,0 +1,35 @@
+function ToggleSidebar() {
+    document.querySelector('.sidebar').style.width = '0px'
+    document.querySelector('.sidebar').style.padding = '0px'
+    document.querySelector('.sidebar').style.fontSize = '0px'
+    document.querySelector('.sidebar-top').style.display = 'none'
+    document.querySelector('.sidebar-bottom').style.display = 'none'
+    document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-left").style.display = 'none'
+    document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-right").style.position ='fixed'
+    document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-right").style.left = '94px'
+    document.querySelector("body > div > div.sidebar > div.drag-area").style.width = '90px'
+
+    document.querySelector("body > div > div.pages").style.width = '100%'
+    document.querySelector("body > div > div.pages").style.maxWidth = '100%'
+    document.querySelector("body > div > div.pages").style.left = '0px'
+
+    document.querySelector("#sidebar-toggle").setAttribute('onclick', 'ToggleSidebarRe()')
+}
+
+function ToggleSidebarRe() {
+    document.querySelector('.sidebar').style.width = '240px'
+    document.querySelector('.sidebar').style.padding = '0px 20px'
+    document.querySelector('.sidebar').style.fontSize = 'inherit'
+    document.querySelector('.sidebar-top').style.display = 'block'
+    document.querySelector('.sidebar-bottom').style.display = 'block'
+    document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-left").style.display = 'flex'
+    document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-right").style.position ='inherit'
+    document.querySelector("body > div > div.sidebar > div.sidebar-header > div.sidebar-header-right").style.left = 'inherit'
+    document.querySelector("body > div > div.sidebar > div.drag-area").style.width = '200px'
+
+    document.querySelector("body > div > div.pages").style.width = 'calc(100% - 280px)'
+    document.querySelector("body > div > div.pages").style.maxWidth = 'calc(100% - 280px)'
+    document.querySelector("body > div > div.pages").style.left = '280px'
+
+    document.querySelector("#sidebar-toggle").setAttribute('onclick', 'ToggleSidebar()')
+}
\ No newline at end of file