i'm an beginner in react i try to make a website with it
my problem is change a CSS property for a component from another one to open a Nav menu
i make that with querySelector but i don't know if that is the best way to do
here to open the nav menu :
import './Navbar.css'
function Navbar() {
const handOpenMenu = () => {
const navMenu = document.querySelector(".navMenu");
navMenu.style.cssText = 'display: flex'
}
return (
<header className="navbar container">
<a className='logo' href='/#'>pure mix</a>
<i className="fa-solid fa-bars burgerBtn" onClick={handOpenMenu}></i>
</header>
)
}
export default Navbar
and here for close the nav menu :
import "./Navmenu.css";
function Navmenu() {
const handlCloseMenu = () => {
const navMenu = document.querySelector(".navMenu");
navMenu.style.cssText = "display: none";
}
return (
<div className="navMenu">
<a className="navItem" href="/#">
home
</a>
<a className="navItem" href="/#">
about
</a>
<a className="navItem" href="/#">
logo
</a>
<a className="navItem" href="/#">
contact
</a>
<i className="fa-solid fa-xmark close" onClick={handlCloseMenu}></i>
</div>
);
}
export default Navmenu;
Using useState hook for change state in your component
The best solution would be to use the useState hook and pass in Boolean values of true or false. True would render the navbar component while false would not render it. Here is a link that describes how you would implement this in the best way possible(https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/)
Related
I have a project in NextJS, where I'm making the NavBar component.
In wide screen it's got the links along the top, and in mobile there's a burger menu which opens a dropdown
Up to this point it all works great, links work.
Then I thought it'd be nice to add an OutsideClickHandler for when it's in mobile mode - i wired in https://www.npmjs.com/package/react-outside-click-handler
but with this addition, the links for my dropdown no longer work - effectively the whole screen (aside from my burger) is being 'listened to' at triggering the OutsideClick.
I'm extremely new to all this. I figure it's because it's just listening to the burger icon. But I have no idea where to start to remedy this, and would super appreciate some input! Half a thought being to apply the OutsideClick handler to the SideMenu component somehow, but I'm puzzled because it's logic otherwise is in NavBar.
Thanks so much.
My apologies I can't link to github as I'm on a branch and my mentor is busy on a tech interview and I don't want to pull request it yet!
NavBar.js - without OutsideClickHandler - links on Side Menu work fine
import { useState } from "react";
import Link from "next/link";
import styles from "../NavBar/NavBar.module.css";
import ButtonBase from "../button/buttonPrimary";
import SideMenu from "../SideMenu/SideMenu";
import MenuItems from "../../../data/MenuItems/MenuItems";
const NavBar = () => {
const [menuIsOpen, setMenuIsOpen] = useState(false);
const toggleMenu = () => {
if (menuIsOpen === false) {
setMenuIsOpen(true);
} else {
setMenuIsOpen(false);
}
};
return (
<nav className={styles.navBarBox}>
<div className={styles.menuIcon}>
<i className={"fas fa-bars fa-2x"} onClick={toggleMenu}></i>
</div>
<div className={styles.mobileSideMenu}>
{menuIsOpen ? <SideMenu /> : <div></div>}
</div>
<ul className={styles.navMenu}>
{MenuItems.map((item) => (
<li className={styles.navItem} key={item.id}>
<Link href={item.path}>{item.title}</Link>
</li>
))}
</ul>
<Link href="/contact-me">
<a className={styles.contactMeWeb}>
<ButtonBase label="Contact Me" isPrimary={false}></ButtonBase>
</a>
</Link>
<Link href="/contact-me">
<a className={styles.contactMeMobile}>
<i className={"fa-solid fa-message fa-2x"}> </i>
</a>
</Link>
</nav>
);
};
NavBar.js - with OutsideClickHandler - OutsideClickHandler works, but links in side menu only act as an outside click
import { useState } from "react";
import Link from "next/link";
import OutsideClickHandler from "react-outside-click-handler";
import styles from "../NavBar/NavBar.module.css";
import ButtonBase from "../button/buttonPrimary";
import SideMenu from "../SideMenu/SideMenu";
import MenuItems from "../../../data/MenuItems/MenuItems";
const NavBar = () => {
const [menuIsOpen, setMenuIsOpen] = useState(false);
return (
<nav className={styles.navBarBox}>
<OutsideClickHandler
onOutsideClick={() => {
setMenuIsOpen(false);
}}
>
{/* BURGER ICON */}
<a
className={styles.menuIcon}
onClick={() => setMenuIsOpen(!menuIsOpen)}
>
<i className={"fas fa-bars fa-2x"}></i>
</a>
</OutsideClickHandler>
{/* SIDE MENU */}
{menuIsOpen && (
<div className={styles.mobileSideMenu}>
<SideMenu />
</div>
)}
<ul className={styles.navMenu}>
{MenuItems.map((item) => (
<li className={styles.navItem} key={item.id}>
<Link href={item.path}>{item.title}</Link>
</li>
))}
</ul>
<Link href="/contact-me">
<a className={styles.contactMeWeb}>
<ButtonBase label="Contact Me" isPrimary={false}></ButtonBase>
</a>
</Link>
<Link href="/contact-me">
<a className={styles.contactMeMobile}>
<i className="fa-regular fa-envelope fa-2x"></i>
</a>
</Link>
</nav>
);
};
export default NavBar;
SideMenu.js
import MenuItems from "../../../data/MenuItems/MenuItems";
import styles from "../SideMenu/SideMenu.module.css";
const SideMenu = () => {
return (
<div className={styles.mobileMenuBox}>
<ul className={styles.mobileMenu}>
{MenuItems.map((item) => (
<li className={styles.mobileItem} key={item.id}>
<Link href={item.path}><div>{item.title}</div></Link>
</li>
))}
</ul>
</div>
);
};
export default SideMenu;
SOLVED!
I just dragged the:
{menuIsOpen && (
<div className={styles.mobileSideMenu}>
<SideMenu />
</div>
)}
between the
<OutsideClickHandler></OutsideClickHandler>
tags
I have these div cards with some information, and I would like to insert a link inside them, that redirects to another site. It didn't work with <a></a>. can anybody help me?
Thanks!
import React from "react";
function Card(props) {
return (
<div className="card">
<img className="img-logo" src={props.img} alt="image_logo" />
<h3 className="name"> {props.name}</h3>
<p className="paragraph"> {props.description}</p>
<a href={props.link}>Page</a>
</div>
);
}
export default Card;
You can use the <Link> component from react router.
If you are opening the url in new tab, make sure to use noopener and noreferrer so that the browser does not attach the current website's window variable to the newly opened url in the new tab, which can be a security loophole.
import { Link } from 'react-router-dom';
export const openInNewTab = (url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
if (newWindow) newWindow.opener = null;
};
function Card(props) {
return (
<div className="card">
<img className="img-logo" src={props.img} alt="image_logo" />
<h3 className="name"> {props.name}</h3>
<p className="paragraph"> {props.description}</p>
<Link href="#" onClick = {() => openInNewTab(props.link)}>Page</Link>
</div>
);
}
I'm making a tab bar for phone in react js and i have icons on it. I'm using React Router to perform the routes. Right now im able to change the icon color when it is active using an .active class. Is there a way I can change the Icon File when the route is active? Here is the code attached below.
import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';
import home_icon_stroke from './home_icon_stroke.svg';
import explore_icon_stroke from './explore_icon_stroke.svg';
import activity_icon_stroke from './activity_icon_stroke.svg';
import library_icon_stroke from './library_icon_stroke.svg';
import profile_icon_stroke from './profile_icon_stroke.svg';
import './Phonetabbar.css';
export default class Phonetabbar extends Component {
render() {
return (
<div className="phone-tabbar-layout" >
<div className="fixed" >
<div className="phone-tabbar-list">
<div className="tabbar-cell">
<NavLink exact to="/" >
<img src={home_icon_stroke} ></img>
</NavLink>
</div>
<div className="tabbar-cell">
<NavLink to="/explore" >
<img src={activity_icon_stroke} ></img>
</NavLink>
</div>
</div>
</div>
</div>
)
}
}
Maybe you want to try passing the isActive function to Navlink, setting a state in it.
<NavLink exact to="/"
isActive={(match, location)=>{
if(match){
//set isActive state true
}
return match;
}
>
<img src={isActive?home_icon_stroke:anotherImg} ></img>
</NavLink>
I am trying to add the Auth0 button to a navbar but the jsx linter does not like it when I add javascript. I need the conditional so it shows up for non registered users. I have tried importing it from another component ion React as well as adding it directly in the jsx with no luck. I keep getting isAuthenticated' is not defined and loginWithRedirect' is not defined. Not sure what to do next. Thanks.
import $ from 'jquery'
import '../styles/nav.scss'
import button from '../components/GoogleButton/Button.jsx'
import { auth0 } from './auth0/react-auth0-spa'
export default class NavBar extends Component {
componentDidMount() {
$(document).ready(function() {
$('.mobile-button a').click(function(e) {
$(this)
.parent()
.parent()
.toggleClass('open')
$(this).html($(this).html() === 'Close Menu' ? 'Menu' : 'Close Menu')
e.preventDefault()
})
})
}
render() {
return (
<div>
<header class='header'>
<div class='container'>
<h1 class='site-title'>Super Cool Web App!</h1>
<span class='site-tagline'>Because Andy made this!</span>
</div>
</header>
<nav class='main-nav'>
<div class='container'>
<ul>
<li class='mobile-button'>
<a href='/'>Menu</a>
</li>
<li>
<a href='/'>About</a>
</li>
<li>
{/* this is where the problem lies */}
{!isAuthenticated && (
<button onClick={() => loginWithRedirect({})}>Log in</button>
)}
</li>
<li>
<a href='/'>Methods</a>
</li>
<li>
<a href='/'>Results</a>
</li>
<li>
<a href='/'>Contact</a>
</li>
<li>
<a href='/'>Methods</a>
</li>
<li>
<a href='/'>Results</a>
</li>
<li>
<a href='/'>Contact</a>
</li>
</ul>
</div>
</nav>
</div>
)
}
}```
authO is for initializing you need to use useAuthO to access the api elsewhere in your project.
Change your import statement to:
import { useAuth0 } from "../react-auth0-spa";
Then deconstruct AuthO methods isAuthenticated and loginWithRedirect.
Right under render and before your return put:
const {isAuthenticated , loginWithRedirect} = useAuth0
https://auth0.com/docs/quickstart/spa/react#create-the-navbar-component
I have a problem with a navigation responsive menu.
When I resize the page, I can see the hamburger menu and everything works fine.But I am trying to put a toggle or slidetoggle in react like in jquery.I created a toggle button but does not work correctly. Above is the code, I created a handleClick button for the hamburger menu and a state cond. className="mynav" in css file is display:none;. I want when the size of page is small and when I push the hamburger button to see the menu.
import React, { Component } from 'react'
import './Navbar.css';
import {Link} from 'react-router-dom';
export default class Navbar extends Component {
state = {
cond: false,
}
handleClick=()=>{
this.setState({
cond:!this.state.cond
})
}
render() {
return (
<nav>
<div className="mylogo">
<div className="logo">
logo
</div>
<div id="mybtn" onClick={this.handleClick}>
<div className="bar1"></div>
<div className="bar2"></div>
<div className="bar3"></div>
</div>
</div>
{this.state.cond ? <div className="mynav" >
<ul>
<li>
<Link to='/'>home</Link>
</li>
<li>
<Link to='/about'>About</Link>
</li>
<li>
<Link to='/projects'>Projects</Link>
</li>
<li>
<Link to='/contact'>Contact</Link>
</li>
</ul>
</div> :false
}
</nav>
)
}
}
Wrap you state declaration in a constructor, something like this:
export default class Navbar extends Component {
constructor(props) {
super(props)
this.state = {
cond: false,
};
}
Then your onClick method will have access to the keyword 'this'. It wasn't able to access this.state without that.