We Keep Coding

React underline react-bootstrap NavItem when scrolling down

I am trying to make a webpage where I have a react-bootstrap navbar with a few Nav items. I want to scroll through the page so that when I go to a new section, that particular NavItem is underlined or when I click on that NavItem, it automatically scrolls me through to that item.
I tried looking online and found react-scroll but do not know how to link it to my react-bootstrap code.
This is my Navbar Component
export const NavbarComponent = () => {
return (
<>
<Navbar collapseOnSelect className="style-navbar">
<Container>
<Navbar.Brand className="style-navbrand" href="/">
<div class="inl">LOGO</div>
<div className="style-subheading"Subheading</div>
</Navbar.Brand>
<Nav className="style-nav">
<Nav.Item className="style-navitem">
<Nav.Link className="style-navlink" href="/home">ABOUT</Nav.Link>
</Nav.Item>
<Nav.Item className="style-navitem">
<Nav.Link className="style-navlink" href="/members">MEMBERS</Nav.Link>
</Nav.Item>
<Nav.Item className="style-navitem">
<Nav.Link className="style-navlink" href="/pricing">Pricing</Nav.Link>
</Nav.Item>
</Nav>
<Nav>
<Nav.Link id="style-navlink" href="/contact">CONTACT</Nav.Link>
</Nav>
</Container>
</Navbar>
</>
This is my App.js
return (
<div className="style-background">
<div className = "style-backg-sheet">
<NavbarComponent/>
<AboutComponent/>
<MemberComponent/>
<PricingComponent/>
</div>
</div>
);
}
AboutComponent
import React from 'react'
import {Container} from 'react-bootstrap';
const About = () => {
return (
<div>
<Container>
<h1>About</h1>
<p>Some text</p>
</Container>
</div>
)
}
export default About
I basically wanted to have different sections as above on one page where if I click on a particular navbar item, it underlines that item and scrolls me down to it (if I click on Pricing, it scrolls me down to the pricing section which has a bit of text and pictures).

If all you want, at-a-minimum, is for the links to navigate to a specific section and underline the active menu item then I suggest the following:
Assign an id attribute to each "section" you care to link to.
const About = () => {
return (
<div className="section" id="about"> // <-- add id for each section
<Container>
<h1>About</h1>
<p>Some text</p>
</Container>
</div>
);
};
Use a hashlink in the nav items
<Nav.Link className="style-navlink" href="#about">
About
</Nav.Link>
Add the CSS to style the active menu item link
a.style-navlink.active {
color: #000;
font-weight: bold;
text-decoration: underline;
}
This will scroll the sections into view so long as everything is rendered inline as a single continuous document. What I see when trying to make the navbar "sticky" or "fixed" to the top so it doesn't scroll with the content, the rest of the content needs to be placed in a scrollable container and the default "scrolling-to" behavior breaks. You can fix this with third-party libraries. In this next section I chose react-router-hash-link to create hashlinks that have control over how content is scrolled to.
import { NavHashLink } from "react-router-hash-link";
...
<Nav.Link
activeClassName="active-link" // <-- define active classname
as={NavHashLink} // <-- render NavHashLink component
className="style-navlink"
smooth // <-- smooth scrolling
to="#about"
>
About
</Nav.Link>
...
.active-link {
color: #000;
font-weight: bold;
text-decoration: underline;
}

Cannot get navbar to function on collapse using react-bootstrap

I'm using react-bootstrap to create a responsive navbar and for some reason it will not work. I've tried using react-router-dom to handle page change and creating a function withing the navbar to handle page change to see if that was the issue. The hamburger icon is not even rendering just a gray blank square.
This is my current code
And here is what it renders
What else can I try?
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar'
import '../css/Navbar.css'
export default function NavbarRender({ currentPage, handlePageChange }){
return(
<Navbar collapseOnSelect expand='sm' id='total-nav'>
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#about" onClick={() => handlePageChange('About')}
className={currentPage === 'About' ? 'nav-link active' : 'nav-link'} id="navbar">
About
</Nav.Link>
<Nav.Link href="#portfolio" onClick={() => handlePageChange('Portfolio')}
className={currentPage === 'Portfolio' ? 'nav-link active' : 'nav-link'} id="navbar">
Portfolio
</Nav.Link>
<Nav.Link href="#resume" onClick={() => handlePageChange('Resume')}
className={currentPage === 'Resume' ? 'nav-link active' : 'nav-link'} id="navbar">
Resume
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}

I have that problem when forget to import react-boostrap CSS
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';

Login page and NavBar formatted with Reactstrap (Vertical and with custom background and text color)

I'm trying to make a login page , which would let me access me to the main site with displays a NavBar. I'm using ReactStrap, and I can't find the way of making the NavBar vertical instead of horizontal, neither setting the background and text colours and images. I could achieve to make a conditional rendering (to let administrator users to access some funcionalities like adding products, other users, and make puchrases, while sellers users are only allowed to make sales and view the sales registers).
Here's my code:
App.js:
import React from 'react';
import "./bootstrap.app.css";
import { BrowserRouter as Router, Route} from "react-router-dom";
import Example from "./componentes/navbar.componente"
import RegistroVentas from "./componentes/registro-ventas.componente";
import EditarVenta from "./componentes/editar-venta.componente";
import VenderProducto from "./componentes/realizar-venta.componente";
import NuevoUsuario from "./componentes/nuevo-usuario.componente";
import NuevoProducto from "./componentes/nuevo-producto.componente";
import ComprarProducto from "./componentes/realizar-compra.componente";
function App() {
return (
<Router>
<div className="container">
<Example />
<br/>
<Route path="/" exact component={RegistroVentas} />
<Route path="/registroVentas" component={RegistroVentas} />
<Route path="/editar/:id" component={EditarVenta} />
<Route path="/venta" component={VenderProducto} />
<Route path="/nuevoUsuario" component={NuevoUsuario} />
<Route path="/nuevoProducto" component={NuevoProducto} />
<Route path="/compra" component={ComprarProducto} />
</div>
</Router>
);
}
export default App;
navbar.js:
import React from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
Badge,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem } from 'reactstrap';
//import FontAwesome from '#fortawesome/react-fontawesome';
//import 'Ventas' from './ventas-cod'
class Ventas extends React.Component {
render() {
return(
<NavItem>
<NavLink href="/venta">
<Badge pill color="dark">Venta</Badge>
</NavLink>
</NavItem>
);
}
}
class Compra extends React.Component {
render() {
return(
<NavItem>
<NavLink href="/compra">
<Badge pill color="dark">Compra</Badge>
</NavLink>
</NavItem>
);
}
}
class Altas extends React.Component {
render () {
return(
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
<Badge pill color="dark">Altas</Badge>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<NavLink href="/nuevoUsuario">
<Badge pill color="dark">Usuario</Badge>
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink href="/nuevoProducto">
<Badge pill color="dark">Producto</Badge>
</NavLink>
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
);
}
}
export default class Example extends React.Component {
constructor(props) {
super(props);
this.tipoUsuario='administrador';
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="green" expand="lg">
<NavbarBrand href="/">Supermercado Caplan</NavbarBrand>
<NavbarToggler vertical className="d-flex" onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="d-flex ml-auto" >
<Ventas />
{this.tipoUsuario=='administrador' ?
<Compra /> : <a></a>
}
{this.tipoUsuario=='administrador' ?
<Altas /> : <a></a>
}
</Nav>
</Collapse>
</Navbar>
</div>lt
);
}
}
Here's what I'm getting:
Here's something I would like to get:
Does anyone have an idea of what should I do?
Thank's a lot!

In Reactstrap, there's no such a thing like a native component called Sidebar.
However, it's possible to download a template with a sidebar implemented, and then wrap the whole application into it.
For the login cuestion, there's a lot of examples on the web. While all of them should work correctly if implemented properly, I've chosen one of the simplest I found, which works fine for the kind of project I'm doing. However, while it allows me to login with my credentials into a local deployment, it isn't probably the best solution for an application deployed into a web service, since the security of the system it's not just a big deal for an app which is running into a local machine, just written for academic purposes.
So then, here's the template I've found for the Reactstrap sidebar and the login method in which I've based on to implement in my app, and also my app with both things implemented.
Sidebar template:
https://codesandbox.io/s/5ku6t
Login method used:
https://contactmentor.com/login-form-react-js-code/
App with login and sidebar implemented:
https://gitlab.com/leandrocaplan/supermercado-caplan-final-programacion-iii-inspt-utn
(See the frontend folder to see the implementation)
Notice that in my app, the way I've found to format the sidebar, and also the topbar, is creating my own CSS classes, and apply them into the sidebar and topbar components. These classes are found in the App.css file at the correspondent frontend directory.

ReactJS: click interaction not working on my content but working on header

Goal : display an iframe with a Youtube video and the user can click play/pause
Problem: I can't click on anything in my main content, but it works just fine if I put it in the Navigation component or the Footer component
What I've tried: I tried many debugging to finally found this was the issue, but now I can't figure out what to do
Here is the code of the Navigation component which works fine :
import React, { useState } from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Container from "react-bootstrap/Container";
import { Link } from "react-router-dom";
import {NavLink} from "react-router-dom";
import {
AiOutlineHome,
} from "react-icons/ai";
import {Button} from "react-bootstrap";
function Navigation() {
const [expand, updateExpanded] = useState(false);
const [navColour, updateNavbar] = useState(false);
function scrollHandler() {
if (window.scrollY >= 20) {
updateNavbar(true);
} else {
updateNavbar(false);
}
}
window.addEventListener("scroll", scrollHandler);
return (
<Navbar
expanded={expand}
fixed="top"
expand="md"
className={navColour ? "sticky" : "navbar"}
>
<Container>
<Navbar.Brand href="/" className="d-flex">
<p style={{marginTop: "15px"}}><strong className="main-name"> D</strong>egen <strong className="main-name">B</strong>ounty <strong className="main-name">H</strong>unter</p>
</Navbar.Brand>
<Navbar.Toggle
aria-controls="responsive-navbar-nav"
onClick={() => {
updateExpanded(expand ? false : "expanded");
}}
>
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ms-auto" defaultActiveKey="#home">
<Nav.Item>
<Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
<AiOutlineHome style={{ marginBottom: "2px" }} /> Home
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default Navigation;
Here is the code of the Whitepaper component which doesn't allow me to click on anything :
import React from "react";
import {Container, Row, Col} from "react-bootstrap";
import wp_1 from "../Assets/wp_1.png";
function Whitepaper() {
return (<section>
<Container fluid className="whitepaper-section" id="whitepaper">
<Container className="whitepaper-content">
<div>
<button onClick={() => alert("test")}>Add</button>
<iframe
src="https://www.youtube.com/embed/E7wJTI-1dvQ"
frameBorder="0"
allow="autoplay; encrypted-media"
allowFullScreen
title="video"
/>
{" "}
</div>
<Row>
<Col md={12}>
<img src={wp_1} alt="roadmap pic" className="img-fluid" style={{maxWidth: '50%'}}/>
</Col>
</Row>
</Container>
</Container>
</section>);
}
export default Whitepaper;
So once again, when I pass my cursor over the button or the iframe, the cursor shape doesn't change and I can't click. I can select text, select image and right click everywhere.
In the CSS file I looked for pointer-events: none; but I don't have anything like this
What is happening ?

The problem was in the css file I had :
z-index: -1;
Removed this line and it's working fine now

pure javascript way to bootstrap navbar dropdown

So I am trying to make the dropdown in the below code work with javascript as I noticed that the CSS code will only trigger the dropdown after a user first clicks on the dropdown. after that, it will let the css hover code work as per normal.
So needing a Javascript way to get this drop down to work.
import React, { useState } from "react";
import {Nav, Navbar, NavDropdown, ButtonToolbar, Button } from "react-bootstrap";
import { withRouter } from "react-router";
import '../App.css';
const Header = props => {
const { location } = props;
function changeBackground(e) {
e.target.children('[data-toggle="dropdown"]').click();
}
return (
<Navbar bg="transparent" variant="dark" expand="lg">
<Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto" activeKey={location.pathname}>
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/advertisers">Advertisers</Nav.Link>
<NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
onMouseOver={changeBackground}>
<NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="/case-studies">Case Studies</Nav.Link>
<ButtonToolbar>
<Button href="/contact" variant="success" size="lg" className="button-round">
Contact Us
</Button>
</ButtonToolbar>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
const HeaderWithRouter = withRouter(Header);
export default HeaderWithRouter;

Opening the dropdown menu by hovering is not supported in React Bootstrap (here is an explanation: https://github.com/react-bootstrap/react-bootstrap/issues/4042).
If you'd like to achieve that you have to use the classic dropdown menu (implemented using NavItem so it works the same as the usual NavDropdown). You should be able to use the show property of Dropdown.Menu - but that doesn't seem to work perfectly either so I had to improvise a bit (hiding/removing the dropdown.menu based on state).
Here is a working example using Dropdown.Menu instead of NavDropdown (but with the same properties): https://codesandbox.io/s/falling-cookies-10joi
The main code difference is, as I explained above, using the Dropdown component instead of NavDropdown to be able to use the show property:
<Dropdown as={NavItem} alignRight onMouseLeave={closeMenu}>
<Dropdown.Toggle
id="basic-nav-dropdown"
as={NavLink}
onMouseEnter={openMenu}
>
Publishers
</Dropdown.Toggle>
{menuOpen && (
<Dropdown.Menu show={true}>
<NavDropdown.Item href="/publishers/radio">
Radio Stations
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">
Audio Podcasters
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">
Video Podcasters
</NavDropdown.Item>
</Dropdown.Menu>
)}
</Dropdown>

We need to change our changeBackground function like this, to auto click the dropdown button on onMouseOver event:
changeBackground = (e) => {
e.target.click();
};
This will click the dropdown button and open the dropdown menu.
Please let me know if you need further information.