I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in moving it to the correct position next to the logo in the top right corner.
Below is the code for my search function:
function Navbar() {
const [inputText, setInputText] = useState("");
let inputHandler = (e) => {
//convert input text to lower case
var lowerCase = e.target.value.toLowerCase();
setInputText(lowerCase);
};
return (
<div className="navbar">
<div className="logo">Shop</div>
<div className="searchBox">
<Product input={inputText} />
<TextField
id="outlined-basic"
onChange={inputHandler}
variant="outlined"
label="Search"
></TextField>
</div>
</div>
);
}
export default Navbar;
Here is the CSS code for styling this component:
.navbar {
width: 100%;
height: 50px;
background-color: rgb(32, 32, 32);
.logo {
color: aqua;
font-size: 1.8rem;
font-family: "Orbitron", sans-serif;
line-height: 40px;
margin-left: 20px;
}
.searchBox {
color: aqua;
font-size: 1.8rem;
height: 1%;
width: 100%;
font-family: "Orbitron", sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
}
}