From fb3ed2365060b29caf856f733edd70b9fee55e8b Mon Sep 17 00:00:00 2001
From: Ryo Narita <mail.ryonarita@gmail.com>
Date: Tue, 11 Aug 2020 19:08:23 +0900
Subject: [PATCH] Add style to active link at the header navigation

---
 pkg/app/web/src/components/header.tsx | 19 +++++++++++++++----
 pkg/app/web/src/pages/index.tsx       |  8 ++++++--
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/pkg/app/web/src/components/header.tsx b/pkg/app/web/src/components/header.tsx
index 5e6a30c462..8b81439fa0 100644
--- a/pkg/app/web/src/components/header.tsx
+++ b/pkg/app/web/src/components/header.tsx
@@ -16,7 +16,7 @@ import {
   PAGE_PATH_SETTINGS,
   PAGE_PATH_LOGIN,
 } from "../constants";
-import { Link as RouterLink } from "react-router-dom";
+import { NavLink as RouterLink } from "react-router-dom";
 import { useMe } from "../modules/me";
 import ArrowDownIcon from "@material-ui/icons/ArrowDropDown";
 
@@ -34,9 +34,6 @@ const useStyles = makeStyles((theme) => ({
     width: theme.spacing(4),
     height: theme.spacing(4),
   },
-  link: {
-    marginRight: theme.spacing(2),
-  },
   userAvatar: {
     width: theme.spacing(4),
     height: theme.spacing(4),
@@ -45,6 +42,16 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: theme.spacing(1),
     textTransform: "none",
   },
+  link: {
+    marginRight: theme.spacing(2),
+    display: "inline-flex",
+    height: "100%",
+    alignItems: "center",
+  },
+  activeLink: {
+    fontWeight: "bold",
+    borderBottom: `2px solid ${theme.palette.background.paper}`,
+  },
 }));
 
 export const Header: FC = memo(function Header() {
@@ -70,6 +77,7 @@ export const Header: FC = memo(function Header() {
         <Link
           component={RouterLink}
           className={classes.link}
+          activeClassName={classes.activeLink}
           color="inherit"
           to={PAGE_PATH_APPLICATIONS}
         >
@@ -78,6 +86,7 @@ export const Header: FC = memo(function Header() {
         <Link
           component={RouterLink}
           className={classes.link}
+          activeClassName={classes.activeLink}
           color="inherit"
           to={PAGE_PATH_DEPLOYMENTS}
         >
@@ -86,6 +95,7 @@ export const Header: FC = memo(function Header() {
         <Link
           component={RouterLink}
           className={classes.link}
+          activeClassName={classes.activeLink}
           color="inherit"
           to={PAGE_PATH_INSIGHTS}
         >
@@ -94,6 +104,7 @@ export const Header: FC = memo(function Header() {
         <Link
           component={RouterLink}
           className={classes.link}
+          activeClassName={classes.activeLink}
           color="inherit"
           to={PAGE_PATH_SETTINGS}
         >
diff --git a/pkg/app/web/src/pages/index.tsx b/pkg/app/web/src/pages/index.tsx
index 630331dced..08ac446b7e 100644
--- a/pkg/app/web/src/pages/index.tsx
+++ b/pkg/app/web/src/pages/index.tsx
@@ -1,7 +1,7 @@
 import { EntityId } from "@reduxjs/toolkit";
 import React, { FC, memo, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Route, Switch } from "react-router-dom";
+import { Route, Switch, Redirect } from "react-router-dom";
 import { Header } from "../components/header";
 import { Toasts } from "../components/toasts";
 import {
@@ -77,7 +77,11 @@ export const Pages: FC = memo(function Pages() {
     <>
       <Header />
       <Switch>
-        <Route exact path={PAGE_PATH_TOP} component={ApplicationIndexPage} />
+        <Route
+          exact
+          path={PAGE_PATH_TOP}
+          component={() => <Redirect to={PAGE_PATH_APPLICATIONS} />}
+        />
         <Route exact path={PAGE_PATH_LOGIN} component={LoginPage} />
         <Route
           exact