-
diff --git a/tnoodle-ui/src/main/components/SideBar.jsx b/tnoodle-ui/src/main/components/SideBar.jsx
index fb0a37326..b671d9358 100644
--- a/tnoodle-ui/src/main/components/SideBar.jsx
+++ b/tnoodle-ui/src/main/components/SideBar.jsx
@@ -1,6 +1,7 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import Loading from "./Loading";
+import { Collapse } from "react-bootstrap";
import {
updateWcif,
updateEditingStatus,
@@ -67,6 +68,7 @@ const SideBar = connect(
loadingCompetitions: false,
loadingCompetitionInformation: false,
competitionId: null,
+ isOpen: true,
};
}
margin = 1; // Margin for login button and "Manual Selection"
@@ -107,8 +109,23 @@ const SideBar = connect(
if (competitionId != null) {
this.handleCompetitionSelection(competitionId);
}
+
+ this.setIsOpen();
+ window.addEventListener("resize", this.setIsOpen);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener("resize", this.setIsOpen);
}
+ setIsOpen = () => {
+ if (window.innerWidth <= 992) {
+ this.setState({ isOpen: false });
+ } else {
+ this.setState({ isOpen: true });
+ }
+ };
+
setLoadingUser = (flag) => {
this.setState({ ...this.state, loadingUser: flag });
};
@@ -337,59 +354,103 @@ const SideBar = connect(
render() {
return (
-
-
-
- TNoodle
-
-
-
- -
- {(this.state.competitions != null &&
- this.state.competitions.length) > 0 && (
-
- )}
-
- {this.state.competitions != null &&
- this.state.competitions.map(
- (competition, i) => (
- -
-
-
- )
- )}
-
-
- {this.loadingArea()}
+
+
+
+
+ TNoodle
+
+
- {this.logInButton()}
+
+
+
);
}