add a navtob at the top screen in mobile

relates #18
GSG-G9 · Feb 16, 2021 · 8c5123f · 8c5123f
1 parent 2bc8977
commit 8c5123f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/client/src/App/index.js b/client/src/App/index.js
@@ -27,6 +27,7 @@ import DesktopNavBar from '../components/DesktopNavBar';
 import Footer from '../components/Footer';
 import './style.css';
 import AllFoodList from '../Pages/FoodList';
+import NavBar from '../components/NavBar';
 
 function App() {
   return (
@@ -35,6 +36,7 @@ function App() {
         <Provider>
           <Router>
             <DesktopNavBar />
+            <NavBar />
             <Switch>
               <Route exact path={Home} component={HomePage} />
               <Route exact path={Login} component={LoginPage} />

diff --git a/client/src/components/DesktopNavBar/style.js b/client/src/components/DesktopNavBar/style.js
@@ -2,12 +2,13 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
   navbar: {
-    display: 'none',
+    width: '100%',
+    height: '3rem',
+    backgroundColor: theme.customColors[3],
     '@media (min-device-width: 900px)': {
       display: 'flex',
       justifyContent: 'space-around',
       alignItems: 'center',
-      backgroundColor: theme.customColors[3],
       color: 'white',
       zIndex: 100,
       position: 'fixed',