API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 7th, 2019
287
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 9.14 KB | None | 0 0
raw download clone embed print report
  1. import React, { Component } from "react";
  2.  
  3. class Sidebar extends Component {
  4.   state = {
  5.     hovered: false
  6.   };
  7.  
  8.   onMouseOver = e => {
  9.     this.setState({ hovered: true });
  10.   };
  11.  
  12.   render() {
  13.     const { hovered } = this.state;
  14.     if (hovered) {
  15.       return (
  16.         <div
  17.           className="flex-container justify-content-end"
  18.           style={{
  19.             display: "flex",
  20.             textDecoration: "none",
  21.             listStyleType: "none"
  22.           }}
  23.           onMouseOver={this.onMouseOver}
  24.         >
  25.           <div className="col-sm-12 col-md-4">
  26.             <ul className="nav flex-column nav-pills">
  27.               <li
  28.                 className="nav-item"
  29.                 style={{ padding: "0.5em", backgroundColor: "#809fff" }}
  30.               >
  31.                 {" "}
  32.                 <a
  33.                   href="prva_divizija.html"
  34.                   style={{
  35.                     backgroundColor: "#809fff",
  36.                     borderRadius: "15px",
  37.                     color: "white"
  38.                   }}
  39.                   className="nav-link"
  40.                   onMouseOver={this.onMouseOver}
  41.                 >
  42.                   PRVA DIVIZIJA
  43.                 </a>
  44.               </li>
  45.               <li
  46.                 className="nav-item"
  47.                 style={{
  48.                   padding: "0.5em"
  49.                 }}
  50.               >
  51.                 {" "}
  52.                 <a
  53.                   href="druga_divizija.html"
  54.                   style={{
  55.                     backgroundColor: "#809fff",
  56.                     borderRadius: "15px",
  57.                     color: "white"
  58.                   }}
  59.                   className="nav-link"
  60.                   onMouseOver={this.onMouseOver}
  61.                 >
  62.                   DRUGA DIVIZIJA
  63.                 </a>
  64.               </li>
  65.               <li className="nav-item" style={{ padding: "0.5em" }}>
  66.                 <a
  67.                   href="treca_divizija.html"
  68.                   style={{
  69.                     backgroundColor: "#809fff",
  70.                     borderRadius: "15px",
  71.                     color: "white"
  72.                   }}
  73.                   className="nav-link"
  74.                   onMouseOver={this.onMouseOver}
  75.                 >
  76.                   TRECA DIVIZIJA
  77.                 </a>
  78.               </li>
  79.               <li className="nav-item" style={{ padding: "0.5em" }}>
  80.                 <a
  81.                   href="cetvrta_divizija.html"
  82.                   style={{
  83.                     backgroundColor: "#809fff",
  84.                     borderRadius: "15px",
  85.                     color: "white"
  86.                   }}
  87.                   className="nav-link"
  88.                   onMouseOver={this.onMouseOver}
  89.                 >
  90.                   CETVRTA DIVIZIJA
  91.                 </a>
  92.               </li>
  93.               <li className="nav-item" style={{ padding: "0.5em" }}>
  94.                 <a
  95.                   href="peta_divizija.html"
  96.                   style={{
  97.                     backgroundColor: "#809fff",
  98.                     borderRadius: "15px",
  99.                     color: "white"
  100.                   }}
  101.                   className="nav-link"
  102.                   onMouseOver={this.onMouseOver}
  103.                 >
  104.                   PETA DIVIZIJA
  105.                 </a>
  106.               </li>
  107.               <li className="nav-item" style={{ padding: "0.5em" }}>
  108.                 <a
  109.                   href="divizija_tuzla.html"
  110.                   style={{
  111.                     backgroundColor: "#809fff",
  112.                     borderRadius: "15px",
  113.                     color: "white"
  114.                   }}
  115.                   className="nav-link"
  116.                   onMouseOver={this.onMouseOver}
  117.                 >
  118.                   DIVIZIJA TUZLA
  119.                 </a>
  120.               </li>
  121.  
  122.               <li className="nav-item" style={{ padding: "0.5em" }}>
  123.                 <a
  124.                   href="divizija_sarajevo.html"
  125.                   style={{
  126.                     backgroundColor: "#ff6666",
  127.                     borderRadius: "15px",
  128.                     color: "white"
  129.                   }}
  130.                   className="nav-link"
  131.                   onMouseOver={this.onMouseOver}
  132.                 >
  133.                   DIVIZIJA SARAJEVO
  134.                 </a>
  135.               </li>
  136.  
  137.               <li
  138.                 className="nav-item"
  139.                 style={{
  140.                   padding: "0.5em"
  141.                 }}
  142.               >
  143.                 <a
  144.                   href="divizija_bugojno.html"
  145.                   style={{
  146.                     backgroundColor: "#ff6666",
  147.                     borderRadius: "15px",
  148.                     color: "white"
  149.                   }}
  150.                   className="nav-link"
  151.                   onMouseOver={this.onMouseOver}
  152.                 >
  153.                   DIVIZIJA BUGOJNO
  154.                 </a>
  155.               </li>
  156.             </ul>
  157.           </div>
  158.         </div>
  159.       );
  160.     } else {
  161.       return (
  162.         <div
  163.           className="flex-container justify-content-end"
  164.           style={{
  165.             display: "flex",
  166.             textDecoration: "none",
  167.             listStyleType: "none"
  168.           }}
  169.         >
  170.           <div className="col-sm-12 col-md-4">
  171.             <ul className="nav flex-column nav-pills">
  172.               <li
  173.                 className="nav-item"
  174.                 style={{ padding: "0.5em" }}
  175.               >
  176.                 {" "}
  177.                 <a
  178.                   href="prva_divizija.html"
  179.                   style={{
  180.                     backgroundColor: "#0033cc",
  181.                     borderRadius: "15px",
  182.                     color: "white"
  183.                   }}
  184.                   className="nav-link"
  185.                 >
  186.                   PRVA DIVIZIJA
  187.                 </a>
  188.               </li>
  189.               <li
  190.                 className="nav-item"
  191.                 style={{
  192.                   padding: "0.5em"
  193.                 }}
  194.               >
  195.                 {" "}
  196.                 <a
  197.                   href="druga_divizija.html"
  198.                   style={{
  199.                     backgroundColor: "#0033cc",
  200.                     borderRadius: "15px",
  201.                     color: "white"
  202.                   }}
  203.                   className="nav-link"
  204.                 >
  205.                   DRUGA DIVIZIJA
  206.                 </a>
  207.               </li>
  208.               <li className="nav-item" style={{ padding: "0.5em" }}>
  209.                 <a
  210.                   href="treca_divizija.html"
  211.                   style={{
  212.                     backgroundColor: "#0033cc",
  213.                     borderRadius: "15px",
  214.                     color: "white"
  215.                   }}
  216.                   className="nav-link"
  217.                 >
  218.                   TRECA DIVIZIJA
  219.                 </a>
  220.               </li>
  221.               <li className="nav-item" style={{ padding: "0.5em" }}>
  222.                 <a
  223.                   href="cetvrta_divizija.html"
  224.                   style={{
  225.                     backgroundColor: "#0033cc",
  226.                     borderRadius: "15px",
  227.                     color: "white"
  228.                   }}
  229.                   className="nav-link"
  230.                 >
  231.                   CETVRTA DIVIZIJA
  232.                 </a>
  233.               </li>
  234.               <li className="nav-item" style={{ padding: "0.5em" }}>
  235.                 <a
  236.                   href="peta_divizija.html"
  237.                   style={{
  238.                     backgroundColor: "#0033cc",
  239.                     borderRadius: "15px",
  240.                     color: "white"
  241.                   }}
  242.                   className="nav-link"
  243.                 >
  244.                   PETA DIVIZIJA
  245.                 </a>
  246.               </li>
  247.               <li className="nav-item" style={{ padding: "0.5em" }}>
  248.                 <a
  249.                   href="divizija_tuzla.html"
  250.                   style={{
  251.                     backgroundColor: "#CC0000",
  252.                     borderRadius: "15px",
  253.                     color: "white"
  254.                   }}
  255.                   className="nav-link"
  256.                 >
  257.                   DIVIZIJA TUZLA
  258.                 </a>
  259.               </li>
  260.  
  261.               <li className="nav-item" style={{ padding: "0.5em" }}>
  262.                 <a
  263.                   href="divizija_sarajevo.html"
  264.                   style={{
  265.                     backgroundColor: "#CC0000",
  266.                     borderRadius: "15px",
  267.                     color: "white"
  268.                   }}
  269.                   className="nav-link"
  270.                 >
  271.                   DIVIZIJA SARAJEVO
  272.                 </a>
  273.               </li>
  274.  
  275.               <li
  276.                 className="nav-item"
  277.                 style={{
  278.                   padding: "0.5em"
  279.                 }}
  280.               >
  281.                 <a
  282.                   href="divizija_bugojno.html"
  283.                   style={{
  284.                     backgroundColor: "#CC0000",
  285.                     borderRadius: "15px",
  286.                     color: "white"
  287.                   }}
  288.                   className="nav-link"
  289.                 >
  290.                   DIVIZIJA BUGOJNO
  291.                 </a>
  292.               </li>
  293.             </ul>
  294.           </div>
  295.         </div>
  296.       );
  297.     }
  298.   }
  299. }
  300.  
  301. export default Sidebar;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!