Just Getting Started:
- As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success.
- I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to be one of those face-palm moments.
- Feedback on best practices or improvements to my question are welcome!
- Appreciate anyone taking the time to read this! Thank you!
Research Efforts:
- Float 3 Divs - The z-axis property wasn't relevant to my layout as none of my divs overlap.
- 3 Divs LTR - This discussed aligning 3 divs horizontally, not vertically like I needed. Similar methods didn't work for vertical alignment.
- 3 Divs LTR #2 - Tried the flex method mentioned here but it was still not sufficient for my case.
- Vertical Align etc - Attempted this approach with no success either.
- (5...1000) Explored various Google search results using queries like "ReactJS vertical 3 divs" but couldn't find the right solution.
The Challenge:
I'm attempting to create a simple mockup web page layout consisting of 3 div elements:
- Header Div - Positioned at the top, non-sticky (doesn't stay visible when scrolling).
- Content Div - Positioned in the middle, scrollable both vertically and horizontally.
- Bottom Nav Div - Located at the bottom, sticky (remains fixed position during scrolling).
Mockup Design:
https://i.sstatic.net/ooI8t.png
Current Issues:
- Struggling to make the bottom menu div appear properly; it seems to get stuck under the frame.
- Uncertain if the bottom menu div is actually sticking to the bottom due to the previous issue.
- The content tab div has no margin from the header div, causing readability issues at the top end of the text inside it.
https://i.sstatic.net/gdA6M.png
My Code Attempt:
After numerous attempts, this code snippet represents the closest version I have achieved for this seemingly simple task:
App.jsx
import React from "react";
import BottomMenu from "../BottomMenu/BottomMenu";
import Header from "../Header/Header";
import ContentTab from "../ContentTab/ContentTab";
const App = () => {
return (
<div style = {{display: "flex", flexDirection: "column", overflow: "visible",
direction: "rtl"}}>
<Header/>
<ContentTab />
<BottomMenu />
</div>
);
};
export default App;
Header.jsx
import React from "react";
import { Toolbar, AppBar } from "@material-ui/core";
import Typography from '@material-ui/core/Typography';
const Header = props => {
return (
<div>
<AppBar color="primary" style={{alignItems: 'center'}}>
<Toolbar>
<Typography>
Test
</Typography>
</Toolbar>
</AppBar>
</div>
);
};
export default Header;
ContentTab.jsx
import React from "react";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
const ContentTab = (props) => {
return (
<div style={{height: "80%", width: "100%"}}>
<Paper align="center" elevation={3}>
<Typography paragraph>First</Typography>
<Typography paragraph>TextTab</Typography>
<Typography paragraph>Last</Typography>
</Paper>
</div>
);
};
export default ContentTab;
BottomMenu.jsx
import React from "react";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import { Toolbar, AppBar } from "@material-ui/core";
export default function BottomMenu() {
const [value, setValue] = React.useState(0);
return (
<div style={{
position: "fixed", bottom: "0", width: "100%", height: "10%"}}>
<AppBar
style={{ background: '#FFFFFF', alignItems: "center" }}
>
<Toolbar>
<BottomNavigation
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</Toolbar>
</AppBar>
</div>
);
}