From 79af5334b45d8a463d99240c87c6433996102423 Mon Sep 17 00:00:00 2001
From: JonEsparaz <48423418+JonEsparaz@users.noreply.github.com>
Date: Thu, 24 Dec 2020 03:46:31 -0500
Subject: [PATCH] Collapsing side bar

---
 tnoodle-ui/src/App.css                     |  16 +-
 tnoodle-ui/src/App.js                      |   4 +-
 tnoodle-ui/src/main/components/SideBar.jsx | 165 ++++++++++++++-------
 3 files changed, 129 insertions(+), 56 deletions(-)

diff --git a/tnoodle-ui/src/App.css b/tnoodle-ui/src/App.css
index 62a24dfd8..81f34f793 100644
--- a/tnoodle-ui/src/App.css
+++ b/tnoodle-ui/src/App.css
@@ -59,6 +59,18 @@ nav li {
     padding-top: 10px;
 }
 
-#side-bar {
-    height: 100vh;
+@media (min-width: 992px) {
+    #side-bar {
+        height: 100vh;
+        position: sticky;
+        top: 0;
+        z-index: 1020;
+    }
+}
+
+@media (max-width: 991.98px) {
+    #title {
+        margin-bottom: 0;
+        margin-left: 12px;
+    }
 }
diff --git a/tnoodle-ui/src/App.js b/tnoodle-ui/src/App.js
index c9e98d8e6..73238580d 100644
--- a/tnoodle-ui/src/App.js
+++ b/tnoodle-ui/src/App.js
@@ -10,12 +10,12 @@ class App extends Component {
             <div className="App container-fluid">
                 <div className="row">
                     <div
-                        className="col-3 bg-dark sticky-top overflow-auto"
+                        className="col-lg-3 bg-dark overflow-auto"
                         id="side-bar"
                     >
                         <SideBar />
                     </div>
-                    <div className="col-9 m-0 p-0">
+                    <div className="col-lg-9 m-0 p-0">
                         <Main />
                     </div>
                 </div>
diff --git a/tnoodle-ui/src/main/components/SideBar.jsx b/tnoodle-ui/src/main/components/SideBar.jsx
index fb0a37326..84c0e3d95 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 (
-                <div className="h-100">
-                    <img
-                        className="tnoodle-logo mt-2"
-                        src={require("../assets/tnoodle_logo.svg")}
-                        alt="TNoodle logo"
-                    />
-                    <h1 className="display-3" id="title">
-                        TNoodle
-                    </h1>
-                    <div>
-                        <ul className="list-group">
-                            <li>
-                                {(this.state.competitions != null &&
-                                    this.state.competitions.length) > 0 && (
-                                    <button
-                                        type="button"
-                                        className={`btn btn-primary btn-lg btn-block btn-outline-light mb-${this.margin}`}
-                                        onClick={this.handleManualSelection}
-                                        disabled={
-                                            this.props.generatingScrambles
-                                        }
-                                    >
-                                        Manual Selection
-                                    </button>
-                                )}
-                            </li>
-                            {this.state.competitions != null &&
-                                this.state.competitions.map(
-                                    (competition, i) => (
-                                        <li key={i}>
-                                            <button
-                                                type="button"
-                                                className="btn btn-primary btn-lg btn-block m-1"
-                                                disabled={
-                                                    this.props
-                                                        .generatingScrambles
-                                                }
-                                                onClick={(_) =>
-                                                    this.handleCompetitionSelection(
-                                                        competition.id
-                                                    )
-                                                }
-                                            >
-                                                {competition.name}
-                                            </button>
-                                        </li>
-                                    )
-                                )}
-                        </ul>
-
-                        {this.loadingArea()}
+                <div className="h-100 pb-2">
+                    <div className="d-lg-none d-flex align-items-center pt-2 overflow-hidden">
+                        <img
+                            src={require("../assets/tnoodle_logo.svg")}
+                            alt="TNoodle logo"
+                        />
+                        <h1 className="display-3" id="title">
+                            TNoodle
+                        </h1>
+                        <button
+                            type="button"
+                            className="btn btn-primary btn-lg btn-outline-light ml-auto"
+                            onClick={() =>
+                                this.setState({ isOpen: !this.state.isOpen })
+                            }
+                            disabled={this.props.generatingScrambles}
+                            aria-label="Toggle menu"
+                            aria-expanded={this.state.isOpen}
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 30 30"
+                                width={30}
+                                height={30}
+                            >
+                                <path
+                                    stroke="currentColor"
+                                    strokeWidth={2}
+                                    strokeLinecap="round"
+                                    strokeMiterLimit={10}
+                                    d="M4 7h22M4 15h22M4 23h22"
+                                />
+                            </svg>
+                        </button>
                     </div>
-                    {this.logInButton()}
+                    <Collapse in={this.state.isOpen}>
+                        <div className="pt-2" id="sidebar-buttons">
+                            <div className="d-none d-lg-block">
+                                <img
+                                    className="tnoodle-logo mt-2"
+                                    src={require("../assets/tnoodle_logo.svg")}
+                                    alt="TNoodle logo"
+                                />
+                                <h1 className="display-3" id="title">
+                                    TNoodle
+                                </h1>
+                            </div>
+                            <div>
+                                <ul className="list-group">
+                                    <li>
+                                        {this.state.competitions != null &&
+                                            this.state.competitions.length >
+                                                0 && (
+                                                <button
+                                                    type="button"
+                                                    className={`btn btn-primary btn-lg btn-block btn-outline-light mb-${this.margin}`}
+                                                    onClick={
+                                                        this
+                                                            .handleManualSelection
+                                                    }
+                                                    disabled={
+                                                        this.props
+                                                            .generatingScrambles
+                                                    }
+                                                >
+                                                    Manual Selection
+                                                </button>
+                                            )}
+                                    </li>
+                                    {this.state.competitions != null &&
+                                        this.state.competitions.map(
+                                            (competition, i) => (
+                                                <li key={i}>
+                                                    <button
+                                                        type="button"
+                                                        className="btn btn-primary btn-lg btn-block m-1"
+                                                        disabled={
+                                                            this.props
+                                                                .generatingScrambles
+                                                        }
+                                                        onClick={(_) =>
+                                                            this.handleCompetitionSelection(
+                                                                competition.id
+                                                            )
+                                                        }
+                                                    >
+                                                        {competition.name}
+                                                    </button>
+                                                </li>
+                                            )
+                                        )}
+                                </ul>
+                                {this.loadingArea()}
+                            </div>
+                            {this.logInButton()}
+                        </div>
+                    </Collapse>
                 </div>
             );
         }