diff --git a/client/package.json b/client/package.json index 5603f64..0745db9 100644 --- a/client/package.json +++ b/client/package.json @@ -6,6 +6,7 @@ "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", "@mapbox/mapbox-gl-geocoder": "^4.7.4", + "@material-ui/core": "^4.12.3", "@mui/icons-material": "^5.0.4", "@mui/material": "^5.0.3", "@testing-library/jest-dom": "^5.11.4", diff --git a/client/src/components/Header/LocationHeader.tsx b/client/src/components/Header/LocationHeader.tsx index 3df4ed1..e069a55 100644 --- a/client/src/components/Header/LocationHeader.tsx +++ b/client/src/components/Header/LocationHeader.tsx @@ -6,14 +6,16 @@ import SearchBar from './SearchBar'; import './LocationHeader.scss'; import ProfileIcon from './ProfileIcon'; import { Link } from 'react-router-dom'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; function LocationHeader() { const currentUser = useSelector((state: RootState) => state.currentUser); + const isLargeScreen = useMediaQuery('(min-width:640px)'); return ( - + {isLargeScreen && } {currentUser ? ( ) : ( diff --git a/client/src/pages/LocationPage/LeftColumnDetails.tsx b/client/src/pages/LocationPage/LeftColumnDetails.tsx index 55ad9b2..2bf6b81 100644 --- a/client/src/pages/LocationPage/LeftColumnDetails.tsx +++ b/client/src/pages/LocationPage/LeftColumnDetails.tsx @@ -13,7 +13,7 @@ function LeftColumnDetais({ locationInfo, id, }: { - locationInfo: LocationType; + locationInfo: LocationType | null; id: string; }) { return ( @@ -21,7 +21,7 @@ function LeftColumnDetais({