Elementary state handling for Dropdown links

src/components/DropDownBox/DropDownBox.scss

@@ -0,0 +1,5 @@
+@import "../../assets/scss/globals";
+
+.drop-down-box {
+  color: $white;
+}

src/components/DropDownBox/DropDownBox.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import "./DropDownBox.scss";
+
+export interface DropDownBoxProps {}
+export interface DropDownBoxState {}
+
+class DropDownBox extends React.Component<DropDownBoxProps, DropDownBoxState> {
+  render() {
+    const { children } = this.props;
+    return (
+      <div className="drop-down-box">
+        {children}
+      </div>
+    );
+  }
+}
+
+export default DropDownBox;

src/components/DropDownBox/index.ts

@@ -0,0 +1,2 @@
+import DropDownBox from "./DropDownBox";
+export default DropDownBox;

src/components/NavbarChildLink/NavbarChildLink.tsx

@@ -4,12 +4,17 @@ import "./NavbarChildLink.scss";
 export interface NavbarChildLinkProps {
   to: string;
 }
-export interface NavbarChildLinkState {}
+export interface NavbarChildLinkState {
+  open: Boolean;
+}
 
 class NavbarChildLink extends React.Component<NavbarChildLinkProps, NavbarChildLinkState> {
   render() {
+    // style={this.state.open ? {} : {display: "none"}}
     return (
-      <a className="navbar-child-link" href={this.props.to}>
+      <a className="navbar-child-link"
+        href={this.props.to}>
+        {this.props.children}
       </a>
     );
   }

src/components/NavbarDropdownLink/NavbarDropdownLink.tsx

@@ -1,19 +1,58 @@
 import * as React from "react";
 import "./NavbarDropdownLink.scss";
+import { Fragment } from "react";
+import DropDownBox from "../DropDownBox/DropDownBox";
 
 export interface NavbarDropdownLinkProps {
   to: string;
   text: string;
 }
-export interface NavbarDropdownLinkState {}
+export interface NavbarDropdownLinkState {
+  open: Boolean;
+}
 
 class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, NavbarDropdownLinkState> {
+
+  constructor(props) {
+    super(props);
+    this.state = {open: false};
+  }
+
+  handleOpen = () => {
+    this.setState({open: true});
+  }
+
+  handleClose = () => {
+    this.setState({open: false});
+  }
+
   render() {
-    return (
-      <a className="navbar-dropdown-link" href={this.props.to}>
-        {this.props.text}
-      </a>
-    );
+    const { children } = this.props;
+    const { open } = this.state;
+    if (open) {
+      return (
+        <Fragment>
+          <a className="navbar-dropdown-link"
+            href={this.props.to}
+            onMouseEnter={this.handleOpen}
+            onMouseLeave={this.handleClose}
+          > {this.props.text} </a>
+          <DropDownBox>
+            { children }
+          </DropDownBox>
+        </Fragment>
+      );
+    } else {
+      return (
+        <a className="navbar-dropdown-link"
+          href={this.props.to}
+          onMouseEnter={this.handleOpen}
+          onMouseLeave={this.handleClose}
+        >
+          {this.props.text}
+        </a>
+      );
+    }
   }
 }