From fa6807988afd8485ad33f46d03dd8fffdeb04c22 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Sun, 7 Aug 2022 20:33:23 -0400
Subject: [PATCH] fix: adjust arrow transition and thickness

---
 components/HamburgerMenu.vue | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/components/HamburgerMenu.vue b/components/HamburgerMenu.vue
index 10d14ea..a58e788 100644
--- a/components/HamburgerMenu.vue
+++ b/components/HamburgerMenu.vue
@@ -59,11 +59,14 @@ input.checkbox:checked ~ .drawer,
 }
 
 .drawer {
-  transition: transform var(--trans), opacity var(--trans);
+  --drawer-bg: white;
+  --drawer-border-bg: gray;
+  transition: transform var(--trans), opacity var(--trans), border var(--trans),
+    background var(--trans);
   padding: 1rem;
   right: 0;
-  background: white;
-  border: 1px solid gray;
+  background: var(--drawer-bg);
+  border: 1px solid var(--drawer-border-bg);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -71,6 +74,11 @@ input.checkbox:checked ~ .drawer,
   width: 12rem;
 }
 
+html.dark .drawer {
+  --drawer-bg: #222;
+  --drawer-border-bg: darkslategray;
+}
+
 .drawer::before {
   content: "";
   width: 0;
@@ -80,9 +88,10 @@ input.checkbox:checked ~ .drawer,
   --tri-size: 0.6rem;
   border-left: var(--tri-size) solid transparent;
   border-right: var(--tri-size) solid transparent;
-  border-bottom: var(--tri-size) solid black;
+  border-bottom: var(--tri-size) solid var(--drawer-border-bg);
   right: 0.75rem;
   top: calc(-1 * var(--tri-size));
+  transition: border var(--trans);
 }
 
 .drawer::after {
@@ -91,12 +100,13 @@ input.checkbox:checked ~ .drawer,
   height: 0;
   position: absolute;
 
-  --tri-size: 0.57rem;
+  --tri-size: 0.56rem;
   border-left: var(--tri-size) solid transparent;
   border-right: var(--tri-size) solid transparent;
-  border-bottom: var(--tri-size) solid white;
-  right: 0.75rem;
-  top: calc(-1 * var(--tri-size));
+  border-bottom: var(--tri-size) solid var(--drawer-bg);
+  right: 0.8rem;
+  top: -0.53rem; /*calc(-1 * var(--tri-size));*/
+  transition: border var(--trans);
 }
 
 .drawer li {