I have the following code in HTML that I would like to integrate into react but not sure really how to do it.
I think it is a basic error. I may be even going about it all wrong
I want the functionality from the following HTML in my react APP. Its a nice responsive menu with a burger bar that expands to a mobile menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!--Import Google Icon Font-->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<!-- Compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<title>GRID</title>
</head>
<body>
<nav class="nav-wrapper indigo">
<div class="container">
<a href="#" class="brand-logo">Site Title</a>
<a href="#" class="sidenav-trigger" data-target="mobile-links">
<i class="material-icons" onClick="displayMobileMenu">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script
$(document).ready(function(){
$('.sidenav').sidenav();
});></script>
</body>
</html>
BELOW IS WHAT I HAVE TRIED I have installed the dependencies
My issue is I am not really sure if I should use the jquery or write something new maybe with componentDidMount()
below is the react code codesanbox.io is here https://codesandbox.io/embed/wiki-mogpb?fontsize=14
import React from "react";
import { Link } from "react-router-dom";
import $ from "jquery";
const displayMobileMenu = () => {
return (
$('.sidenav').sidenav()
)
};
const Navbar = ({ title }) => {
return (
<div>
<nav className="nav-wrapper indigo">
<div className="container">
<a href="#" className="brand-logo">
React Wiki
</a>
<a href="#" className="sidenav-trigger" data-target="mobile-links">
<i
className="material-icons"
onClick={displayMobileMenu()}
>
menu
</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/files">React Files</Link>
</li>
<li>
<Link to="/context">Contexts</Link>
</li>
<li>
<Link to="/questions">Questions</Link>
</li>
</ul>
</div>
</nav>
<ul className="sidenav" id="mobile-links">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
);
};
Navbar.defaultProps = {
title: " React Wiki"
};
export default Navbar;
Here is a simple example project of the navbar in react.js
Navbar.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { FaAlignRight } from "react-icons/fa";
/*--------------- css ----------------*/
import './Navbar.css';
export default class Navbar extends Component {
state = {
isOpen: false
};
handleToggle = () => {
this.setState({ isOpen: !this.state.isOpen });
};
render() {
return (
<nav className="navbar">
<div className="nav-center">
<div className="nav-header">
<Link to="/" className='logo'>
rao
</Link>
<button
type="button"
className="nav-btn"
onClick={this.handleToggle}
>
<FaAlignRight className="nav-icon" />
</button>
</div>
<ul
className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}
onClick={this.handleToggle}
>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/services">Services</Link>
</li>
<li>
<Link to="/aboutus">About Us</Link>
</li>
<li>
<Link to="/products">Products</Link>
</li>
<li>
<Link to="/portfolio">Portfolio</Link>
</li>
<li>
<Link to="/clientele">Clientele</Link>
</li>
</ul>
</div>
</nav>
);
}
}
/* Navbar.css */
.navbar {
top: 0;
left: 0;
width: 100%;
background: var(--offWhite);
z-index: 1;
}
.nav-header {
display: flex;
justify-content: space-between;
}
.nav-header .logo{
color: darkblue;
text-decoration: none;
font-size: 50px;
font-family: 'Courier New', Courier, monospace;
}
.nav-btn {
background: transparent;
border: none;
cursor: pointer;
outline: none;
padding-right: 20px;
}
.nav-icon {
font-size: 1.5rem;
color: var(--primaryColor);
}
.nav-links {
height: 0;
overflow: hidden;
transition: var(--mainTransition);
list-style-type: none;
padding: 0px;
right: 0px;
transition: height 1s;
}
.nav-links a {
display: block;
text-decoration: none;
padding: 1rem 0;
color: var(--mainBlack);
transition: var(--mainTransition);
text-align: center;
font-size: 1rem;
font-weight: 600;
letter-spacing: var(--mainSpacing);
}
.nav-links a:hover {
color: var(--primaryColor);
}
.show-nav {
height: 300px;
transition: height 1s;
}
@media screen and (min-width: 768px) {
.nav-btn {
display: none;
}
.nav-center {
max-width: 1400px;
margin: 0 auto;
display: flex;
}
.nav-links {
height: auto;
display: flex;
margin-right: 8rem;
position: absolute;
right: 0px;
}
.nav-links a {
margin: 0 1rem;
padding: 0.5rem 0;
}
}
/* end of navbar */
routes.js
/**
* Routes : returns routes of our application for router
*/
import React from 'react';
import { Route , Switch } from 'react-router-dom';
/****************** Components ******************/
import AboutUs from './Components/AboutUs/aboutus';
import Careers from './Components/Careers/careers';
import ContactUs from './Components/ContactUs/contactus';
import Services from './Components/Services/services';
import Products from './Components/Products/products';
import Portfolio from './Components/Portfolio/Portfolio';
import Clientele from './Components/Clientele/Clientele';
import Home from './Components/Home/home';
import FourOFour from './Components/FourOFour/fourofour';
const Routes = () => {
return (
<Switch>
<Route path="/aboutus" exact component={AboutUs}/>
<Route path="/careers" exact component={Careers}/>
<Route path="/contactus" exact component={ContactUs}/>
<Route path="/services" exact component={Services}/>
<Route path="/products" exact component={Products}/>
<Route path="/portfolio" exact component={Portfolio}/>
<Route path="/clientele" exact component={Clientele}/>
<Route path="/" exact component={Home}/>
<Route component={FourOFour}/>
</Switch>
)
}
export default Routes;