From 6f5f713e5750440f76b3efec8f1eed63f2f6aa94 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@aalto.fi>
Date: Sat, 17 Nov 2018 00:18:32 +0200
Subject: [PATCH] Nav bar CSS base

---
 src/components/DropDownBox/DropDownBox.scss   |  6 ++++-
 .../NavbarChildLink/NavbarChildLink.scss      |  5 ++--
 .../NavbarChildLink/NavbarChildLink.tsx       |  1 -
 .../NavbarDropdownLink.scss                   |  6 ++++-
 .../NavbarDropdownLink/NavbarDropdownLink.tsx | 24 ++++++++++---------
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/DropDownBox/DropDownBox.scss b/src/components/DropDownBox/DropDownBox.scss
index 80a1c78..fcee4e2 100644
--- a/src/components/DropDownBox/DropDownBox.scss
+++ b/src/components/DropDownBox/DropDownBox.scss
@@ -1,5 +1,9 @@
 @import "../../assets/scss/globals";
 
 .drop-down-box {
-  color: $white;
+  background-color: white;
+  margin-top: 0.8rem;
+  position: absolute;
+  width: 6rem;
+  border: 0.1rem solid black;
 }
diff --git a/src/components/NavbarChildLink/NavbarChildLink.scss b/src/components/NavbarChildLink/NavbarChildLink.scss
index d70965d..b075af9 100644
--- a/src/components/NavbarChildLink/NavbarChildLink.scss
+++ b/src/components/NavbarChildLink/NavbarChildLink.scss
@@ -5,6 +5,7 @@ $border-width: 2px;
   width: 100%;
   display: flex;
   flex-flow: row nowrap;
-  justify-content: center;
-  color: $white;
+  justify-content: left;
+  margin-left: 0.5rem;
+  margin-bottom: 1rem;
 }
diff --git a/src/components/NavbarChildLink/NavbarChildLink.tsx b/src/components/NavbarChildLink/NavbarChildLink.tsx
index a4a99ae..97f9412 100644
--- a/src/components/NavbarChildLink/NavbarChildLink.tsx
+++ b/src/components/NavbarChildLink/NavbarChildLink.tsx
@@ -10,7 +10,6 @@ export interface NavbarChildLinkState {
 
 class NavbarChildLink extends React.Component<NavbarChildLinkProps, NavbarChildLinkState> {
   render() {
-    // style={this.state.open ? {} : {display: "none"}}
     return (
       <a className="navbar-child-link"
         href={this.props.to}>
diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
index 07a8804..954fc23 100644
--- a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
+++ b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
@@ -6,5 +6,9 @@ $border-width: 2px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
-  color: $white;
 }
+
+.navbar-dropdown-container {
+  position: relative;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
index 34eb7a1..189c1dd 100644
--- a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
+++ b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
@@ -23,15 +23,15 @@ class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, Navbar
   }
 
   handleClose = () => {
-    this.setState({open: false});
+    // this.setState({open: false});
   }
 
   render() {
     const { children } = this.props;
     const { open } = this.state;
-    if (open) {
+    if (open && children) {
       return (
-        <Fragment>
+        <div className="navbar-dropdown-container">
           <a className="navbar-dropdown-link"
             href={this.props.to}
             onMouseEnter={this.handleOpen}
@@ -40,17 +40,19 @@ class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, Navbar
           <DropDownBox>
             { children }
           </DropDownBox>
-        </Fragment>
+        </div>
       );
     } else {
       return (
-        <a className="navbar-dropdown-link"
-          href={this.props.to}
-          onMouseEnter={this.handleOpen}
-          onMouseLeave={this.handleClose}
-        >
-          {this.props.text}
-        </a>
+        <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>
       );
     }
   }