Implement correct dropdown functionality

src/components/DropDownBox/DropDownBox.scss

@@ -5,7 +5,8 @@
   margin-top: 0.8rem;
   position: absolute;
   left: 0;
-  top: 20px;
+  top: 40px;
+  z-index: 10;
 
   &,
   & a {

src/components/DropDownBox/DropDownBox.tsx

@@ -1,14 +1,23 @@
 import * as React from "react";
 import "./DropDownBox.scss";
 
-export interface DropDownBoxProps {}
+export interface DropDownBoxProps {
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+  visible: boolean;
+}
 export interface DropDownBoxState {}
 
 class DropDownBox extends React.Component<DropDownBoxProps, DropDownBoxState> {
   render() {
-    const { children } = this.props;
+    const { children, onMouseEnter, onMouseLeave, visible } = this.props;
     return (
-      <div className="drop-down-box">
+      <div
+        className="drop-down-box"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        hidden={!visible}
+      >
         {children}
       </div>
     );

src/components/NavbarChildLink/NavbarChildLink.scss

@@ -5,7 +5,7 @@ $border-width: 2px;
   display: block;
   padding: 1rem 1rem;
   letter-spacing: 1.5px;
-  margin-right: 3rem;
+  padding-right: 4rem;
   font-weight: 400;
 
   &:hover {

src/components/NavbarDropdownLink/NavbarDropdownLink.scss

@@ -8,6 +8,7 @@ $border-width: 2px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 2px;
+  padding: 20px 0;
 }
 
 .navbar-dropdown-container {

src/components/NavbarDropdownLink/NavbarDropdownLink.tsx

@@ -8,53 +8,65 @@ export interface NavbarDropdownLinkProps {
   text: string;
 }
 export interface NavbarDropdownLinkState {
-  open: Boolean;
+  mouseOverLink: Boolean;
+  mouseOverBox: Boolean;
 }
 
 class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, NavbarDropdownLinkState> {
 
   constructor(props) {
     super(props);
-    this.state = {open: false};
+    this.state = {
+      mouseOverLink: false,
+      mouseOverBox: false,
+    };
   }
 
-  handleOpen = () => {
-    this.setState({open: true});
+  handleMouseEnterLink = () => {
+    this.setState({
+      mouseOverLink: true,
+    });
   }
 
-  handleClose = () => {
-    this.setState({open: false});
+  handleMouseLeaveLink = () => {
+    this.setState({
+      mouseOverLink: false,
+    });
+  }
+
+  handleMouseEnterBox = () => {
+    this.setState({
+      mouseOverBox: true,
+    });
+  }
+
+  handleMouseLeaveBox = () => {
+    this.setState({
+      mouseOverBox: false,
+    });
   }
 
   render() {
     const { children } = this.props;
-    const { open } = this.state;
-    if (open && children) {
-      return (
-        <div className="navbar-dropdown-container">
-          <a className="navbar-dropdown-link"
-            href={this.props.to}
-            onMouseEnter={this.handleOpen}
-            onMouseLeave={this.handleClose}
-          > {this.props.text} </a>
-          <DropDownBox>
-            { children }
-          </DropDownBox>
-        </div>
-      );
-    } else {
-      return (
-        <div className="navbar-dropdown-container">
-          <a className="navbar-dropdown-link"
-            href={this.props.to}
-            onMouseEnter={this.handleOpen}
-            onMouseLeave={this.handleClose}
-          >
-            {this.props.text}
-          </a>
-        </div>
-      );
-    }
+    const { mouseOverLink, mouseOverBox } = this.state;
+    const open = mouseOverLink || mouseOverBox;
+
+    return (
+      <div className="navbar-dropdown-container">
+        <a className="navbar-dropdown-link"
+          href={this.props.to}
+          onMouseEnter={this.handleMouseEnterLink}
+          onMouseLeave={this.handleMouseLeaveLink}
+        > {this.props.text} </a>
+        <DropDownBox
+          onMouseEnter={this.handleMouseEnterBox}
+          onMouseLeave={this.handleMouseLeaveBox}
+          visible={open && !!children}
+        >
+          {children}
+        </DropDownBox>
+      </div>
+    );
   }
 }
 

src/components/Navigation/Navigation.tsx

@@ -12,14 +12,16 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
   render() {
     return (
       <div className="navigation">
-        <NavbarDropdownLink to="/kilta" text="Kilta">
+        <NavbarDropdownLink to="/kilta" text="Kilta ›">
           <NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
           <NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
           <NavbarChildLink to="/kilta/arkisto">Arkisto</NavbarChildLink>
         </NavbarDropdownLink>
         <NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura"></NavbarDropdownLink>
         <NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö"></NavbarDropdownLink>
-        <NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot"></NavbarDropdownLink>
+        <NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot ›">
+          <NavbarChildLink to="https://en.wikipedia.org/wiki/Gay">Simo Höglund</NavbarChildLink>
+        </NavbarDropdownLink>
         <NavbarDropdownLink to="/in_english" text="In English"></NavbarDropdownLink>
         <div className="navigation-some">
           <SoMeIcon name={SoMe.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />