Remove frontend compiled assets and fixed teamspeak

app/javascripts/components/main.js

@@ -402,22 +402,14 @@ const App = React.createClass({
 			        </div>
 			      </div>
 			      <ul className="sidebar-menu">
-			        <li className="header">MAIN NAVIGATION</li>
+			        <li className="header">Online</li>
 			        <li>
 			        	<a href="#">
-			            <i className="fa fa-dashboard"></i> <span>Online</span>
-			          </a>
-		          </li>
-		          <li>
-			        	<a href="#">
-			            <i className="fa fa-dashboard"></i> <span>Teamspeak</span>
-			          </a>
-		          </li>
-		          <li>
-			        	<a href="#">
-			            <i className="fa fa-dashboard"></i> <span>Info</span>
+			            <i className="fa fa-dashboard"></i> <span>chris</span>
 			          </a>
 		          </li>
+		          <li className="header">Information</li>
+		          <TeamSpeakButton />
 			      </ul>
 			    </section>
 			  </aside>

app/javascripts/components/teamspeak.js

@@ -13,71 +13,69 @@ const teamspeakDefaults = {
 	}
 };
 
-var TeamSpeakButton = exports.TeamSpeakButton = React.createClass({
+const TeamSpeakButton = exports.TeamSpeakButton = React.createClass({
+	getInitialState() {
+		return {
+			open: false
+		};
+	},
+
+	toggleOpen(e) {
+		e.preventDefault();
+		this.setState({ open: !this.state.open });
+	},
 	getDefaultProps() {
 		return teamspeakDefaults
 	},
+
 	marineUrl() {
 		return this.teamSpeakUrl(this.props.marine);
 	},
+
 	alienUrl() {
 		return this.teamSpeakUrl(this.props.alien);
 	},
+
 	teamSpeakUrl(conn) {
 		let params = `channel=${encodeURIComponent(conn.channel)}&
 			channelpassword=${encodeURIComponent(conn.password)}`;
 		return (`${this.props.url}?${params}`);
 	},
+
+	chevron() {
+		if (this.state.open) {
+			return <i className="fa fa-angle-down pull-right"></i>;
+		} else {
+			return <i className="fa fa-angle-right pull-right"></i>; 
+		}
+	},
+
 	render() {
-		return (
-			<ul className="nav navbar-top-links navbar-right">
-			  <li className="dropdown">
-					<a className="dropdown-toggle" data-toggle="dropdown" href="#">
-						Teamspeak &nbsp;<i className="fa fa-caret-down"></i>
-					</a>
-					<ul className="dropdown-menu">
-						<li><a href={this.props.url}>Join Teamspeak Lobby</a></li>
-						<li><a href={this.marineUrl()}>Join Marine Teamspeak</a></li>
-						<li><a href={this.alienUrl()}>Join Alien Teamspeak</a></li>
-						<li role="separator" className="divider"></li>
-						<li><a href="#" data-toggle="modal" data-target="#teamspeakmodal">Teamspeak Details</a></li>
-					</ul>
-				</li>
-		  </ul>
+		const open = this.state.open;
+		let componentClass = ["treeview"];
+		let dropdown;
+		if (open) {
+			componentClass.push("active");
+			dropdown = (
+				<ul className="treeview-menu menu-open" style={{display: "block"}}>
+					<li><a href={this.props.url}>Join Teamspeak Lobby</a></li>
+					<li><a href={this.marineUrl()}>Join Marine Teamspeak</a></li>
+					<li><a href={this.alienUrl()}>Join Alien Teamspeak</a></li>
+					<li><a href="#">Server: {teamspeakDefaults.url}</a></li>
+					<li><a href="#">Password: {teamspeakDefaults.password}</a></li>
+				</ul>
+			);
+		}
+
+ 		return (
+			<li className={componentClass.join(" ")}>
+				<a href="#" onClick={this.toggleOpen}>
+					<i className="fa fa-microphone"></i><span>Teamspeak</span>
+					{this.chevron()}
+				</a>
+				{dropdown}
+			</li>
 		);
 	}
 });
 
-var TeamSpeakModal = exports.TeamSpeakModal = React.createClass({
-	getDefaultProps() {
-		return teamspeakDefaults;
-	},
-
-	render() {
-		return <div className="modal fade text-left" id="teamspeakmodal">
-			<div className="modal-dialog">
-				<div className="modal-content">
-					<div className="modal-header">
-						<button type="button" 
-							className="close" 
-							data-dismiss="modal" 
-							aria-label="Close"><span aria-hidden="true">&times;</span></button>
-						<h4 className="modal-title">Teamspeak Server Information</h4>
-					</div>
-					<div className="modal-body">
-						<dl className="dl-horizontal">
-							<dt>Server</dt>
-							<dd>{this.props.url}</dd>
-							<dt>Password</dt>
-							<dd>{this.props.password}</dd>
-							<dt>Marine Channel</dt>
-							<dd>{this.props.marine.channel}</dd>
-							<dt>Alien Channel</dt>
-							<dd>{this.props.alien.channel}</dd>
-						</dl>
-					</div>
-				</div>
-			</div>
-		</div>
-	}
-});