Mobile hamburger style tweaks

Author: zefhemel

client/editor_ui.tsx

@@ -449,7 +449,7 @@ export class MainUI {
               .includes("hamburger")
               ? [
                   {
-                    icon: featherIcons.MoreVertical,
+                    icon: featherIcons.Menu,
                     description: "Open Menu",
                     class: "expander",
                     callback: () => {

client/styles/top.scss

@@ -133,9 +133,8 @@
   }
 
   #sb-top .sb-actions.hamburger {
-    border-radius: 5px;
-    border: 1px solid #444;
     width: 2.8rem;
+    margin-top: 2px;
     background: color-mix(
       in srgb,
       var(--top-background-color) 90%,
@@ -146,7 +145,9 @@
     flex-direction: column;
     align-items: center;
     z-index: 10;
-    transition: max-height 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    transition:
+      max-height 0.3s ease-in-out,
+      box-shadow 0.3s ease-in-out;
 
     /* Initial collapsed height */
     max-height: 2.2rem;
@@ -168,15 +169,16 @@
         margin: 8px 0;
         opacity: 0;
         transform: translateY(-10px);
-        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+        transition:
+          opacity 0.3s ease-in-out,
+          transform 0.3s ease-in-out;
       }
     }
 
     // CSS class for toggling the hamburger menu, so it can be toggled via JS
     &.open:hover {
       /* Expanded height limited to the viewport height minus some padding */
       max-height: calc(100vh - 24px);
-      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
 
       button {
         opacity: 1;