1 files changed, 95 insertions, 0 deletions
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
new file mode 100644
index 00000000..994bc759
--- /dev/null
+++ b/web/src/js/components/header.jsx.js
@@ -0,0 +1,95 @@
+/** @jsx React.DOM */
+
+var MainMenu = React.createClass({
+    statics: {
+        title: "Traffic",
+        route: "flows"
+    },
+    toggleEventLog: function () {
+        SettingsActions.update({
+            showEventLog: !this.props.settings.showEventLog
+        });
+    },
+    render: function () {
+        return (
+            <div>
+                <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
+                <i className="fa fa-database"></i> Display Event Log
+                </button>
+            </div>
+            );
+    }
+});
+
+
+var ToolsMenu = React.createClass({
+    statics: {
+        title: "Tools",
+        route: "flows"
+    },
+    render: function () {
+        return <div>Tools Menu</div>;
+    }
+});
+
+
+var ReportsMenu = React.createClass({
+    statics: {
+        title: "Visualization",
+        route: "reports"
+    },
+    render: function () {
+        return <div>Reports Menu</div>;
+    }
+});
+
+
+var header_entries = [MainMenu, ToolsMenu, ReportsMenu];
+
+
+var Header = React.createClass({
+    getInitialState: function () {
+        return {
+            active: header_entries[0]
+        };
+    },
+    handleClick: function (active) {
+        ReactRouter.transitionTo(active.route);
+        this.setState({active: active});
+        return false;
+    },
+    handleFileClick: function () {
+        console.log("File click");
+    },
+    render: function () {
+        var header = header_entries.map(function(entry, i){
+            var classes = React.addons.classSet({
+                active: entry == this.state.active
+            });
+            return (
+                <a key={i} 
+                   href="#"
+                   className={classes}
+                   onClick={this.handleClick.bind(this, entry)}
+                >
+                    { entry.title}
+                </a>
+                );
+        }.bind(this));
+        
+        return (
+            <header>
+                <div className="title-bar">
+                    mitmproxy { this.props.settings.version }
+                </div>
+                <nav className="nav-tabs nav-tabs-lg">
+                    <a href="#" className="special" onClick={this.handleFileClick}> File </a>
+                    {header}
+                </nav>
+                <div className="menu">
+                    <this.state.active settings={this.props.settings}/>
+                </div>
+            </header>
+            );
+    }
+});