i have simple react with redux app which uses bootstrap for only navbar but remaining website uses material-ui . i have to depend on bootstrap for only navbar because i could not find responsive navbar in material-ui documentation or any other resourse .so i used bootstrap cdn and used given below component which works fine .but its font size is small and text color is not so highlighted. more over background color for dropdown is also not so nice.
Moreover, i did not used style.css for styling because material-ui theme does not work together rather cssbaseline is used in material-ui. therefore i need material-ui working navbar component with dropdown and responsive toggle button .
so i want material-ui navbar with similar functionality .however ,if anyone can change this component in bootstrap with inline styling to make it fancy, it will be grateful.
here is MyNavbar.js component:
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
} from "react-router-dom";
import { Navbar,Nav,NavDropdown,Form,FormControl,Button } from 'react-bootstrap'
import NeedForm from '../NeedForm';
import NewTutorForm from '../NewTutorForm';
class MyNavbar extends React.Component{
render(){
return(
<div>
<div className="row">
<div className="col-md-12">
<Navbar bg="primary" variant="dark" expand="lg">
<Navbar.Brand href="/">smart college</Navbar.Brand>
<img
src="src\assets\images\logo.svg"
width="30"
height="30"
className="d-inline-block align-top"
alt=" "></img>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/NeedForm">Hire a Tutor</Nav.Link>
<Nav.Link href="/NewTutorForm">Become Tutor</Nav.Link>
<NavDropdown bg="primary" title="Student Corner" id="basic-nav-dropdown">
<NavDropdown.Item href="courses"> courses</NavDropdown.Item>
<NavDropdown.Item href="Tutors">Tutors</NavDropdown.Item>
<NavDropdown.Item href="NeedForm">Hire a Tutor</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="LMS">My LMS</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Teacher's Corner" id="basic-nav-dropdown">
<NavDropdown.Item href="Needs">students Requests</NavDropdown.Item>
<NavDropdown.Item href="TutorDashBoard">Tutor DashBoard</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</div>
</div>
)
}
}
export default MyNavbar;
here is screenshot of navbar:
