Merge pull request #133 from Go-phie/mobile-footer-menu

mobile home icon changed to movie icon
Go-phie · Apr 16, 2021 · 8ed70af · 8ed70af
2 parents 53dd4f2 + 86b5a48
commit 8ed70af
Showing 1 changed file with 28 additions and 27 deletions.
diff --git a/src/components/mobileNav/MobileNavbar.js b/src/components/mobileNav/MobileNavbar.js
@@ -1,25 +1,26 @@
-import React, { useState } from "react";
-import Style from "./MobileNavbar.styles";
-import SearchInput from "../searchInput/SearchInput";
+import React, { useState } from 'react'
+import Style from './MobileNavbar.styles'
+import SearchInput from '../searchInput/SearchInput'
 import {
   HomeIcon,
   SearchIcon,
   SunIcon,
   MoonIcon,
   MusicNotes,
-} from "../../utils/icons";
-import { useHistory, useLocation } from "react-router";
+  MovieReel
+} from '../../utils/icons'
+import { useHistory, useLocation } from 'react-router'
 
-const MobileNavbar = (props) => {
-  const [mobileSearch, setMobileSearch] = useState(false);
-  const location = useLocation();
-  console.log(location);
-  const history = useHistory();
+const MobileNavbar = props => {
+  const [mobileSearch, setMobileSearch] = useState(false)
+  const location = useLocation()
+  console.log(location)
+  const history = useHistory()
 
   return (
     <>
       <Style.MobileSearch
-        className={mobileSearch ? "show-mobile-searchbar" : ""}
+        className={mobileSearch ? 'show-mobile-searchbar' : ''}
       >
         <SearchInput
           searchInput={props.searchInput}
@@ -31,22 +32,22 @@ const MobileNavbar = (props) => {
       <Style.MobileNavbar>
         <button
           className={`${
-            location.pathname === "/Server1" ? "active" : ""
+            location.pathname === '/Server1' ? 'active' : ''
           } actions-button`}
           onClick={props.handleServerChange}
           onChange={props.handleServerChange}
-          data-value="Server1"
-          title="Home"
+          data-value='Server1'
+          title='Home'
         >
-          <HomeIcon />
+          {location.pathname === '/music' ? <MovieReel /> : <HomeIcon />}
         </button>
 
-        {location.pathname === "/music" ? null : (
+        {location.pathname === '/music' ? null : (
           <button
             className={`${
-              location.pathname === "/search" ? "active" : ""
+              location.pathname === '/search' ? 'active' : ''
             } actions-button`}
-            title="Search"
+            title='Search'
             onClick={() => setMobileSearch(!mobileSearch)}
           >
             <SearchIcon />
@@ -55,24 +56,24 @@ const MobileNavbar = (props) => {
 
         <button
           className={`${
-            location.pathname === "/music" ? "active" : ""
+            location.pathname === '/music' ? 'active' : ''
           } actions-button`}
-          title="Music"
-          onClick={() => history.push("/music")}
+          title='Music'
+          onClick={() => history.push('/music')}
         >
           <MusicNotes />
         </button>
 
         <button
-          className="actions-button"
-          title="Change Theme"
+          className='actions-button'
+          title='Change Theme'
           onClick={props.switchTheme}
         >
-          {props.theme === "dark" ? <SunIcon /> : <MoonIcon />}
+          {props.theme === 'dark' ? <SunIcon /> : <MoonIcon />}
         </button>
       </Style.MobileNavbar>
     </>
-  );
-};
+  )
+}
 
-export default MobileNavbar;
+export default MobileNavbar