Display BottomNavigationBar on mobile screens
Closed this issue · 2 comments
Start by adding the BottomNavigationBar component after the closing main tag in MainLayout.js. Then in BottomNavigationBar.js setting the breakpoint so that the display is set to "flex" on xs screens and set to "none" on md screens. (You can see how this is done in ResponsiveAppBar.js) Make sure the component is fixed to the bottom of the screen.
We could also change the icons displayed in the BottomNavigationBar component. Currently the values are 'Recents', 'Favorites', 'Nearby', and 'Folder'. For now lets change them to 'Home', 'Locations', 'Guides', and 'Profile'. This can be done by changing the label, value, and icon of the BottomNavigationActions.
Feel free to select which icons you think would be best for each from MUI's icon library and import them into BottomNavigationBar.js
If you have any questions you can reach out on the Ecohabit discord server. (The link you can find in README.md)
@tsimian is it looking good?
@tsimian is it looking good?
@tarunsamanta2k20 thank you for your help, but after discussing with @lugenx we may close this issue. If you are looking to make a first time contribution, please check out issue #193. If you are interested in it just comment and I can assign you!