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

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!

Related

Writing a program in react when mouseover on parent element add child element to coressponding parent element

I want to write a program in react jsx when mouseover on an element suppose <li>
<li><a>Pakistan cricket won the match</a></li>
<li><a>We should exercise every day</a></li>
and add these childs elements to coressponding <li> element
<img src='...' />
<p>details of header</p>
<button>add to favorite</button>
When mouseout from an <li> element the coressponding childs should be removed
Note:when mouseover, the childs elements should be workable
So basically you need to have onMouseEnter and onMouseLeave on parent elements
and make a state that holds whether to show the additional data here is a simple example
import "./styles.css";
import {useState} from 'react'
function Children(){
return (
<>
<img src='https://picsum.photos/200/300' />
<p>details of header</p>
<button>add to favorite</button>
</>
)
}
function Parent() {
const [isMouseOver,setIsMouseOver] = useState(false)
const handleEnter = () => {
setIsMouseOver(true)
}
const handleLeave = () => {
setIsMouseOver(false)
}
return(
<div onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
<h1>Hover me</h1>
{isMouseOver ?
<>
<Children />
</>:
null
}
</div>
)
}
export default function App() {
return (
<div className="App">
<Parent />
</div>
);
}
Similarly, you would change the Parent component to your li and the additional data
that should be visible to Children Component.
Note that in this example h1 is a block component so you should leave the whole block to make the data disappear
demo at : https://codesandbox.io/s/silly-dewdney-d8btf?file=/src/App.js:0-738
You can add some class and in its respective CSS, handle the mouseover (:hover).
App.js
import "./styles.css";
function ListItem({i})
{
return (
<li className="listitem">
Link{i}
<img className="hideele" src="" alt={i} />
<p className="hideele">Para{i}</p>
<button className="hideele">Button{i}</button>
</li>
);
}
export default function App() {
return (
<div className="App">
<ul>
<ListItem i={1} />
<ListItem i={2} />
<ListItem i={3} />
</ul>
</div>
);
}
Index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
CSS:
.App {
font-family: sans-serif;
}
.listitem:hover .hideele {
display: block;
}
.hideele {
display: none;
}

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) Sliding/Sticky navbar hidden behind images?

My sliding navbar gets sucked in at the top and when i scroll down it is behind the images.
I want it to be in front of the images like what this website does https://www.w3schools.com/howto/howto_js_navbar_sticky.asp (yes i tried following their code exactly but then i get TypeError: Navbar is null) (So i was trying to code a different version based off of theirs)
my code
Header.js
import React, { Fragment } from 'react'
import { Navbar, Nav } from 'react-bootstrap'
import './Header.scss'
const alwaysOptions = (
<Fragment>
<Nav.Link href="#/" className="btn btn-light">Home</Nav.Link>
<Nav.Link href="#/Anime-list" className="btn btn-warning">Anime List</Nav.Link>
<Nav.Link href="https://notARealSite.com" target='_blank' rel="noopener noreferrer" className="btn btn-danger">Cartoons</Nav.Link>
</Fragment>
)
const Header = ({ user }) => (
<Navbar bg="dark" expand="md" id="navbar">
<Navbar.Brand href="#">
<h3 className="navbarTitle">Anime Stream</h3>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
{ alwaysOptions }
</Nav>
</Navbar.Collapse>
</Navbar>
)
window.onscroll = function () { scrollFunction() }
const scrollFunction = () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById('navbar').style.top = '0'
} else {
document.getElementById('navbar').style.top = '-50px'
}
}
export default Header
Header.scss
#import "~bootstrap/scss/bootstrap";
#navbar {
position: fixed;
top: -50px;
width: 100%;
transition: top 0.3s;
}
output: https://prnt.sc/10vcl0j (the navbar is sucked in at the top of the page)
2nd output (after scrolling down): https://prnt.sc/10vcm7e (the navbar is behind the images)
I suspect that if you look at the CSS attached to those images, you'll find that they have a z-index assigned. Try setting your navbar's z-index higher than theirs.
samuei

image slider doesn't work after using react router

On the front page of my react app I have Materialize css image slider. It works well until I move on to another component using react router. When I go to another component and go back to the home page the images in the slider are gone (every image turns gray), the slide does not work. I have to reload every time to get the pictures back on the slide.
How do I fix this?
here is app.js
import React from "react";
import "./App.css";
import "materialize-css/dist/css/materialize.min.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Navbar from "./components/Layout/Navbar";
import Home from "./components/Home/Home";
import SignUp from "./components/SignUp/SignUp";
const App = () => {
return (
<Router>
<div className="App">
<Navbar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/signup" component={SignUp} />
</Switch>
</div>
</Router>
);
};
export default App;
home.js
import React, { Component } from 'react';
import Slider from './Slider'
class Home extends Component {
state = { }
render() {
return (
<Slider />
);
}
}
export default Home;
Here is the slider
import React from "react";
import SliderImage from "./SliderImage";
import M from "materialize-css";
const Slider = () => {
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".slider");
M.Slider.init(elems, {
indicators: false,
height: 600,
transition: 500,
interval: 6000,
});
});
return (
<div class="slider test">
<ul class="slides">
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-2.jpg"
}
title={"Jewellery"}
description={"Find your perfect jewellery piece to mark your special moment."}
classPosition={"caption center-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-5.jpg"
}
title={"Rings that bind time"}
description={"Here's our small slogan."}
classPosition={"caption left-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-3.jpg"
}
title={"Clasped with class"}
description={"Stylish bracelets that put you in a class of your own."}
classPosition={"caption right-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-6.jpg"
}
title={"Hanging art"}
description={"Pendants that are modern art or spiritual symbols, includes a range of Dhammachackras and Crosses."}
classPosition={"caption center-align"}
/>
</ul>
</div>
);
};
export default Slider;
These are the two different components that I am trying to switch between
<Link to="/">
<li class="brand-logo">RW Jewellery</li>
</Link>
<li>
<Link to="/signup">Sign up</Link>
</li>
Initialize the slider in useEffect hook or in component did mount
import React from "react";
import SliderImage from "./SliderImage";
import M from "materialize-css";
const Slider = () => {
useEffect(() => {
// imitialize slider
var elems = document.querySelectorAll(".slider");
var instances = window.M.FormSelect.init(elems, {
indicators: false,
height: 600,
transition: 500,
interval: 6000,
});
}, []);
return (
<div class="slider test">
<ul class="slides">
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-2.jpg"
}
title={"Jewellery"}
description={
"Find your perfect jewellery piece to mark your special moment."
}
classPosition={"caption center-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-5.jpg"
}
title={"Rings that bind time"}
description={"Here's our small slogan."}
classPosition={"caption left-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-3.jpg"
}
title={"Clasped with class"}
description={"Stylish bracelets that put you in a class of your own."}
classPosition={"caption right-align"}
/>
<SliderImage
image={
"https://raw.githubusercontent.com/Shihara-Dilshan/img/master/ITP/Front-image-6.jpg"
}
title={"Hanging art"}
description={
"Pendants that are modern art or spiritual symbols, includes a range of Dhammachackras and Crosses."
}
classPosition={"caption center-align"}
/>
</ul>
</div>
);
};
export default Slider;

Custom Accordion Component not rendering body elements

I have a collapse/accordion component from Antd that I customized and exported from an elements folder from within my application so that I could reuse it across the app.
When I import it and include it inside another component I can't render any of the body elements inside. Does anyone have any idea why this is happening and if there's a way around it?
Also as a smaller side issue when the body of the accordion opens to display, the whitespace doesn't fill the entire container and it looks like there's a grey column running down the right side.
I've included a code sandbox here to better show what I mean
Custom Collapse Component
import React, { useState } from "react";
import styled from "styled-components";
import { Collapse as AntCollapse } from "antd";
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0px;
background-color: #f7f7f7;
box-shadow: none;
}
`;
const CustomCollapse = props => {
const [disabled, setDisabled] = useState(true);
return (
<StyledCollapse onChange={() => setDisabled(prev => !prev)}>
<AntCollapse.Panel
header={props.header}
key="1"
showArrow={false}
bordered={false}
extra={<p style={{ color: "#0076de" }}>{disabled ? "SHOW" : "HIDE"}</p>}
/>
</StyledCollapse>
);
};
export default CustomCollapse;
Main Component
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import "antd/dist/antd.css";
import AntCollapse from "./CustomCollapse";
const Flexbox = styled.div`
font-family: sans-serif;
flex-direction: column;
display: flex;
justify-content: center;
border: solid 1px palevioletred;
padding: 10%;
margin: 10%;
`;
const ConfigurationOptions = () => (
<Flexbox>
<AntCollapse header="configuration test">
<h1>Test</h1>
<p>Test Paragraph</p>
<p>Test Paragraph</p>
</AntCollapse>
</Flexbox>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ConfigurationOptions />, rootElement);
You forgot to pass down the children in your custom collapse component.
To get it to work, do this:
const CustomCollapse = props => {
const [disabled, setDisabled] = useState(true);
return (
<StyledCollapse onChange={() => setDisabled(prev => !prev)}>
<AntCollapse.Panel
header={props.header}
key="1"
showArrow={false}
bordered={false}
extra={<p style={{ color: "#0076de" }}>{disabled ? "SHOW" : "HIDE"}</p>}
>
{props.children}
</AntCollapse.Panel>
</StyledCollapse>
);
};
(also to get the weird grey side column off the side you should do it like this:
const CustomCollapse = props => {
const [disabled, setDisabled] = useState(true);
return (
<StyledCollapse onChange={() => setDisabled(prev => !prev)}>
<AntCollapse.Panel
header={
<span>
{props.header}
<span style={{ color: "#0076de", float: "right" }}>
{disabled ? "SHOW" : "HIDE"}
</span>
</span>
}
key="1"
showArrow={false}
bordered={false}
>
{props.children}
</AntCollapse.Panel>
</StyledCollapse>
);
};
)

Categories