basic dropdown functionality with little styling

public/style.css

@@ -220,6 +220,34 @@ aside button {
     background: transparent;  /* optional: just make scrollbar invisible */
 }
 
+/* Metamenu */
+
+.meta-menu-expander {
+  position: absolute;
+  transform: translateY(calc(-100% + 20px));
+  top: 0;
+  right: 0;
+  transition: transform 100ms ease-out;
+}
+
+.expand-meta-menu {
+  display: block;
+  margin-left: auto;
+}
+
+.meta-menu-expander.expanded {
+  transform: translateY(0);
+}
+
+.meta-menu {
+  background: white;
+  border: 0 #f0f0f0 dashed;
+  border-bottom-width: 3px;
+  border-left-width: 3px;
+  padding: 10px;
+  margin-bottom: 3px;
+}
+
 /* Dark Mode */
 
 .dark-mode.app-wrapper {

src/components/MetaMenu/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {renderExpression} from '../../lib/lambda'
+
+class MetaMenu extends React.Component {
+    state = {
+        isExpanded: false,
+    }
+
+    toggleExpanded = () => {
+        this.setState({
+            isExpanded: !this.state.isExpanded
+        });
+    }
+
+    render() {
+        const classname = 'meta-menu-expander' + (this.state.isExpanded ? ' expanded' : '');
+        // AKA breaking the model horribly
+        const definedVariables = this 
+            .props
+            .lambdaActor
+            .executionContext
+            .definedVariables;
+
+        const kvEntries = Object
+            .entries(definedVariables)
+            .map(([varName, expr]) => (
+                <div>
+                    {varName}: {renderExpression(expr)}
+                </div>
+            ));
+
+        return (
+            <div className={classname} >
+                <div className="meta-menu">
+                    Menu items!!
+                    {kvEntries}
+                </div>
+                <button
+                    className="expand-meta-menu"
+                    onClick={this.toggleExpanded}>
+                    Definitions
+                </button>
+            </div>
+        );
+    }
+}
+
+export default MetaMenu;

src/components/Repl/index.jsx

@@ -11,6 +11,7 @@ import Assignment from './Assignment';
 import Computation from './Computation';
 import Error from './Error'
 import Info from './Info';
+import MetaMenu from '../MetaMenu';
 
 import { renderExpression, parseExtendedSyntax } from '../../lib/lambda';
 
@@ -189,6 +190,7 @@ class Repl extends React.Component {
     ));
     return (
       <div className='repl' ref='repl' onClick={this._handleClick}>
+        <MetaMenu lambdaActor={this.lambdaActor} />
         <div className='output'>
           {this.state.output.map((elem, idx) => (
             <div key={idx}>