I want to change the colour of navbar on scroll, through the useState hook.
const Navbar = () => {
const [colorChange, setColorchange] = useState(false);
const changeNavbarColor = () =>{
if(window.scrollY >= 38){
setColorchange(true);
}
else{
setColorchange(false);
}
};
console.log(setColorchange)
window.addEventListener('scroll', changeNavbarColor);
I am trying to drive the below styled component, how do I control the background: prop with any state?
const NavbarContainer = styled.div`
width: 100%;
height: 38px;
background-color: red;
margin-top: 10px;
display: flex;
justify-content: space-between;
position: sticky;
top:0;
z-index: 1;
`;
You can pass props:
<NavbarContainer bg={yourDynamicColor}>
...
</NavbarContainer>
const NavbarContainer = styled.div`
background-color: ${props => props.bg};
// you can write any javascript, e.g:
color: ${({bg}) => bg === 'white' : 'black' : 'white'}
`;
const NavbarContainer = styled.div`
width: 100%;
height: 38px;
background-color: ${props => props.colorChange ? "red" : "blue"};
margin-top: 10px;
display: flex;
justify-content: space-between;
position: sticky;
top:0;
z-index: 1;
`;
I think the best way is to update the className of your component based on the state.
Also init your eventListener in useEffect and remove it when component unmount.
import React, { useEffect, useState } from 'react';
const Navbar = () => {
const [colorChange, setColorchange] = useState(false);
const changeNavbarColor = () => {
if(window.scrollY >= 38){
setColorchange(true);
}
else{
setColorchange(false);
}
};
useEffect(() => {
window.addEventListener('scroll', changeNavbarColor);
return () => {
window.removeEventListener('scroll', changeNavbarColor);
}
}, [])
return (
<div className={colorChange ? 'colorBlack' : 'colorWhite'}>
<p>Your navbar</p>
</div>
)
}
export default Navbar;
Related
I am having an issue with my application's state tracking. I have an edit form, and when I click on a ticket to set it as the selected ticket, I pass the selected ticket down to the edit form. However, I think I have an issue with the way my state is being tracked.
I believe the exact issue is here:
function handleClick(ticket) {
setSelectedTicket(ticket);
}
If I edit a ticket then click on any other tickets, the updated info then gets passed to all the other tickets.
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import TicketDetails from "./TicketDetails";
const Container = styled.div`
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
border-radius: 0.25em;
box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
box-sizing: border-box;
left: 50%;
width: 50vw;
height: 50vh;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
`;
const Gradient = styled.div`
background: black;
height: 2px;
margin: 1rem;
width: 96%;
`;
const H2 = styled.h2`
margin: 1rem;
padding: 0;
text-align: center;
width: 100%;
`;
const TicketContainer = styled.div`
display: flex;
flex-direction: row;
`;
const TicketList = styled.div`
display: flex;
margin-left: 1rem;
flex-direction: column;
height: 38vh;
overflow-y: auto;
width: 50%;
`;
const Ticket = styled.div`
margin-right: 2rem;
font-size: 1.3rem;
cursor: pointer;
`;
const DetailsContainer = styled.div`
align-items: center;
text-align: center;
margin: 5px auto auto auto;
width: 300px;
`;
const MyTickets = ({ user }) => {
const [tickets, setTickets] = useState([]);
const [selectedTicket, setSelectedTicket] = useState(null);
useEffect(() => {
fetch(`/users/${user.id}`)
.then((r) => r.json())
.then((data) => {
if (data.tickets.length > 25) {
setTickets(data.tickets.slice(0, 25));
} else {
setTickets(data.tickets);
}
});
}, []);
function refreshTickets() {
fetch(`/users/${user.id}`)
.then((r) => r.json())
.then((data) => {
if (data.tickets.length > 25) {
setTickets(data.tickets.slice(0, 25));
} else {
setTickets(data.tickets);
}
});
}
function limitChars(string) {
if (string.length > 18) {
return string.slice(0, 18) + "...";
}
return string;
}
function handleClick(ticket) {
setSelectedTicket(ticket);
}
return (
<>
<div className="bg"></div>
<div className="bg bg2"></div>
<div className="bg bg3"></div>
<Container>
<H2>{user.username}'s tickets</H2>
<Gradient></Gradient>
<TicketContainer>
<TicketList>
{tickets.map((ticket, index) => {
return (
<Ticket key={index} onClick={() => handleClick(ticket)}>
{index + 1}: {limitChars(ticket.title)}
</Ticket>
);
})}
</TicketList>
<DetailsContainer>
{selectedTicket ? (
<TicketDetails
ticket={selectedTicket}
refreshTickets={refreshTickets}
/>
) : (
<div>Select a ticket</div>
)}
</DetailsContainer>
</TicketContainer>
</Container>
</>
);
};
export default MyTickets;
Below is how I update the ticket:
import React, { useState } from "react";
import styled from "styled-components";
const Container = styled.div`
user-select: none;
border-radius: 2px;
border: 2px solid transparent;
box-shadow: none;
box-sizing: border-box;
padding: 8px;
margin-bottom: 8px;
`;
const Title = styled.div`
font-size: 1.5rem;
overflow-wrap: break-word;
margin: 0.5rem;
`;
const Gradient = styled.div`
background: black;
height: 2px;
margin: 0.5rem;
`;
const Description = styled.div`
font-size: 1rem;
overflow-wrap: break-word;
word-break: break-all;
margin: 0.5rem;
`;
const ContentContainer = styled.div`
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
display: flex;
flex-direction: column;
align-items: center;
`;
const Input = styled.input`
height: 2rem;
width: 100%;
text-align: center;
`;
const TextArea = styled.textarea`
height: 100px;
width: 98%;
padding: 1%;
border: none;
resize: none;
`;
const ButtonContainer = styled.div`
flex-direction: row;
`;
const EditButton = styled.button`
width: 5rem;
`;
const categories = [
"URGENT",
"Meetings",
"To Do",
"In Progress",
"Needs Review",
];
const Category = styled.div`
margin: 0.5rem;
`;
const TicketDetails = ({ ticket, refreshTickets }) => {
const [edit, setEdit] = useState(false);
const [title, setTitle] = useState(ticket.title);
const [initialTitle, setInitialTitle] = useState(ticket.title);
const [description, setDescription] = useState(ticket.description);
const [descriptionInit, setDescriptionInit] = useState(ticket.description);
const handleSubmit = (e) => {
e.preventDefault();
fetch(`/tickets/${ticket.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: title, description: description }),
})
.then((r) => r.json())
.then((d) => {
console.log("updated ticket", d);
setTitle(d.title);
setDescription(d.description);
refreshTickets();
});
setEdit(false);
};
const handleReset = (e) => {
setTitle(initialTitle);
setDescription(descriptionInit);
};
const handleCancel = (e) => {
setTitle(initialTitle);
setDescription(descriptionInit);
setEdit(false);
};
return (
<>
<Category>{categories[ticket.category_id - 1]}</Category>
<Gradient></Gradient>
{edit ? (
<Container
style={{
backgroundColor: "#B1D4E0",
}}
>
<form onSubmit={handleSubmit} onReset={handleReset}>
<Input
type="text"
id="title"
autoComplete="off"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<Gradient></Gradient>
<TextArea
type="text"
id="description"
autoComplete="off"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<button onClick={handleCancel}>Cancel</button>
</form>
</Container>
) : (
<Container
style={{
backgroundColor: "#B1D4E0",
}}
>
<Title>{ticket.title}</Title>
<Gradient></Gradient>
<ContentContainer>
<Description>{ticket.description}</Description>
</ContentContainer>
<ButtonContainer>
<EditButton onClick={() => setEdit(true)}>Edit</EditButton>
</ButtonContainer>
</Container>
)}
</>
);
};
export default TicketDetails;
I think that the info updated is kept because the component is always mount, you change the ticket value in props but this does not re-initialize your state in TicketDetails. To update the values when other ticket is selected add a useEffect like this:
const TicketDetails = ({ ticket, refreshTickets }) => {
//...
useEffect(() => {
setTitle(ticket.title);
setInitialTitle(ticket.title);
setDescription(ticket.description);
setDescriptionInit(ticket.description);
}, [ticket]);
Can someone help me to display specific song while clicking on that in Your Playlist container on the left??
I am trying to list data on the left in Your Playlist container When I click on one of the music it should show it in Your Playlist container. It has to save it to browser history as well and it has to remove it from Search because it is already gonna be in Your Playlist container. I will deploy it later to Firebase but now I need help.
It should be added to the left while clicking on one of the listed songs after a search.
Please support me on that.
I am adding my codes here as well for my project:
I have App.js
import "./App.css";
import MySongs from "./MySongs.js";
import Search from "./Search.jsx";
function App() {
return (
<div className="App">
<div className="body">
<MySongs />
<Search />
</div>
</div>
);
}
export default App;
.App {
background-color: #303030;
width: 100%;
height: 100vh;
}
.body {
display: flex;
}
I have Search.jsx
import React, { useState, useEffect, useRef } from "react";
import "./Search.css";
import styled from 'styled-components';
import { IoSearch,IoClose } from "react-icons/io5";
import {motion, AnimatePresence} from "framer-motion";
import {useClickOutside} from "react-click-outside-hook";
import MoonLoader from 'react-spinners/MoonLoader';
import { useDebounce } from "./hooks/debounceHook";
import axios from "axios";
import { TvShow } from "./tvShow";
const SearchBarContainer = styled(motion.div)`
margin-left: 10px;
margin-top: 20px;
display: flex;
flex-direction: column;
width: 96%;
height: 2.5em;
background-color: #424242;
border-radius: 3px;
`;
const SearchInputContainer = styled.div`
width: 98%;
min-height: 2.5em;
display: flex;
align-items: center;
position: relative;
padding: 2px 15px;
`;
const SearchInput = styled.input`
width: 100%;
height: 100%;
outline: none;
border: none;
font-size: 15px;
color: white;
font-weight: 300;
border-radius: 6px;
background-color: transparent;
&:focus {
outline: none;
&::placeholder {
opacity: 0;
}
}
&::placeholder {
color: #white;
transition: all 250ms ease-in-out;
}
`;
const SearchIcon = styled.span`
color: #bebebe;
font-size: 14px;
margin-right: 10px;
margin-top: 6px;
vertical-align: middle;
`;
const CloseIcon = styled(motion.span)`
color: #bebebe;
font-size: 15px;
vertical-align: middle;
transition: all 200ms ease-in-out;
cursor: pointer;
&:hover {
color: #dfdfdf;
}
`;
const LineSeperator = styled.span`
display: flex;
min-width: 100%;
min-height: 2px;
background-color: #d8d8d878;
`;
const SearchContent = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 1em;
overflow-y: auto;
`;
const LoadingWrapper = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
`;
const WarningMessage = styled.span`
color: #a1a1a1;
font-size: 14px;
display: flex;
align-self: center;
justify-self: center;
`;
const containerVariants = {
expanded: {
height: "26em",
},
collapsed: {
height: "2.5em",
},
};
const containerTransition = { type: "spring", damping: 22, stiffness: 150 };
export function SearchBar(props) {
const [isExpanded, setExpanded] = useState(false);
const [parentRef, isClickedOutside] = useClickOutside();
const inputRef = useRef();
const [searchQuery, setSearchQuery] = useState("");
const [isLoading, setLoading] = useState(false);
const [tvShows, setTvShows] = useState([]);
const [noTvShows, setNoTvShows] = useState(false);
const isEmpty = !tvShows || tvShows.length === 0;
const changeHandler = (e) => {
e.preventDefault();
if (e.target.value.trim() === "") setNoTvShows(false);
setSearchQuery(e.target.value);
};
const expandContainer = () => {
setExpanded(true);
};
const collapseContainer = () => {
setExpanded(false);
setSearchQuery("");
setLoading(false);
setNoTvShows(false);
setTvShows([]);
if (inputRef.current) inputRef.current.value = "";
};
useEffect(() => {
if (isClickedOutside) collapseContainer();
}, [isClickedOutside]);
const searchTvShow = async () => {
if (!searchQuery || searchQuery.trim() === "") return;
setLoading(true);
setNoTvShows(false);
const options = {
method: 'GET',
url: 'https://deezerdevs-deezer.p.rapidapi.com/search',
params: {q: searchQuery},
headers: {
'x-rapidapi-host': 'deezerdevs-deezer.p.rapidapi.com',
'x-rapidapi-key': '6a99d5e101msh1e9f2b2f948746fp1ae1f3jsn6b458fe8b4e4'
}
};
axios.request(options).then(function (response) {
if (response) {
if (response.data && response.data.length === 0) setNoTvShows(true);
setTvShows(response.data.data);
}
}).catch(function (error) {
console.error(error);
});
setLoading(false);
};
useDebounce(searchQuery, 500, searchTvShow);
// console.log(tvShows);
return (
<div className="my__search">
<SearchBarContainer
animate={isExpanded ? "expanded" : "collapsed"}
variants={containerVariants}
transition={containerTransition}
ref={parentRef}
>
<SearchInputContainer>
<SearchIcon>
<IoSearch />
</SearchIcon>
<SearchInput
placeholder="Search for Series/Shows"
onFocus={expandContainer}
ref={inputRef}
value={searchQuery}
onChange={changeHandler}
/>
<AnimatePresence>
{isExpanded && (
<CloseIcon
key="close-icon"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={collapseContainer}
transition={{ duration: 0.2 }}
>
<IoClose />
</CloseIcon>
)}
</AnimatePresence>
</SearchInputContainer>
{isExpanded && <LineSeperator />}
{isExpanded && (
<SearchContent>
{isLoading && (
<LoadingWrapper>
<MoonLoader loading color="#000" size={20} />
</LoadingWrapper>
)}
{!isLoading && isEmpty && !noTvShows && (
<LoadingWrapper>
<WarningMessage>Start typing to Search</WarningMessage>
</LoadingWrapper>
)}
{!isLoading && noTvShows && (
<LoadingWrapper>
<WarningMessage>No Tv Shows or Series found!</WarningMessage>
</LoadingWrapper>
)}
{!isLoading && !isEmpty && (
<>
{tvShows.map((show) => (
<TvShow
key={show.id}
thumbnailSrc={show.album.cover_medium}
name={show.title_short}
artist={show.artist.name}
/>
))}
</>
)}
</SearchContent>
)}
</SearchBarContainer>
</div>
);
}
export default SearchBar;
.my__search {
margin-top: 20px;
flex: 0.6;
height: 450px;
border-radius: 5px;
border: 1px solid black;
margin-left: 80px;
background-color: #424242;
}
I have tvShow.jsx
import React, { useState } from "react";
import styled from "styled-components";
import {ImDownload} from "react-icons/im";
const TvShowContainer = styled.div`
width: 96%%;
min-height: 3em;
display: flex;
border-bottom: 2px solid #555555;
align-items: center;
`;
const Thumbnail = styled.div`
width: auto;
height: 80%;
display: flex;
flex: 0.4;
img {
border-radius: 20px;
width: auto;
height: 100%;
}
`;
const Name = styled.h3`
font-size: 12px;
color: white;
flex: 2;
display: flex;
flex-direction: column;
`;
const Artist = styled.span`
margin-top: 10px;
font-size: 8px;
color: white;
display: flex;
align-items: center;
`;
const Rating = styled.span`
color: #a1a1a1;
font-size: 16px;
display: flex;
flex: 0.2;
`;
export function TvShow(props) {
const { thumbnailSrc, name, artist,clickedMusic } = props;
const [wantedMusic, setWantedMusic] = useState("");
// const [clickedShow, setClickedShow] = useState("");
// function clickedContainer(e){
// const element = e.currentTarget();
// setClickedShow(element);
// console.log("I am clickedShow " +clickedShow);
// }
return (
<TvShowContainer onclick="location.href='#';" >
<Thumbnail>
<img src={thumbnailSrc} />
</Thumbnail>
<Name>{name}
<Artist>
{artist}
</Artist>
</Name>
</TvShowContainer>
);
}
I have mySongs.js
import React from "react";
import "./MySongs.css";
function MySongs() {
return (
<div className="my__songs">
<p>Your Playlist</p>
</div>
);
}
export default MySongs;
.my__songs {
margin-left: 10px;
margin-top: 20px;
flex: 0.3;
height: 300px;
height: 450px;
border: 1px solid black;
border-radius: 5px;
background-color: #424242;
}
.my__songs > p {
color: white;
opacity: 90%;
margin-left: 10px;
font-size: 13px;
}
Only partly answering the question: move an item from one list to another (and back) on mouse click.
The basic situation can be solved if you use the parent component to hold the state that the children components display. Then you only need to implement a function that toggles a "flag" (like selected), and the components can be rendered based on that flag.
const {useState} = React
const tracklist = [
{
id: 1,
title: 'Track 1',
selected: false,
},
{
id: 2,
title: 'Track 2',
selected: false,
},
{
id: 3,
title: 'Track 3',
selected: false,
},
{
id: 4,
title: 'Track 4',
selected: false,
},
{
id: 5,
title: 'Track 5',
selected: false,
},
]
const ListItem = ({ title, onToggleSelect }) => <div className="list-item" onClick={onToggleSelect}>{title}</div>
const App = ({ tracklist }) => {
const [tracks, setTracks] = useState(tracklist)
const toggleSelect = (id) => {
setTracks((prevState) => prevState.map(item => item.id === id ? {...item, selected: !item.selected} : item))
}
const listItem = (track) => <ListItem key={track.id} {...track} onToggleSelect={() => toggleSelect(track.id)}/>
return (
<div className="container" >
<div className="tracklist">
{
tracks
.filter(({ selected }) => selected)
.map(listItem)
}
</div>
<div className="tracklist">
{
tracks
.filter(({ selected }) => !selected)
.map(listItem)
}
</div>
</div>
)
}
ReactDOM.render(
<App tracklist={tracklist} />,
document.getElementById('root')
);
html, body {
margin: 0;
padding: 5px 10px;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
}
.list-item {
cursor: pointer;
}
.list-item:hover {
background: lightgray;
}
.tracklist {
border: 1px solid gray;
}
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>
I have built a mobile nav following this tutorial which is a fantastic tutorial, however I am stuck.
The mobile nav dropdown opens and closes no problem when clicking on the nav icon. However, when I click on a dropdown menu link and it navigates to another page, the mobile nav will stay open unless I manually close it myself.
How can I get the mobile nav to close when the route has changed?
I have a feeling its the Navbar file that isn't quite right! But I can't seem to get my head around it. Any suggestions would be great.
Thank you.
/// Navbar.jsx
import { Alert, Stack } from '#mui/material'
import React, { useContext, useState } from 'react'
import '../../styles/nav.css'
import { UserContext } from '../Contexts/User-Context'
const Navbar = (props) => {
const { loggedInUser } = useContext(UserContext)
const [open, setOpen] = useState(false)
const showSidebar = () => {
setOpen(!open)
}
const DropdownItem = (props) => {
return (
<div>
{ props.children }
</div>
)
}
return (
<div className='navbar'>
<h2 className='logo'>NC Games</h2>
<ul className='navbar-list'>
{ props.children }
</ul>
</div>
)
}
export default Navbar
/// DropdownMenu.jsx
import React, { useContext, useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { UserContext } from '../Contexts/User-Context'
const DropdownMenu = () => {
const { loggedInUser, setLoggedInUser } = useContext(UserContext)
const [open, setOpen] = useState(false)
const logOut = () => {
setLoggedInUser({ user: undefined })
}
const DropdownItem = (props) => {
return (
<div className='menu-item'>
{ props.children }
</div>
)
}
return loggedInUser ? (
<><div className='dropdown'>
<Link to={`/users/${loggedInUser.username}`}>
<DropdownItem className='nav-profile'>
<img className='nav-profile-pic' alt={loggedInUser.username} src={loggedInUser.avatar_url} />
</DropdownItem>
</Link>
<Link to={`/categories`}>
<DropdownItem>Categories</DropdownItem>
</Link>
<Link to={`/reviews`}>
<DropdownItem>Reviews</DropdownItem>
</Link>
<Link to={`/users`}>
<DropdownItem>Users</DropdownItem>
</Link>
<Link onClick={() => logOut()} to={`/`}>
<DropdownItem>Log out</DropdownItem>
</Link>
</div>
</>
) : (
null
)
}
export default DropdownMenu
/// NavItem.jsx
import React, { useState } from 'react'
import '../../styles/nav.css'
const NavItem = (props) => {
const [open, setOpen] = useState(false)
console.log(open, "<< open");
return (
<li className='nav-item'>
<div onClick={() => setOpen(!open)}>
{ props.icon }
</div>
{ open && props.children }
</li>
)
}
export default NavItem
// App.jsx
function App() {
// const [user, setUser] = useState(null);
const [loggedInUser, setLoggedInUser] = useState(null);
const [loggedIn, setLoggedIn] = useState(false);
// const response = await axios.post()
const saveLoggedInUser = () => {
localStorage.setItem("user", JSON.stringify(loggedInUser));
};
const getLoggedInUser = () => {
if (localStorage.getItem("user") === null) {
localStorage.setItem("user", JSON.stringify(null));
} else {
let userLocal = JSON.parse(localStorage.getItem("user"));
setLoggedInUser(userLocal);
setLoggedIn(true);
}
};
useEffect(() => {
getLoggedInUser();
}, []);
useEffect(() => {
saveLoggedInUser();
}, [loggedInUser, loggedIn]);
useEffect(() => {
window.scrollTo(50, 50)
}, [])
const isLoggedIn = loggedInUser !== null;
return (
<BrowserRouter>
<UserContext.Provider
value={{ loggedInUser, setLoggedInUser, isLoggedIn }}
>
<div className="App">
<Navbar>
<NavItem icon={<MenuRoundedIcon />}>
<DropdownMenu />
</NavItem>
</Navbar>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/categories" element={<Categories />} />
<Route path="/reviews/:category" element={<ReviewList />} />
<Route path="/reviews" element={<ReviewList />} />
<Route path="/review/:review_id" element={<ReviewPage />} />
<Route path="/users" element={<Users />} />
<Route path="/users/:username" element={<User />} />
</Routes>
</div>
</UserContext.Provider>
</BrowserRouter>
);
}
/// Nav.css
* {
margin: 0px;
}
:root {
--bg: #242526;
--bg-accent: #484a4d;
--nav-size: 60px;
--border: 1px solid #474a4d;
--border-radius: 8px;
--speed: 500ms;
/* margin-top: 75px; */
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
/* color: #dadce1; */
text-decoration: none;
}
.logo {
color: #dadce1;
margin: 0px;
display: flex;
align-items: center;
}
.navbar {
height: var(--nav-size);
background-color: var(--bg);
padding: 0 1rem;
border-bottom: var(--border);
display: flex;
justify-content: space-between;
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
}
.navbar-list {
max-width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
}
.nav-item {
width: calc(var(--nav-size) * 0.8);
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
color: #dadce1;
}
.icon-button {
--button-size: calc(var(--nav-size) * 0.5);
width: var(--button-size);
height: var(--button-size);
/* background-color: #484a4d; */
border-radius: 50%;
padding: 5px;
margin: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown {
position: absolute;
z-index: 1;
top: 56px;
width: 300px;
transform: translateX(-35%);
background-color: var(--bg);
border: var(--border);
border-radius: var(--border-radius);
padding: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 1;
}
.menu-item {
height: 50px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
/* transition: background var(--speed); */
padding: 0.5rem;
}
.menu-item:hover {
background-color: #525357;
}
.nav-profile-pic {
max-width: 75px;
padding-bottom: 40px 0px 40px 0px;
object-fit: contain;
overflow: hidden;
border-radius: 50%;
}
Do you have your NavBar component defined inside each route?
I think if you move your NavBar into each page, then by default the header / navbar should be reinitialized each time the route changes.
You can also use useLocation() and destructure pathname from that. Then use a useEffect to monitor that for changes and close the dropdown on change:
const { path } = useLocation();
useEffect(() =>{
setDropDownOpen(false);
}, [path])
I'm following a guide on how to build a simple website using Styled Components.
When the website is in mobile view the hamburger menu is stuck open and will not close when clicking the hamburger symbol or any of the nav menu items. The hamburger symbol does toggle to the FaTimes symbol, however.
All solutions I found so far don't work or require bootstrap, which I'm unfamiliar with. Can someone please explain to me the error in my code?
Navbar
import React, {useState, useEffect} from 'react';
import { FaBars, FaTimes } from 'react-icons/fa';
import { Nav, NavbarContainer, NavLogo, NavIcon, MobileIcon, NavItem, NavMenu, NavLinks,
NavItemBtn, NavBtnLink } from './Navbar.elements';
import {Button } from '../globalstyles';
import osun from '../images/Osun.png';
import { IconContext} from 'react-icons/lib';
import Home from './pages/Home';
const Navbar = () => {
const [click, setClick, isOpen, setIsOpen] = useState(false);
const [button, setButton] = useState(true);
const toggle = () => setIsOpen(!isOpen);
const hide = () => setIsOpen(false);
const handleClick = () => setClick(!click);
// const toggleShow = () => {
// this.setState({show: !this.state.show})
// }
//const toggleShow = () => setClick(!show)
// const toggleShow = () => {
// if (window.innerwidth <= 960){
// showMenu(false)
// } else {
// showMenu(true)
// }
// }
const showButton = () => {
if (window.innerWidth <=960){
setButton(false)
} else {
setButton(true)
}
};
const closeMobileMenu = () => setClick(false);
useEffect(() => {
showButton();
//toggleShow()
}, []);
window.addEventListener('resize', showButton);
//window.addEventListener('resize', toggleShow);
return (
<>
<IconContext.Provider value={{color: "#fff"}}>
<Nav>
<NavbarContainer>
<NavLogo to ="/">
<NavIcon />
Osun Swap
</NavLogo>
<MobileIcon onClick={handleClick} onBlur={hide} >
{click ? < FaTimes/> : <FaBars/>}
</MobileIcon>
<NavMenu onClick={handleClick} click ={click}>
<NavItem>
<NavLinks to = '/' onClick={closeMobileMenu}>
Home
</NavLinks>
</NavItem>
<NavItem>
<NavLinks to = '/services' onClick={closeMobileMenu}>
Services
</NavLinks>
</NavItem>
<NavItem>
<NavLinks to = '/AboutUs' onClick={closeMobileMenu}>
About us
</NavLinks>
</NavItem>
<NavItemBtn>
{button ? (
<NavBtnLink to ='/sign-up'>
<Button primary> Connect Wallet </Button>
</NavBtnLink>
) : (
<NavBtnLink to='/sign-up'>
<Button onClick={closeMobileMenu} fontBig primary>
Connect Wallet
</Button>
</NavBtnLink>
)}
</NavItemBtn>
</NavMenu>
</NavbarContainer>
</Nav>
</IconContext.Provider>
</>
)
}
export default Navbar;
Navbar.elements
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import osun from '../images/Osun.png';
import { Container } from '../globalstyles';
export const Nav = styled.nav`
background : #101522;//#282c34;//rgb(35, 31,32);//; //rgb(10, 10, 10);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top:0;
z-index:999;
`;
export const NavbarContainer = styled(Container)`
display: flex;
justify-content:space-between;
height: 80px;
${Container}
`;
export const NavLogo = styled(Link)`
color: #ffff;
justify-self: flex-start;
cursor: pointer;
font-size: 2rem;
display: flex;
align-items: center;
`;
export const NavIcon = styled.div`
background-image: url(${osun});
margin-right: 0.5rem;
`;
export const MobileIcon = styled.div`
display: none;
#media screen and (max-width: 960px){
display:block;
position: absolute;
top: 0;
right:0 ;
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
`;
export const NavMenu = styled.ul`
display: flex;
align-items: center;
list-style: none;
//text-decoration: none;
text-align: center;
/* display: flex;
flex-direction: column;
width: 100px;
height: 500px;
top: 80px;
left: -100%;
opacity:1;
transition: all 0.5s ease; */
#media screen and (max-width: 960px) {
display: flex;
flex-direction: column;
width: 100%;
//list-style: none;
height: 90vh;
top: 80px;
//right: -100%;
right: ${({click}) => (click ? 0 : '-100%')};
opacity:1;
//transform: ${({open}) => open ? 'translateX(0)' : 'translateX(100%)'};
transition: all 0.5s ease;
background: #101522; //rgb(35, 31,32);//
}
`;
export const NavItem = styled.li`
height: 80px;
border-bottom: 2px solid transparent;
#media screen and (max-width: 960px){
//visibility: hidden;
// display: block;
position: relative;
width: 100%;
//top:0;
//right:0;
//transform: translate(-100%, 60%);
//font-size:1.8rem;
//cursor: pointer;
}
&:hover {
border-bottom: 2px solid #4b59f7;
}
`;
export const NavLinks = styled(Link)`
color: #fff;
display:flex;
align-items: center;
text-decoration: none;
padding:0.5rem 1rem;
height: 100%;
#media screen and (max-width: 960px){
text-align: center;
padding: 2rem;
width: 100%;
display: table;
&:hover {
color:#4b59f7;
transition: all 0.3s ease;
}
}
`;
export const NavItemBtn = styled.li`
#media screen and (max-width: 960){
display:flex;
justify-content: center;
align-items: center;
width: 100%;
height: 120px
}
`;
export const NavBtnLink= styled(Link)`
display: flex;
justify-content:center;
align-items: center;
text-decoration: none;
padding: 8px 16px;
height: 100%;
width: 100%;
border: none;
outline: none;
`;
I tried to reproduce your issue and ran into errors with your code example, which may be the cause of your issue. In particular:
const [click, setClick, isOpen, setIsOpen] = useState(false);
is not a valid setup for useState. Try splitting this into two separate useState calls like:
const [click, setClick] = useState(false);
const [isOpen, setIsOpen] = useState(false);
As you had it in the original example, my IDE immediately flagged that line, and also informed me that isOpen was not initialized to anything, which threw major errors when I tried to click the button / blur it.
I have a modal component that displays some pictures. The modal is triggered when you click on the leading image. The leading image component is the following:
const LeadingImage = ({ handleOpen, photos }) => {
return (
<ImgWrapper>
<PropertyImg onClick={() => handleOpen(0)} src={photos[0]} />
</ImgWrapper>
);
};
export default LeadingImage;
// Style
let ImgWrapper = styled.div`
width: 100%;
pointer-events: auto;
text-align: center;
border-bottom: 1px solid lightgrey;
cursor: pointer;
`;
let PropertyImg = styled.img`
margin: auto;
display: block;
max-height: 500px;
width: 100%;
object-fit: cover;
height: auto;
pointer-events: inherit;
z-index: 999;
cursor: pointer;
`;
The onClick event used to work the first time I wrote this code, but it stopped working out of the blue. Now whenever I click on the PropertyImg, there is no activity in the console. The DOM doesn't detect any click whatsoever. The cursor doesn't turn into a pointer when hovering over the leading image either.
The code for the handleOpen method is the following:
const handleOpen = async index => {
await setShow(true)
setIndex(index)
console.log("Clicked!")
}
Any idea on what may be the root cause of this behaviour?
EDIT:
This is the component where LeadingImage is rendered. It's an abridged version:
const SelectedProperty = ({ propertyList }) => {
// Hooks
const currentUser = useSelector(state => state.user)
const [show, setShow] = useState(false);
const [index, setIndex] = useState(0);
const handleClose = () => setShow(false);
const handleOpen = async index => {
await setShow(true)
setIndex(index)
console.log("Clicked!")
}
const handleSelect = selectedIndex => {
setIndex(selectedIndex)
}
// Route params
let params = useParams()
// Main variables
var currentProperty = propertyList[params.id]
var photos = currentProperty.media.photos
return (
<Wrapper>
<PropertyRow>
<PropertyCol xs={8}>
<LeadingImage handleOpen={handleOpen} photos={photos} />
</PropertyCol>
// More stuff
</PropertyRow>
</Wrapper>
);
};
export default SelectedProperty;
let Wrapper = styled.div`
margin: auto;
width: 100%;
display: flex;
padding: 0;
position: relative;
`;
let PropertyCol = styled(Col)`
padding: 0;
margin: 30px 20px;
margin-left: 70px;
margin-bottom: 50px;
box-shadow: 1px 3px 5px lightgrey;
background-color: white;
border-radius: 5px;
z-index: -10;
`;
let PropertyRow = styled(Row)`
width: 100%;
.modal-content {
width: 900px;
max-width: 90% !important;
}
z-index: -9999;
`;
The problem its in your PropertyRow style - you are setting an index of -9999. So when you click on image, you not really clicking in it but actually on the div parent.
You can check this just commenting the z-index.
let PropertyRow = styled(Row)`
width: 100%;
.modal-content {
width: 900px;
max-width: 90% !important;
}
/* z-index: -9999; */
`;