github.com/christoph-karpowicz/db_mediator@v0.0.0-20210207102849-61a28a1071d8/web/src/componenets/nav/SubNavigation.tsx (about)

     1  import React, { useRef, useState, useEffect } from 'react';
     2  import '../../css/SubNavigation.css';
     3  import { Link } from "react-router-dom";
     4  
     5  function SubNavigation(props: any) {
     6    const subnav = useRef<HTMLDivElement>(null);
     7    const [left, setLeft] = useState<number>(0);
     8  
     9    useEffect(() => {
    10      if (subnav.current) {
    11        const current: { offsetWidth: number } = subnav.current;
    12        const width: number = current.offsetWidth;
    13        const left = width > 0 ? width : 200;
    14        setLeft(left);
    15      }
    16    })
    17    
    18    return (
    19      <div 
    20        id="sub-navigation" 
    21        onClick={props.toggleSubNavigationActive}
    22        style={{ left: (props.isActive ? left : -1*left) + "px" }}
    23        ref={subnav}
    24      >
    25          <ul>
    26              {props.synchs && props.synchs.map((synch: string, i: number) => {
    27                return (
    28                  <li key={i}>
    29                      <Link to={"/synchs/" + synch}>{synch}</Link>
    30                  </li>
    31                );
    32              })}
    33          </ul>
    34      </div>
    35    );
    36  }
    37  
    38  export default SubNavigation;