So, I have a react.js app built with a group. Our Navbar works, but when the Navbar is toggled from a smaller screen using the Hamburger menu, it will open, but the toggle doesn't work to close it, it stays stuck open. I didn't program this page, but I've been trying to debug why it won't close, and for what I can see, it should work.
Yes, I know react.bootstrap is a thing, and I was thinking about converting it, but I'm on a deadline and don't want to rewrite this entire component from scratch if it is at all possible. Any thoughts, or suggestions. I thought it was likely in the toggleNav function, but from what I've tested it seems to be correct.
import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./style.css";
class Nav extends Component {
state = {
open: false,
width: window.innerWidth,
};
updateWidth = () => {
const newState = { width: window.innerWidth };
if (this.state.open && newState.width > 991) {
newState.open = false;
}
this.setState(newState);
};
toggleNav = () => {
this.setState({ open: !this.state.open });
};
setActiveNavItem = (path) => {
return window.location.pathname === path ? "nav-link active" : "nav-link";
};
componentDidMount() {
window.addEventListener("resize", this.updateWidth);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateWidth);
}
render() {
return (
<nav className="navbar navbar-expand-lg navbar-light">
<Link className="navbar-brand" to="/">
Seenit
</Link>
<button
onClick={this.toggleNav}
className="navbar-toggler"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div
className={`${this.state.open ? "" : "collapse "}navbar-collapse`}
id="navbarNav"
>
{/* Navbar items */}
<ul className="navbar-nav">
<li className="nav-item">
<Link
onClick={this.toggleNav}
className={this.setActiveNavItem("/")}
to="/"
>
Home
</Link>
</li>
<li className="nav-item">
<Link
onClick={this.toggleNav}
className={this.setActiveNavItem("/create-post")}
to="/create-post"
>
Create a Post
</Link>
</li>
<li className="nav-item">
<Link
onClick={this.toggleNav}
className={this.setActiveNavItem("/log-in")}
to="/log-in"
>
Log In
</Link>
</li>
<li className="nav-item">
<Link
onClick={this.toggleNav}
className={this.setActiveNavItem("/sign-up")}
to="/sign-up"
>
Sign Up
</Link>
</li>
</ul>
</div>
</nav>
);
}
}
export default Nav;
This React component is a direct implementation of the Bootstrap Toggler Navbar.
Unfortunately, this component also contains code that modifies the navbar, which almost certainly breaks the Bootstrap code that controls collapsible navbars.
Here is the pure HTML version of this navbar component. Note that it collapses to a hamburger on narrow screens (as desired).
It should be straightforward to remove from this component the code that modifies the Bootstrap Toggler navbar.
.navbar {
outline: 1px solid #ddd;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<body class="p-2">
<nav class="navbar navbar-expand-lg navbar-light mr-5">
<a class="navbar-brand" href="#">Seenit</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Create a Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<!-- JS required for Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
Related
I'm using bootstrap version 4 and added in a Navbar but it came out looking like this and I am not sure why. I pasted the needed links and double checked however I still can't find the problem. I'm also new to using bootstrap so I would be grateful if anyone can help me.
A screenshot of how it is looking
Here's my code:
This is _document.js
import Document , {Html, Head, Main, NextScript} from 'next/document'
class MyDocument extends Document
{
render()
{
return (
<Html lang="en">
<head>
<meta name="Online shop" content="Online shop web app" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></link>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument;
This is Navbar.js
import React from 'react'
import Link from 'next/link'
const Navbar = () => {
return (<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>)
}
export default Navbar;
I can't find where I went wrong.
The menu in the mobile version opens and works, but after clicking on the menu item the navbar does not collapse... I got the css, js and navbar from the bootstrap site:
Where is the problem?
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
Add this inside your tags. What it'll do is, trigger a click event on the hamburger button, which will cause the menu to collapse.
<script>
jQuery(document).ready(function($) {
$('.navbar-nav li a').on("click", function() {
console.log("menu clicked");
$('button.navbar-toggler').click();
});
});
</script>
I'm new to Js and React, trying to make my way into this framework.
My problem is in this component, it is saying it returns nothing or return statement is missing, but i have declared my return statement as shown bellow.
const navbar = () => {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="#">Navbar</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<a className="nav-link active" aria-current="page" href="#">Home</a>
<a className="nav-link" href="#">Features</a>
<a className="nav-link" href="#">Pricing</a>
<a className="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
)
}
export default navbar
After some time redoing my steps and looking into my files I've notice 2 Nav.js
1 in my containers and 1 in my components.
I was eddint my Nav.js on containers but importing from components. That was my problem, after that I've edited the right file and used as mentioned by Kevin and Jayce, NavBar and it renders.
rookie mistake...
I have a problem with my navbar: I create my js element and copy and paste te code form bootswatch in the render() element. Now I can see the navbar but it doesn't expand in any way. I install bootswatch, bootstrap, react-bootstrap in my code; improt the css file in the app.js file, but no sin of life. And in the same way the highlighted current link opened doesn't seems to move when I change page. I'm working on this language for the first time for a university project, so I'm scared it can create me some problem in the future.
Here's the code:
import React, { Component } from 'react';
export default class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-primary">
<a className="navbar-brand" href="/">Fastbook</a>
<button className="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarColor01">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="/">Home<span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="./Rooms">Prenota</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Diventa Oste</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
)
}
}
I am building a responsive navigation bar in React and when you zoom in to the page it hides the links and shows a button with the drop-down list with the link.
The thing is when I click a button it doesn't do anything and in a bootstrap website, it functions correctly.
Have I done anything wrong?
Here is my code:
import React, { Component } from 'react';
import axios from "axios";
import { Redirect } from "react-router-dom"
import styles from '../styles/loginsignup.css'
import logo from '../img/nowyourguest.png'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'
export default class Login extends Component {
state = {
email: '',
password: ''
};
handleSubmit = event => {
event.preventDefault();
const {email, password} = this.state;
axios({
url: "/authentication/signin",
method: "POST",
data: {
email,
password
}
})
.then(response => {
const isAuthenticated = response.data.isAuthenticated
window.localStorage.setItem('isAuthenticated', isAuthenticated);
this.props.history.push('/profile')
})
.catch(error => {
this.setState({
errorMessage: error.response.data.message
})
})
};
handleChange = event => {
const {name, value} = event.target;
this.setState({
[name]: value
})
}
render() {
const isAuthenticated = window.localStorage.getItem('isAuthenticated');
if (isAuthenticated) {
return <Redirect to='/profile'/>
}
return (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"/>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div className="dropdown-menu" aria-labelledby="navbarDropdown">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<div className="dropdown-divider"/>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/>
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
)
}
}
module.exports = Login;
That button not working because it depends on jQuery, for that you need to install jQuery in your code, but I don't suggest you install jQuery on your code.
For that, you can use react-bootstrap
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon" />
</button>
You need to connect your button click with its handler
Basic usage assuming you use Stateful or Class-based component.
const onClickHandler = (e) =>{
console.log(e);
}
render(){
<button onClick={this.onClickHandler}>Click Me!</button>
}
So I had to import jquery in index.html so this is how I imported it:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
<div id="root"></div>
<!-- Turbo library imports: jQuery, Turbo CDN, sample app.js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script type="text/javascript" src="/dist/js/vendor.min.js"></script>
<script type="text/javascript" src="https://cdn.turbo360-dev.com/dist/turbo.min.js"></script>
<script type="text/javascript" src="/dist/bundle/commons.js"></script>
<script type="text/javascript" src="/dist/bundle/app.js"></script> <!-- React code bundle -->
</body>
</html>