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,38 +29,60 @@ 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 horizontal">
-          <div
-            className="sidebar-icons-wrapper pane"
-          >
-            <SidebarIcons
-              activeIndex={activeSidebarIndex}
-              isExpanded={isSidebarExpanded}
-            />
-          </div>
-          <div
-            className={classnames(
-              'sidebar-wrapper',
-              'pane',
-              {expanded: isSidebarExpanded},
-            )}
-          >
-            <Sidebar />
-          </div>
-          <div
-            className={classnames(
-              'resources-wrapper',
-              'pane',
-              {'sidebar-expanded': isSidebarExpanded},
-            )}
-          >
-            <Resources
-              activeUri={activeResourceUri}
-              uris={resourceUris}
-            />
+        <div className="panes vertical">
+          <Menubar
+            icon={<img alt="Persea" src="/icon.png" />}
+            tree={menuTree}
+          />
+          <div className="panes horizontal">
+            <div
+              className="sidebar-icons-wrapper pane"
+            >
+              <SidebarIcons
+                activeIndex={activeSidebarIndex}
+                isExpanded={isSidebarExpanded}
+              />
+            </div>
+            <div
+              className={classnames(
+                'sidebar-wrapper',
+                'pane',
+                {expanded: isSidebarExpanded},
+              )}
+            >
+              <Sidebar />
+            </div>
+            <div
+              className={classnames(
+                'resources-wrapper',
+                'pane',
+                {'sidebar-expanded': isSidebarExpanded},
+              )}
+            >
+              <Resources
+                activeUri={activeResourceUri}
+                uris={resourceUris}
+              />
+            </div>
           </div>
         </div>
       </TypeRenderersContext.Provider>

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;
 }