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;
}

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

How to have dimmed content on Semantic UI React (NextJS)

Im having a problem on implementing dimmed content on semantic ui react sidebar on nextjs...
This is the dimmed content on semantic ui
https://react.semantic-ui.com/modules/sidebar/#states-dimmed
this is my layout code:
import React, { useState } from 'react';
import CartSidebar from './CartSidebar';
import Navbar from './Navbar';
const StoreLayout = ({ children }) => {
const [toggleCart, setToggleCart] = useState(false);
function toggleMenuCart() {
setToggleCart(!toggleCart);
}
return (
<>
<CartSidebar toggleMenu={toggleCart} />
<Navbar onToggleMenuCart={toggleMenuCart} />
{children}
</>
);
};
export default StoreLayout;
this is my navbar code:
<nav>
<div className="borderLeftList">
<li className="cart">
<Button
onClick={props.onToggleMenuCart}
className="cart-icon empty"
/>
</li>
</div>
</nav>
this is my sidebar code:
import React, { useState } from 'react';
import cn from 'classnames';
import { Icon, Menu } from 'semantic-ui-react';
import Link from 'next/link';
export default function CartSidebar(props) {
const classes = cn(
'ui',
'sidebar',
'push',
'right',
'inverted',
'menu',
'vertical',
'animating',
{ visible: props.toggleMenu }
);
return (
<div className={classes}>
<Menu.Item as={Link} href="/admin">
<a>
<i className="fa fa-home" />
Dashboard
</a>
</Menu.Item>
<Menu.Item as={Link} href="/admin/orders">
Second Menu
</Menu.Item>
<Menu.Item as={Link} href="/admin/products">
Third Menu
</Menu.Item>
</div>
);
}
this is my _app.js code:
<StoreLayout>
<Component {...pageProps} />
</StoreLayout>
if you need any more details you can ask on the comment... Thank you so much in advance!!! :)

The documentation shows it will dim all of its children:
<Dimmer active={true} page>
<ChildComponent/>
</Dimmer>
Which will then dim the child component. Along with that you can also specify properties like "page" to tell it to dim the whole page.
If you're trying to use it with sidebar, then you have to wrap the content for sidebar in a dimmer.
const Page = () => {
const [active, setActive] = useState(false)
return <div>
<Sidebar setActive={setActive}/>
<Dimmer active={active} page> // this is a child
<Content/>
</Dimmer>
</div>
}
Then in the sidebar you'll have to set the active when you click an item or whatever. This example isn't perfect, just gives you a rough idea of what you can do.
Alternatively:
.dimmed {
background: black;
opacity: 0.5;
}
You can also just do it yourself and apply a class with opacity to whatever needs to be dimmed.

CREDITS ON #Matriarx for giving me idea on how to answer his question...
You have to import the Dimmer on sematic-ui-react and then parent the child using this code:
<Dimmer.Dimmable dimmed={toggleCart}>
<Dimmer
className="dimmedContent"
active={toggleCart}
onClickOutside={handleHide}
/>
put this on your css so that you can give yourself a style, without this css you cant make the dimmed fullscreen
.dimmedContent {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0, 0, 0, 0.25) !important;
cursor: default !important;
z-index: 8 !important;
}
this is the full code:
import React, { useState } from 'react';
import { Dimmer } from 'semantic-ui-react';
import CartSidebar from './CartSidebar';
import Navbar from './Navbar';
const StoreLayout = ({ children }) => {
const [toggleCart, setToggleCart] = useState(false);
function toggleMenuCart() {
setToggleCart(!toggleCart);
}
const handleHide = () => {
setToggleCart({ active: false });
};
return (
<>
<Dimmer.Dimmable dimmed={toggleCart}>
<Dimmer
className="dimmedContent"
active={toggleCart}
onClickOutside={handleHide}
/>
<CartSidebar toggleMenu={toggleCart} />
<Navbar onToggleMenuCart={toggleMenuCart} />
{children}
</Dimmer.Dimmable>
</>
);
};
export default StoreLayout;
also dont forget to put the css that i provided above :)
Cheers!

how to change text color on scroll in react.js

Hi I'm having some issue regarding changing text color on scroll in react.js i'm not sure what i'm missing here but simply put the H4 text in default is white in color and should change to black if on scroll
import React, {useState, useEffect} from 'react';
import './Navbar.css';
import {Navbar, Container, Nav} from 'react-bootstrap';
const Navigation = () =>{
const [navbar, setNavbar] = useState(false);
const [white, setColor] = useState(false);
const changeBackground = () => {
if(window.scrollY >= 80){
setNavbar(true)
}else{
setNavbar(false)
}
}
const changeColor = () => {
if(window.scrollY >= 80){
setColor(true)
}else{
setColor(false)
}
}
window.addEventListener('scroll',changeBackground);
window.addEventListener('black',changeColor);
return(
<Navbar className={navbar ? 'scroll' : 'navbar'} expand="lg">
<Container>
<Navbar.Brand href="#home"><h4 className={white ? 'black' : 'white'}>Brand</h4></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#projects">Tab1</Nav.Link>
<Nav.Link href="#blog">Tab2</Nav.Link>
</Nav>
</Navbar.Collapse>
<Navbar.Collapse className="justify-content-end">
<Nav>
<Nav.Link href="#contact">Tab3</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
};
export default Navigation;
Here's the css file
.navbar {
width: 100%;
background-color: transparent;
display: flex;
position: fixed;
top: 0;
min-height:6vh;
justify-content: space-between;
transition: background-color 0.4s ease-out;
flex-direction: row;
}
.black {
color: #000000;
}
.white {
color: #FFFFFF;
}
.scroll {
background-color: #FFFFFF;
}
How can i be able to properly execute this? or am i really missing something else?

I updated your code as follows. If we registered the functions on every render, it will affect the memory leaking.
So I inserted the appending event listener into the useEffect without dependencies(it is the same case component Didmount and componentWillUnmount)
In my opinion, the most important updated part from above code the event black can't be understandable so I added the function scroll event.
import React, { useEffect, useState } from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';
import './Navigation.css';
const Navigation = () => {
const [navbar, setNavbar] = useState(false);
const [color, setColor] = useState(false);
const changeBackground = () => {
if (window.scrollY >= 80) {
setNavbar(true);
setColor('black');
} else {
setNavbar(false);
setColor('white');
}
};
useEffect(() => {
window.addEventListener('scroll', changeBackground, true);
return () => window.removeEventListener('scroll', changeBackground);
}, []);
return (
<Navbar
className={navbar ? 'scroll' : 'navbar'}
expand='lg'
style={{
position: 'fixed',
backgroundColor: 'white',
}}
>
<Container>
<Navbar.Brand href='#home'>
<h4 className={color}>Brand</h4>
</Navbar.Brand>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='me-auto'>
<Nav.Link href='#projects'>Tab1</Nav.Link>
<Nav.Link href='#blog'>Tab2</Nav.Link>
</Nav>
</Navbar.Collapse>
<Navbar.Collapse className='justify-content-end'>
<Nav>
<Nav.Link href='#contact'>Tab3</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
export default Navigation;
The screenshot
https://i.imgur.com/n3fPYgE.png
https://i.imgur.com/X1ycdky.png

Your event listener that is supposed to change color is attached to the wrong event. It should be attached to scroll event.
window.addEventListener('black',changeColor); // incorrect event name 'black'
// Change to
window.addEventListener('scroll',changeColor);

React js- bootstrap Value not showing on Tab change

I am making a React App. I am using react-bootstrap to make it.But while trying to show content on different nav items by using the Tab.Content and Tab.Pane , the value shows in the default nav correctly on page refresh but if I go to the other nav item , the content does not show up and the content of the default value also gets blank.If i again refresh the page the value on the default nav item shows up and then the same thing happen. Please help me.
Error lies in between line 22 to line 29.
import React, { useState } from 'react';
import { Tab, Nav } from 'react-bootstrap'
import Conversations from './Conversations'
import Contacts from './Contacts'
const Sidebar = (props) => {
const [activeKey, setActiveKey] = useState('conversations')
return (
<div style={{ width: '250px' }} className='d-flex flex-column' >
<Tab.Container activeKey={activeKey} onSelect={() => setActiveKey(null)} >
<Nav variant='tabs' className='justify-content-center mt-1' >
<Nav.Item>
<Nav.Link eventKey='conversations' >Conversations</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey='contacts' >Contacts</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content >
<Tab.Pane eventKey='conversations' >
<Conversations />
</Tab.Pane>
<Tab.Pane eventKey='contacts' >
<Contacts />
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</div>
)
}

Based on https://react-bootstrap.github.io/components/tabs/#tabs-controlled , I suspect that:
onSelect={() => setActiveKey(null)}
should be:
onSelect={(key) => setActiveKey(key)}
Edit: I've tried this change out locally now and it appears to work.