My goal is to align the items in my navbar similar to this layout (replacing 'Buy on App Store' with a Search Box):
https://i.sstatic.net/4NOhU.png
I'm drawing inspiration from this material-ui component: https://material-ui.com/components/app-bar/#SearchAppBar.js
However, my current issue is that all of my items are clustered to the left instead of being aligned sensibly:
https://i.sstatic.net/sbgdN.png
How can I achieve proper alignment for my items? Could it be something inherited by my component? It directly imports into App.js without any parent components.
Below is my code snippet:
import React from 'react';
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
import InputBase from '@material-ui/core/InputBase';
import { fade, makeStyles } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
const useStyles = makeStyles(theme => ({
// Styles removed for brevity
}));
const Navbar = (props) => {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" noWrap>
MyApp
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ 'aria-label': 'search' }}
/>
</div>
</Toolbar>
</AppBar>
</div>
)
}
edit:
After removing { links }, as suggested in a comment, I still face the same alignment issue:
https://i.sstatic.net/GycI4.png
edit2:
Interestingly, removing the <Link> elements resolves the misplacement of my search box. Is there a reason behind this behavior? My challenge now is ensuring that the element directs users to the home page when clicking on the title.