feat: basic menu

src/client/app.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import {useSelector} from 'react-redux';
 
 import TypeRenderersContext from './context/typeRenderers';
+import Menubar from './menubar';
 import Resources from './resources';
 import Sidebar from './sidebar';
 import SidebarIcons from './sidebar-icons';
@@ -28,9 +29,30 @@ const App = () => {
   const activeSidebarIndex = useSelector(activeSidebarIndexSelector);
   const isSidebarExpanded = useSelector(isSidebarExpandedSelector);
   const resourceUris = useSelector(resourceUrisSelector);
+  const menuTree = [
+    {
+      label: 'File',
+      children: [
+        {
+          label: 'Create a new...',
+          children: [
+            {
+              label: 'Entity',
+              onClick: () => {},
+            },
+          ],
+        },
+      ],
+    },
+  ];
   return (
     <div className="app">
       <TypeRenderersContext.Provider value={typeRenderMap()}>
+        <div className="panes vertical">
+          <Menubar
+            icon={<img alt="Persea" src="/icon.png" />}
+            tree={menuTree}
+          />
           <div className="panes horizontal">
             <div
               className="sidebar-icons-wrapper pane"
@@ -62,6 +84,7 @@ const App = () => {
               />
             </div>
           </div>
+        </div>
       </TypeRenderersContext.Provider>
     </div>
   );

src/client/menubar.raw.scss

@@ -2,6 +2,7 @@
   background-color: #444444;
   display: flex;
   font-family: var(--title-font-family);
+  font-size: 0.9em;
   position: relative;
   z-index: 1000;
 }