From 45cb4d0122c0075a2e9d7a3982bbe63c220b1f6c Mon Sep 17 00:00:00 2001
From: Louise Wang <louise.w1997@gmail.com>
Date: Mon, 4 Jul 2022 15:31:58 +0200
Subject: [PATCH] fix: change classname to props

---
 src/Navigation/Navigation.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/Navigation/Navigation.tsx b/src/Navigation/Navigation.tsx
index 3313510b9..b1d21ea42 100644
--- a/src/Navigation/Navigation.tsx
+++ b/src/Navigation/Navigation.tsx
@@ -5,7 +5,6 @@ import {
   MenuItem,
   Typography,
   Button,
-  PropTypes,
 } from '@material-ui/core';
 import { redirect, Context } from '@graasp/utils';
 import ExploreIcon from '../icons/ExploreIcon';
@@ -89,17 +88,22 @@ interface NavigationProps {
   id?: string;
   currentValue: Context;
   hostMap: HostMap;
-  color: PropTypes.Color;
+  buttonStyle?: string;
+  triangleStyle?: string;
 }
 
 const Navigation: React.FC<NavigationProps> = ({
   currentValue,
   hostMap = {},
   id,
-  color = 'secondary',
+  buttonStyle,
+  triangleStyle,
 }) => {
   const classes = useStyles();
 
+  const button = buttonStyle || classes.button;
+  const triangle = triangleStyle || classes.triangle;
+
   const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
 
   const handleClick: MouseEventHandler = (event): void => {
@@ -127,14 +131,13 @@ const Navigation: React.FC<NavigationProps> = ({
         aria-controls='navigation-menu'
         aria-haspopup='true'
         onClick={handleClick}
-        className={classes.button}
+        className={button}
         variant='outlined'
-        color={color}
       >
         <Typography variant='h6' color='inherit'>
           {currentValue}
         </Typography>
-        <div className={classes.triangle} />
+        <div className={triangle} />
       </Button>
       <Menu
         id='navigation-menu'