From 14605cd0fce8252d484dd7020ae06dea161a3950 Mon Sep 17 00:00:00 2001
From: Aarni Halinen <aarni.halinen@aalto.fi>
Date: Fri, 16 Nov 2018 19:57:38 +0200
Subject: [PATCH] Change Link components to dropdown and ChildLink components

---
 .../NavbarChildLink/NavbarChildLink.scss      | 22 +++++++++++++++++++
 .../NavbarChildLink/NavbarChildLink.tsx       | 18 +++++++++++++++
 src/components/NavbarChildLink/index.ts       |  2 ++
 .../NavbarDropdownLink.scss                   | 22 +++++++++++++++++++
 .../NavbarDropdownLink/NavbarDropdownLink.tsx | 20 +++++++++++++++++
 src/components/NavbarDropdownLink/index.ts    |  2 ++
 src/components/Navigation/Navigation.tsx      | 16 +++++++++-----
 7 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 src/components/NavbarChildLink/NavbarChildLink.scss
 create mode 100644 src/components/NavbarChildLink/NavbarChildLink.tsx
 create mode 100644 src/components/NavbarChildLink/index.ts
 create mode 100644 src/components/NavbarDropdownLink/NavbarDropdownLink.scss
 create mode 100644 src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
 create mode 100644 src/components/NavbarDropdownLink/index.ts

diff --git a/src/components/NavbarChildLink/NavbarChildLink.scss b/src/components/NavbarChildLink/NavbarChildLink.scss
new file mode 100644
index 0000000..613c879
--- /dev/null
+++ b/src/components/NavbarChildLink/NavbarChildLink.scss
@@ -0,0 +1,22 @@
+@import "../../assets/scss/globals";
+$border-width: 2px;
+
+.navbar-child-link {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  margin-bottom: 3rem;
+
+  &__item {
+    padding: 0.8rem 2rem;
+    transition: border-bottom 0.2s;
+    border-bottom: $border-width solid $dark-blue;
+    cursor: pointer;
+    color: $white;
+
+    &:hover {
+      border-bottom: $border-width solid $white;
+    }
+  }
+}
diff --git a/src/components/NavbarChildLink/NavbarChildLink.tsx b/src/components/NavbarChildLink/NavbarChildLink.tsx
new file mode 100644
index 0000000..f4f9d31
--- /dev/null
+++ b/src/components/NavbarChildLink/NavbarChildLink.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import "./NavbarChildLink.scss";
+
+export interface NavbarChildLinkProps {
+  to: string;
+}
+export interface NavbarChildLinkState {}
+
+class NavbarChildLink extends React.Component<NavbarChildLinkProps, NavbarChildLinkState> {
+  render() {
+    return (
+      <a className="navbar-child-link" href={this.props.to}>
+      </a>
+    );
+  }
+}
+
+export default NavbarChildLink;
diff --git a/src/components/NavbarChildLink/index.ts b/src/components/NavbarChildLink/index.ts
new file mode 100644
index 0000000..614b1c1
--- /dev/null
+++ b/src/components/NavbarChildLink/index.ts
@@ -0,0 +1,2 @@
+import NavbarChildLink from "./NavbarChildLink";
+export default NavbarChildLink;
diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
new file mode 100644
index 0000000..f5d09db
--- /dev/null
+++ b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss
@@ -0,0 +1,22 @@
+@import "../../assets/scss/globals";
+$border-width: 2px;
+
+.navbar-dropdown-link {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  margin-bottom: 3rem;
+
+  &__item {
+    padding: 0.8rem 2rem;
+    transition: border-bottom 0.2s;
+    border-bottom: $border-width solid $dark-blue;
+    cursor: pointer;
+    color: $white;
+
+    &:hover {
+      border-bottom: $border-width solid $white;
+    }
+  }
+}
diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
new file mode 100644
index 0000000..9e3e2fe
--- /dev/null
+++ b/src/components/NavbarDropdownLink/NavbarDropdownLink.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import "./NavbarDropdownLink.scss";
+
+export interface NavbarDropdownLinkProps {
+  to: string;
+  text: string;
+}
+export interface NavbarDropdownLinkState {}
+
+class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, NavbarDropdownLinkState> {
+  render() {
+    return (
+      <a className="navbar-dropdown-link" href={this.props.to}>
+        {this.props.text}
+      </a>
+    );
+  }
+}
+
+export default NavbarDropdownLink;
diff --git a/src/components/NavbarDropdownLink/index.ts b/src/components/NavbarDropdownLink/index.ts
new file mode 100644
index 0000000..9875695
--- /dev/null
+++ b/src/components/NavbarDropdownLink/index.ts
@@ -0,0 +1,2 @@
+import NavbarDropdownLink from "./NavbarDropdownLink";
+export default NavbarDropdownLink;
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index 516419a..d5cdc22 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
 import "./Navigation.scss";
+import NavbarDropdownLink  from "../NavbarDropdownLink/NavbarDropdownLink";
+import NavbarChildLink from "../NavbarChildLink/NavbarChildLink";
 import { Link } from "react-router-dom";
 
 export interface NavigationProps {}
@@ -9,11 +11,15 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
   render() {
     return (
       <div className="navigation">
-        <Link className="navigation__item" to="/kilta">Kilta</Link>
-        <Link className="navigation__item" to="/opinnot_ja_ura">Opinnot ja ura</Link>
-        <Link className="navigation__item" to="/yritysyhteistyo">Yritysyhteistyö</Link>
-        <Link className="navigation__item" to="/yhteystiedot">Yhteystiedot</Link>
-        <Link className="navigation__item" to="/in_english">In English</Link>
+        <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="/in_english" text="In English"></NavbarDropdownLink>
       </div>
     );
   }