fix: nicer hierarchy

src/client/menubar.jsx

@@ -13,12 +13,26 @@ const renderTree = (tree) => (
       const {
         children = [],
         label,
-        onClick = () => {},
         onPointerDown = () => {},
       } = branch;
+      const onClick = (event) => {
+        if (branch.onClick) {
+          window.document.activeElement.blur();
+          branch.onClick(event);
+        }
+      };
       return (
         <li>
-          <button onClick={onClick} onPointerDown={onPointerDown} type="button">{label}</button>
+          <button
+            onClick={onClick}
+            onPointerDown={onPointerDown}
+            type="button"
+          >
+            {label}
+            {children.length > 0 && (
+              <span className="descend" />
+            )}
+          </button>
           {children.length > 0 && renderTree(children)}
         </li>
       );

src/client/menubar.raw.scss

@@ -38,14 +38,22 @@ li button {
   position: relative;
 
   button {
+    align-items: center;
     background-color: transparent;
     border: none;
+    display: flex;
+    justify-content: space-between;
     text-align: left;
     &:focus {
       box-shadow: none;
     }
   }
 
+  > ul li .descend::after {
+    color: #bbbbbb;
+    content: '>';
+  }
+
   > ul {
     display: none;
   }
@@ -75,7 +83,5 @@ li button {
   > ul > li:hover ul, > ul ul > li:hover {
     display: flex;
   }
-
-
 }