Hello im using npm hamburger link here https://hamburger-react.netlify.app/ how make this hamburger display block if screen is large and only show when media size is small i try to drag it in to div give class name and try to css it but its not worked maybe someone is using it and know how to make dislpay block on it ?
NavBar.js
import { useState } from "react";
import Hamburger from "hamburger-react";
import "../css/NavBar.css"
import { Link } from "react-router-dom";
const NavBar = () => {
const [isOpen, setOpen] = useState(false);
return (
<nav className="navigation">
<Link to="/" className="brand-name">
MacroSoft
</Link>
<Hamburger toggled={isOpen} toggle={setOpen}/>
<div
className = {
isOpen ? "navigation-menu expanded" : "navigation-menu"
}>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/">Weather</Link>
</li>
<li>
<Link to="/">About me</Link>
</li>
</ul>
</div>
</nav>
);
}
export default NavBar;
Related
import React from "react";
import "./sidebar.css";
import { Link, NavLink } from "react-router-dom";
import { MdDashboard } from "react-icons/md";
import {
FaUserAlt,
FaListAlt,
} from "react-icons/fa";
const Sidebar = () => {
return (
<section className="component-sidebar">
<div className="component-sidebar-nav">
<ul>
<li>
<Link to="/">
<div className="component-sidebar-nav-icon">
<MdDashboard />
</div>
<div>Dashboard</div>
</Link>
</li>
<li>
<Link to="/my-profile">
<div className="component-sidebar-nav-icon">
<FaUserAlt />
</div>
<div>Profile</div>
</Link>
</li>
<li>
<Link to="/my-courses">
<div className="component-sidebar-nav-icon">
<FaListAlt />
</div>
<div>My Courses</div>
</Link>
</li>
</ul>
</div>
</section>
);
}
export default Sidebar;
I want to make active side bar, but didn't find any solution. I don't want to use NavLink.I want to make it custom in React js.
If anyone help me. I really appreciate it. Looking for a solution.
Thanks in Advance.
I'm trying to create a responsive navbar with a slider menu. I got everything working the way I want it to except for when maximizing the window (after closing the slide menu).
menu slider //
Regular Responsive Nav {maximized window result after leaving menu slider open } //
Responsive Nav {maximized window result after menu slider closed
import "./App.css";
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { GiHamburgerMenu } from "react-icons/gi";
import ProfileButtons from "./components/ProfileButtons";
function App() {
let [isMenuOpen, setIsMenuOpen] = useState(false);
let [menu, setMenu] = useState("translateX(0%)");
function openMenu() {
setIsMenuOpen(!isMenuOpen);
if (isMenuOpen === true) {
setMenu("translateX(0%)");
} else {
setMenu("translateX(-100%)");
}
}
return (
<div className='container'>
<nav className='navigation'>
<div className='navburger'>
<IconContext.Provider
value={{
color: "white",
size: "1.2em",
className: "global-class-name",
}}
>
<GiHamburgerMenu onClick={openMenu} />
</IconContext.Provider>
</div>
<div className='brand'>
<h2>Chubbini</h2>
</div>
<ul className='nav-links' style={{ transform: menu }}>
<li>
<a href='/a'>About</a>
</li>
<li>
<a href='/a'>Product</a>
</li>
<li>
<a href='/a'>Inquiries</a>
</li>
<li>
<a href='/a'>FAQ</a>
</li>
<ProfileButtons />
</ul>
</nav>
</div>
);
}
export default App;
I understand the problem, it's just I'm not sure how to reach my conclusion...unless there's an easier way or I have to not useState...
Thanks for helping!
Im trying to use this package to implement smooth scroll within a Navbar:
https://www.npmjs.com/package/react-scroll
Here's my navbar component:
Navbar.js
import React from "react";
import { Section1, Nav, NavLink, Bars, NavMenu } from "./NavbarElements";
import { Link, animateScroll as scroll } from "react-scroll";
const Navbar = () => {
return (
<>
<Section1>
<Nav>
<Bars />
<Link
activeClass="active"
to="section2"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Home
</Link>
<Link
activeClass="active"
to="section3"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Web
</Link>
<Link
activeClass="active"
to="section4"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Games
</Link>
<Link
activeClass="active"
to="section5"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
About
</Link>
</Nav>
</Section1>
</>
);
};
export default Navbar;
and here's my App.js
App.js
import React from "react";
import "./App.css";
import Navbar from "./components/navbar";
import HomeSection from "./components/home-section";
import WebSection from "./components/web-section";
import GameSection from "./components/games-section";
import AboutSection from "./components/about-section";
function App() {
return (
<>
<Navbar />
<HomeSection id="section2" />
<WebSection id="section3" />
<GameSection id="section4" />
<AboutSection id="section5" />
</>
);
}
export default App;
What am I missing? I thought I ID'd everything correctly but maybe not? Sorry im a noob. Any glaring issues here I'm missing? Is there a better way to implement one page smooth scrolling with react?
https://imgur.com/PvRRMPL
The way react component works that anything you put in the angle bracket its gonna take it as a props here you are not setting up and id you are passing down the prop to your components
<HomeSection id="section2" /> //this is passing props to your homeSection Component
here is how you can fix it:
const HomeSection (props) =>{
return(
<div id={props.id}> //your parent div
</div>
)
or you can wrap it like that
<div id="id="section2"">
<HomeSection />
</div>
If anyone ever sees this and needs a solution, you need to wrap <Element> tags around the component like so:
import { Element } from "react-scroll";
const HomeSection = () => {
return (
<>
<Element id="section2" name="home">
<Section2>
/* CODE */
</Section2>
</Element>
</>
);
};
export default HomeSection;
I actually don't know whats wrong here is it some bootstrap error in the code do i have the wrong version or something?
I think align-items-center should do it i don't know why it doesn't. And please don't tell me to make the elements display:inline or inline-block, it does not work.
Here is the code:
import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "../logo.svg";
import styled from "styled-components";
import { ButtonContainer } from "./Button";
export class Navbar extends Component {
render() {
return (
<NavWrapper className="navbar navbar-dark ">
<Link to="/">
<img src={logo} alt="store" className="navbar-brand " />
</Link>
<ul className="navbar-nav align-items-center">
<li className="nav-item ">
<Link to="/" className="nav-link">
products
</Link>
</li>
</ul>
<Link to="/cart" className="ml-auto">
<ButtonContainer>
<span className="mr-2">
<i className="fas fa-cart-plus" />
</span>
my cart
</ButtonContainer>
</Link>
</NavWrapper>
);
}
}
const NavWrapper = styled.nav`
background: var(--mainBlue);
.nav-link {
color: var(--mainWhite);
fontsize: 1.3rem;
text-transform: capitalize;
}
`;
export default Navbar;
I am sorry for taking your time, i just reinstalled bootstrap and it works...
In the Navbar.js component I want to be able to set state to true or false of the is-active css class, so that when the user presses the burger menu button, the menu shows or hides.
The code below works in the gatsby develop but not in the gatsby build.
There are no errors in 'build'.
Question: Why the code below does not work in gatsby build?
import React from 'react';
import Link from 'gatsby-link';
import logo from '../img/logo.svg';
class Navbar extends React.Component {
state = { showMenu: false }
toggleMenu = () => {
this.setState({
showMenu: !this.state.showMenu
})
}
render() {
const menuActive = this.state.showMenu ? 'is-active' : '';
const burgerActive = this.state.showMenu ? 'is-active' : '';
return (
<nav className="navbar">
<div className="navbar-brand">
<Link className="navbar-item" to="/">
<img src={logo} style={{ width: '88px' }} itemprop="image" alt="" />
</Link>
<div className={`navbar-burger burger ${burgerActive}`} onClick={this.toggleMenu}>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div className={`navbar-menu ${menuActive}`} >
<div className="navbar-start">
<Link className="navbar-link" to="/" onClick={this.toggleMenu}>
Home
</Link>
<Link className="navbar-link" to="/services" onClick={this.toggleMenu}>
Services
</Link>
<Link className="navbar-link" to="/contact" onClick={this.toggleMenu}>
Contact
</Link>
</div>
</div>
</nav>)
}
};
export default Navbar;