Change Link components to dropdown and ChildLink components

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;
+    }
+  }
+}

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;

src/components/NavbarChildLink/index.ts

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

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;
+    }
+  }
+}

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;

src/components/NavbarDropdownLink/index.ts

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

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>
     );
   }