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!
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.
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;
I'm using a combination of React Bootstrap and React, to make a single page application, I've tried a few methods to get the Offcanvas menu to close when I click a link. I tried making an inline script on the link that toggles the menu, but what I found is the menu closes as I want it to but then the link only takes me halfway to where it should navigate to.
this is my code so far:
import React from "react";
import { Navbar, Nav, Container, Offcanvas } from "react-bootstrap";
import { StaticImage } from "gatsby-plugin-image";
import styled from "styled-components";
import { Link } from "gatsby";
const Wrapper = styled.div`
background-color: #9ac2ba;
.Nav-Brand {
display: flex;
}
.navbar {
background-color: #9ac2ba;
}
`;
const LinkWrapper = styled.div`
margin-top: 20px;
font-size: 1.5rem;
text-align: center;
color: #333;
.nav-link {
color: #333;
}
.nav-link:hover {
color: #000;
}
`;
const Navigation = () => {
return (
<Wrapper>
<Navbar
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>
<Container>
<Navbar.Brand href="/" className="Nav-Brand">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
/>
<h1 className="visually-hidden">
SPF Paint & Decorating, Birmingham
</h1>
</Navbar.Brand>
<Navbar.Toggle
aria-controls="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
/>
<Navbar.Offcanvas id="offcanvasNavbar" placement="start">
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
<span className="visually-hidden">SPF Nav Menu</span>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
className="offcanvas-brand"
/>
<LinkWrapper>
<Link to="/" className="nav-link">
Home
</Link>
<Link to="/#services" className="nav-link">
Services
</Link>
<Link to="/#faq" className="nav-link">
FAQ
</Link>
<Link to="/#contact" className="nav-link">
Contact
</Link>
</LinkWrapper>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</Wrapper>
);
};
export default Navigation;
this is the build of the site: https://pland.netlify.app/
All your links are to content on the same page, so using Link isn't necessary. Instead, replace these with regular anchor tags <a href=''>Link</a>
Secondly, the default behaviour of Offcanvas is that when the overlay is closed the focus is returned to where it was when the overlay was opened. That's why the page isn't scrolling to the correct position when the overlay is closed. To change this, you can pass in restoreFocus={false} prop to Offcanvas. See Offcanvas API docs.
Thirdly, to get the menu to close when a link is clicked, you should track whether the menu is open in state and add a toggle function to the onClick prop of each link, as well as the Navbar.Toggle.
const Navigation = () => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
const handleClose = () => setMenuOpen(false)
return(
/** Omit code */
<Navbar.Toggle
aria-controls='offcanvasNavbar'
aria-labelledby='offcanvasNavbarLabel'
/** Add onClick toggle here */
onClick={toggleMenu}
/>
<Navbar.Offcanvas
id='offcanvasNavbar'
placement='start'
/** Add these props */
restoreFocus={false}
show={menuOpen}
onHide={handleClose}
>
/** omit code */
<Nav className='justify-content-end flex-grow-1 pe-3'>
<a href='#services' className='nav-link' onClick={toggleMenu}>
Services
</a>
<a href='#faq' className='nav-link' onClick={toggleMenu}>
FAQ
</a>
{/** more links */}
</Nav>
/** omit code */
)
}
There is an option in the docs to automatically close: collapseOnSelect
https://react-bootstrap.netlify.app/components/navbar/#navbar-props
<Navbar
collapseOnSelect
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>
I am a beginner with react and trying to get full-screen overlay navigation, here is my code of the jsx file. Why the navigation menu is not displaying after clicking on the "open" option?
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './navbar.css';
import Dom2react from 'dom-to-react';
class Navbar extends Component{
constructor() {
super();
this.openNav = this.openNav.bind(this);
this.closeNav = this.closeNav.bind(this);
}
openNav=()=> {
document.getElementById("myNav").style.height = '100%';
}
closeNav=()=> {
document.getElementById("myNav").style.height = '0%';
}
render(){
return(
<div className="App">
<div id="myNav" className="overlay">
<a href="#!" className="closebtn" onClick={this.closeNav}>×</a>
<div className="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<span style={{fontSize: '30px', cursor: 'pointer'}} onClick={this.openNav}>☰ open</span>
</div>
);
}
}
export default Navbar;
use this:
<a href="#!" className="closebtn" onClick={this.closeNav()}>×</a>
<span style={{fontSize: "30px", cursor: "pointer"}} onClick={this.openNav()}>☰
open</span>
</div>
this.closeNav() instead of this.closeNav
this.openNav() instead of this.openNav
I trying to find a way to open the navbar of ReactJS app when i'm clicking on my "MENU" button.
At the beginning my nav component have a width of 0px (with overflow : hidden). When i'm clicking on the button my nav should have a width of 400px. I'm a beginner with React.
I have two React Components :
Topbar
export default function Topbar() {
return (
<div className="topbar__container">
<div className='topbar__menuButton'>
<Link className="topbar__link">MENU</Link>
</div>
<div className="topbar__title">
<Link to="/" className="topbar__link">EDGAR</Link>
</div>
</div>
)
}
Nav
const Nav = () => {
return (
<div className="navbar__container">
<Query query={CATEGORIES_QUERY} id={null}>
{({ data: { categories } }) => {
return (
<nav className="nav">
<ul>
{categories.map((category, i) => {
return (
<li key={category.id}>
<Link to={`/category/${category.id}`} className="nav__link">
{category.name}
</Link>
</li>
)
})}
</ul>
</nav>
)
}}
</Query>
</div>
)
}
export default Nav
To achieve something like that you have to set this logic in the common parent of both component (here App for the example).
App will manage a state to determine if the Nav is open or not. The state is called isMenuOpen and can be changed using the setIsMenuOpen() function. We will give to the children Nav the state isMenuOpen and to the children TopBar a callback from the function setIsMenuOpen():
App.jsx
import React from "react";
import TopBar from "./TopBar";
import Nav from "./Nav";
export default function App() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
return (
<div className="App">
<TopBar setMenuStatus={setIsMenuOpen} />
<Nav isOpen={isMenuOpen} />
</div>
);
}
Then the TopBar have to set the value of isMenuOpen to true using the function setIsMenuOpen() from the props.
TopBar.jsx
import React from "react";
export default function Topbar({ setMenuStatus }) {
return (
<div className="topbar__container">
<div className="topbar__menuButton">
<button
type="button"
onClick={() => {
setMenuStatus(true);
}}
>
Menu
</button>
</div>
</div>
);
}
Then the component Nav will set a specific class (here .open) if isOpen coming from props is true.
Nav.jsx
import React from "react";
import "./styles.css";
export default function Nav({ isOpen }) {
return (
<div id="nav" className={isOpen ? "open" : ""}>
Menu
</div>
);
}
styles.css
#nav {
display: none;
}
#nav.open {
height: 400px;
display: inline-block;
}
You can try this example in this codesandbox.
import React, {useState} from "react";
import "./styles.css";
export default function App() {
const [toggle, setToggle]= React.useState(false)
const [width, setWidth]= React.useState('')
const showMenu = () => {
setToggle(!toggle)
if(toggle === true) {
setWidth('50px')
}else {
setWidth('500px')
}
}
return (
<div className="App">
<button onClick={showMenu}>Menu</button>
<div style={{width, border:'1px solid red'}}>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</div>
</div>
);
}
reproducing link: https://codesandbox.io/s/billowing-flower-rxdk3?file=/src/App.js:0-592