Hover, selected states for App navigation

packages/files-ui/src/Components/Layouts/AppNav.tsx

@@ -1,6 +1,6 @@
 import { useFiles } from "../../Contexts/FilesContext"
 import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme"
-import React, { useCallback } from "react"
+import React, { useCallback, useMemo } from "react"
 import clsx from "clsx"
 import {
  Link,
@@ -13,7 +13,8 @@ import {
  DeleteSvg,
  UserShareSvg,
  MenuDropdown,
- ScrollbarWrapper
+ ScrollbarWrapper,
+ useLocation
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../FilesRoutes"
 import { Trans } from "@lingui/macro"
@@ -147,10 +148,11 @@ const useStyles = makeStyles(
  flexDirection: "row",
  alignItems: "center",
  cursor: "pointer",
- padding: `${constants.generalUnit * 1.5}px 0`,
+ margin: `${constants.generalUnit * 0.5}px 0`,
+ padding: `${constants.generalUnit}px ${constants.generalUnit * 1.5}px`,
+ borderRadius: "4px",
  transitionDuration: `${animation.transform}ms`,
  "& span": {
- transitionDuration: `${animation.transform}ms`,
  [breakpoints.up("md")]: {
  color: constants.nav.itemColor
  },
@@ -162,7 +164,6 @@ const useStyles = makeStyles(
  "& path": {
  fill: constants.nav.headingColor
  },
- transitionDuration: `${animation.transform}ms`,
  width: Number(constants.svgWidth),
  marginRight: constants.generalUnit * 2,
  [breakpoints.up("md")]: {
@@ -173,17 +174,21 @@ const useStyles = makeStyles(
  }
  },
  "&:hover": {
- "& span": {
- color: constants.nav.itemColorHover
- },
- "& svg": {
- fill: constants.nav.itemIconColorHover
+ backgroundColor: palette.additional["gray"][5],
+ [breakpoints.down("md")]: {
+ color: constants.nav.backgroundColor
+ }
+ },
+ "&.selected": {
+ backgroundColor: palette.additional["gray"][5],
+ [breakpoints.down("md")]: {
+ "& span": {
+ color: constants.nav.mobileSelectedBackground
+ },
+ "& svg": {
+ fill: constants.nav.mobileSelectedBackground
+ }
  }
- }
- },
- navItemText: {
- [breakpoints.down("md")]: {
- color: palette.additional["gray"][3]
  }
  },
  menuItem: {
@@ -245,13 +250,16 @@ interface IAppNav {
  setNavOpen: (state: boolean) => void
 }
 
+type AppNavTab = "home" | "shared" | "bin" | "settings"
+
 const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
  const { desktop } = useThemeSwitcher()
  const classes = useStyles()
  const { storageSummary } = useFiles()
  const { isLoggedIn, secured } = useFilesApi()
  const { publicKey, isNewDevice, shouldInitializeAccount, logout } = useThresholdKey()
  const { removeUser, getProfileTitle, profile } = useUser()
+ const location = useLocation()
 
  const signOut = useCallback(() => {
  logout()
@@ -266,6 +274,18 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
 
  const profileTitle = getProfileTitle()
 
+ const appNavTab: AppNavTab | undefined = useMemo(() => {
+ const firstPathParam = location.pathname.split("/")[1]
+ switch(firstPathParam) {
+ case "drive": return "home"
+ case "shared": return "shared"
+ case "shared-overview": return "shared"
+ case "bin": return "bin"
+ case "settings": return "settings"
+ default: return
+ }
+ }, [location])
+
  return (
  <ScrollbarWrapper className={classes.scrollRoot}>
  <section
@@ -341,41 +361,38 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
  <Link
  data-cy="link-home"
  onClick={handleOnClick}
- className={classes.navItem}
+ className={clsx(classes.navItem, appNavTab === "home" && "selected")}
  to={ROUTE_LINKS.Drive("/")}
  >
  <DatabaseSvg />
  <Typography
  variant="h5"
- className={classes.navItemText}
  >
  <Trans>Home</Trans>
  </Typography>
  </Link>
  <Link
  data-cy="link-shared"
  onClick={handleOnClick}
- className={classes.navItem}
+ className={clsx(classes.navItem, appNavTab === "shared" && "selected")}
  to={ROUTE_LINKS.SharedFolders}
  >
  <UserShareSvg />
  <Typography
  variant="h5"
- className={classes.navItemText}
  >
  <Trans>Shared</Trans>
  </Typography>
  </Link>
  <Link
  data-cy="link-bin"
  onClick={handleOnClick}
- className={classes.navItem}
+ className={clsx(classes.navItem, appNavTab === "bin" && "selected")}
  to={ROUTE_LINKS.Bin("/")}
  >
  <DeleteSvg />
  <Typography
  variant="h5"
- className={classes.navItemText}
  >
  <Trans>Bin</Trans>
  </Typography>
@@ -388,13 +405,12 @@ const AppNav = ({ navOpen, setNavOpen }: IAppNav) => {
  <Link
  data-cy="link-settings"
  onClick={handleOnClick}
- className={classes.navItem}
+ className={clsx(classes.navItem, appNavTab === "settings" && "selected")}
  to={ROUTE_LINKS.SettingsDefault}
  >
  <SettingSvg />
  <Typography
  variant="h5"
- className={classes.navItemText}
  >
  <Trans>Settings</Trans>
  </Typography>

packages/files-ui/src/Themes/Constants.ts

@@ -61,6 +61,7 @@ export interface CsfColors extends IConstants {
  itemColorHover: string
  itemIconColor: string
  itemIconColorHover: string
+ mobileSelectedBackground: string
  profileButtonShadow: string
  }
  createFolder: {

packages/files-ui/src/Themes/DarkTheme.ts

@@ -373,9 +373,10 @@ export const darkTheme = createTheme<CsfColors>({
  mobileBackgroundColor: "var(--gray2)",
  headingColor: "var(--gray9)",
  itemColor: "var(--gray9)",
- itemColorHover: "var(--gray9)",
  itemIconColor: "var(--gray9)",
+ itemColorHover: "var(--gray9)",
  itemIconColorHover: "var(--gray9)",
+ mobileSelectedBackground: "var(--gray9)",
  profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)"
  },
  createFolder: {

packages/files-ui/src/Themes/LightTheme.ts

@@ -63,9 +63,10 @@ export const lightTheme = createTheme<CsfColors>({
  mobileBackgroundColor: "var(--gray9)",
  headingColor: "inherit",
  itemColor: "inherit",
- itemColorHover: "var(--gray7)",
  itemIconColor: "inherit",
- itemIconColorHover: "var(--gray7)",
+ itemColorHover: "var(--gray6)",
+ itemIconColorHover: "var(--gray6)",
+ mobileSelectedBackground: "var(--gray9)",
  profileButtonShadow: "0px 1px 2px rgba(0, 0, 0, 0.25)"
  },
  createFolder: {

packages/storage-ui/src/Components/Layouts/AppNav.tsx

@@ -3,7 +3,7 @@ import {
  makeStyles,
  useThemeSwitcher
 } from "@chainsafe/common-theme"
-import React, { useCallback } from "react"
+import React, { useCallback, useMemo } from "react"
 import clsx from "clsx"
 import {
  Link,
@@ -16,7 +16,8 @@ import {
  SettingSvg,
  DocumentSvg,
  Button,
- PowerDownIcon
+ PowerDownIcon,
+ useLocation
 } from "@chainsafe/common-components"
 import { ROUTE_LINKS } from "../StorageRoutes"
 import { Trans } from "@lingui/macro"
@@ -137,43 +138,37 @@ const useStyles = makeStyles(
  flexDirection: "row",
  alignItems: "center",
  cursor: "pointer",
- padding: `${constants.generalUnit * 1.5}px 0`,
+ margin: `${constants.generalUnit * 0.5}px 0`,
+ padding: `${constants.generalUnit}px ${constants.generalUnit * 1.5}px`,
+ borderRadius: "4px",
  transitionDuration: `${animation.transform}ms`,
  "& span": {
- transitionDuration: `${animation.transform}ms`,
- [breakpoints.up("md")]: {
- color: constants.nav.itemColor
- },
+ color: constants.nav.itemColor,
  [breakpoints.down("md")]: {
- color: constants.nav.itemColorHover
+ color: palette.additional["gray"][3]
  }
  },
  "& svg": {
- transitionDuration: `${animation.transform}ms`,
  width: Number(constants.svgWidth),
  marginRight: constants.generalUnit * 2,
- [breakpoints.up("md")]: {
- fill: constants.nav.itemIconColor
- },
+ fill: constants.nav.itemIconColor,
  [breakpoints.down("md")]: {
- fill: constants.nav.itemIconColorHover
+ fill: palette.additional["gray"][3]
  }
  },
  "&:hover": {
- "& span": {
- color: constants.nav.itemColorHover
- },
- "& svg": {
- fill: constants.nav.itemIconColorHover
- }
+ backgroundColor: palette.additional["gray"][5]
  },
- [breakpoints.down("md")]: {
- minWidth: Number(constants.mobileNavWidth)
- }
- },
- navItemText: {
- [breakpoints.down("md")]: {
- color: palette.additional["gray"][3]
+ "&.selected": {
+ backgroundColor: palette.additional["gray"][5],
+ [breakpoints.down("md")]: {
+ "& span": {
+ color: palette.additional["gray"][9]
+ },
+ "& svg": {
+ fill: palette.additional["gray"][9]
+ }
+ }
  }
  },
  menuItem: {
@@ -202,15 +197,15 @@ interface IAppNav {
  setNavOpen: (state: boolean) => void
 }
 
+type AppNavTab = "buckets" | "cids" | "settings"
+
 const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
  const { desktop } = useThemeSwitcher()
  const classes = useStyles()
-
+ const location = useLocation()
  const { storageSummary } = useStorage()
-
  const { isLoggedIn, logout } = useStorageApi()
 
-
  const signOut = useCallback(() => {
  logout()
  }, [logout])
@@ -221,6 +216,17 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
  }
  }, [desktop, navOpen, setNavOpen])
 
+ const appNavTab: AppNavTab | undefined = useMemo(() => {
+ const firstPathParam = location.pathname.split("/")[1]
+ switch(firstPathParam) {
+ case "cids": return "cids"
+ case "buckets": return "buckets"
+ case "bucket": return "buckets"
+ case "settings": return "settings"
+ default: return
+ }
+ }, [location])
+
  return (
  <section
  className={clsx(classes.root, {
@@ -249,29 +255,25 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
  <Link
  data-cy="buckets-nav"
  onClick={handleOnClick}
- className={classes.navItem}
+ className={clsx(classes.navItem, appNavTab === "buckets" && "selected")}
  to={ROUTE_LINKS.Buckets}
  >
  <FolderSvg />
  <Typography
  variant="h5"
- className={classes.navItemText}
  >
  <Trans>Buckets</Trans>
  </Typography>
  </Link>
  <Link
  data-cy="cids-nav"
- onClick={() => {
- handleOnClick()
- }}
- className={classes.navItem}
+ onClick={handleOnClick}
+ className={clsx(classes.navItem, appNavTab === "cids" && "selected")}
  to={ROUTE_LINKS.Cids}
  >
  <DatabaseSvg />
  <Typography
  variant="h5"
- className={classes.navItemText}
  >
  <Trans>CIDs</Trans>
  </Typography>
@@ -281,13 +283,12 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
  <Link
  data-cy="settings-nav"
  onClick={handleOnClick}
- className={classes.navItem}
+ className={clsx(classes.navItem, appNavTab === "settings" && "selected")}
  to={ROUTE_LINKS.SettingsRoot}
  >
  <SettingSvg />
  <Typography
  variant="h5"
- className={classes.navItemText}
  >
  <Trans>Settings</Trans>
  </Typography>
@@ -302,7 +303,6 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
  <DocumentSvg />
  <Typography
  variant="h5"
- className={classes.navItemText}
  >
  <Trans>Docs</Trans>
  </Typography>