Commit aedf2d77 authored by jrc632's avatar jrc632
Browse files

Show/hide Sort and Filter Bar

parent f76714e0

app/src/components/container/App.jsx

+8 −2
Original line number Diff line number Diff line
@@ -15,6 +15,11 @@ import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx"; 
 */

export default function App() {

  const [targetPlanet, setTargetPlanet] = React.useState("Mars");

  const [showSortBar, setShowSortBar] = React.useState(true);



  const ShowHideSort = () => {

    setShowSortBar(!showSortBar);

  }



  /**

   * Handles target body selection
@@ -38,7 +43,8 @@ export default function App() { 
        </div>

      </div>

      <div id="right-bar">  

        <SearchAndFilterInput />

        <div id="sort-filter-collapsed" onClick={ShowHideSort}>Sort and Filter</div>

        { showSortBar ? <SearchAndFilterInput /> : null }

      </div>

    </div>

  );

app/src/components/presentational/SearchAndFilterInput.jsx

+0 −1
Original line number Diff line number Diff line
@@ -33,7 +33,6 @@ const useStyles = makeStyles(theme => ({ 
  },

  container: {

    padding: "1rem",

    height: "100%",

    width: 225,

    display: "flex",

    flexDirection: "column",

app/src/styles.css

+14 −0
Original line number Diff line number Diff line
@@ -37,6 +37,8 @@ App Layout Grid 
#right-bar {

  grid-area: r;

  background: lightgray;

  display: flex;

  flex-direction: row;

}



#top-bar {
@@ -80,6 +82,18 @@ App Layout Grid 
  margin: 5px;

}



#sort-filter-collapsed {

  cursor: pointer;

  font-size: 10pt;

  font-family: sans-serif;

  font-weight: 600;

  text-align: center;

  writing-mode: vertical-lr;

  text-orientation: mixed;

  transform: rotate(180deg);

  height: 100%;

}



#wkt-collapsed {

  height: 18px;

  font-family: sans-serif;