diff --git a/frontend-react/public/index.html b/frontend-react/public/index.html index 73e60de26..ffdf27c0b 100644 --- a/frontend-react/public/index.html +++ b/frontend-react/public/index.html @@ -10,35 +10,14 @@ - - - sendou.ink
- diff --git a/frontend-react/src/components/root/NavItem.tsx b/frontend-react/src/components/root/NavItem.tsx index e32af7052..06a24051d 100644 --- a/frontend-react/src/components/root/NavItem.tsx +++ b/frontend-react/src/components/root/NavItem.tsx @@ -1,12 +1,10 @@ import React, { useContext } from "react" import { PseudoBox, ListIcon, ListItem } from "@chakra-ui/core" -import { Link } from "@reach/router" +import { Link, useLocation } from "@reach/router" import { IconType } from "react-icons/lib/cjs" import MyThemeContext from "../../themeContext" -/*const hoverColor = { light: "gray.900", dark: "whiteAlpha.900" } -const activeColor = { light: "orange.800", dark: "pink.100" } -const activeBg = { light: "orange.50", dark: "#308c7a4d" }*/ +const hoverColor = { light: "gray.900", dark: "whiteAlpha.900" } interface NavItemProps { to: string @@ -15,7 +13,13 @@ interface NavItemProps { } const NavItem: React.FC = ({ to, Icon, title }) => { - const { themeColorWithShade } = useContext(MyThemeContext) + const { themeColorWithShade, colorMode, themeColor } = useContext( + MyThemeContext + ) + + const location = useLocation() + console.log("location", location) + const isActive = ("/" + to).indexOf(location.pathname) !== -1 return ( @@ -30,6 +34,17 @@ const NavItem: React.FC = ({ to, Icon, title }) => { fontWeight="medium" outline="none" _focus={{ shadow: "outline" }} + _hover={{ + color: hoverColor[colorMode], + transform: "translateX(2px)", + }} + {...(isActive && { + bg: + colorMode === "light" ? `${themeColor}.100` : `${themeColor}.800`, + rounded: "sm", + //color: activeColor[colorMode], + _hover: {}, + })} > {" "} {title} diff --git a/frontend-react/src/index.tsx b/frontend-react/src/index.tsx index 666e130ab..a2aad8b9c 100644 --- a/frontend-react/src/index.tsx +++ b/frontend-react/src/index.tsx @@ -10,7 +10,11 @@ import { import { ApolloProvider } from "@apollo/react-hooks" import { QueryParamProvider } from "use-query-params" import { HelmetProvider } from "react-helmet-async" -import { globalHistory } from "@reach/router" +import { + LocationProvider, + createMemorySource, + createHistory, +} from "@reach/router" import ApolloClient from "apollo-boost" import * as serviceWorker from "./serviceWorker" import customIcons from "./assets/icons" @@ -24,19 +28,23 @@ const client = new ApolloClient({ const customTheme = { ...theme, icons: { ...theme.icons, ...customIcons } } +let history = createHistory(window as any) + ReactDOM.render( - - - - - - - - - - - - , + + + + + + + + + + + + + + , document.getElementById("root") )