add side-bar sticky

src/components/collection/collection.scss

@@ -24,6 +24,13 @@
       width: 70%;
     }
 
+    .fixed {
+      position: fixed;
+      top: 0;
+      overflow-y: auto;
+      height: 100vh;
+    }
+
     #buttons {
       border-radius: 5px;
       border-color: transparent;

src/components/collection/index.js

@@ -14,13 +14,23 @@ export default class Home extends React.Component {
   @observable ext = false;
   @observable content = [];
   @observable card_img = API.card_back;
+  @observable menu_fixed = false;
 
-  componentDidMount() {
+  constructor() {
+    super();
     let ext = localStorage.getItem("extended");
     if (ext == null) this.ext = false;
     this.ext = (/true/i).test(ext);
   }
 
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
   handleContent(content) {
     this.content = content;
     this.p = 1;
@@ -36,12 +46,32 @@ export default class Home extends React.Component {
     localStorage.setItem("extended", this.ext);
   }
 
+
+
+  handleScroll = (event) => {
+    if (this.menu_fixed !== null) {
+      if (window.scrollY >= 220) {
+        if (!this.menu_fixed.classList.contains("fixed"))
+        {
+          this.menu_fixed.classList.add("fixed");
+          // this.menu_fixed.className = "fixed";
+        }
+      }
+      else if (this.menu_fixed.classList.contains("fixed")) {
+        // this.menu_fixed.className = "";
+        this.menu_fixed.classList.remove("fixed");
+      }
+    }
+  };
+
   render() {
     return (
       <div className={"collection " + (this.ext ? "extended" : "short")}>
         <div className="left">
-          <ImagePreview url={API.base_image + this.card_img} ref={n => {if (n) this.changeImage = n.getInstance().changeImage}} />
-          <SearchForm handleContent={this.handleContent.bind(this)} {...this.props} />
+          <div ref={(ref) => this.menu_fixed = ref}>
+            <ImagePreview url={API.base_image + this.card_img} ref={n => {if (n) this.changeImage = n.getInstance().changeImage}} />
+            <SearchForm handleContent={this.handleContent.bind(this)} {...this.props} />
+          </div>
         </div>
         <div className="right">
           <div className="list-nav-top">

src/components/collection/search/index.js

@@ -240,7 +240,6 @@ export default class SearchCollection extends React.Component {
             <input id="search" type="submit" value="Search" />
             <input id="search" type="button" value="Reset" onClick={this.reset} />
           </div>
-          <br />
           <div className="text-entry">
             <input type="text" name="name" placeholder="Card Name" value={this.input.name} onChange={this.handleChange} />
           </div>