I have used the code below to have navbar with reactstrap but it shows in 2 rows and not inline.
I have installed react strap and imported the CSS in app.js
import React, { Component } from 'react';
import {Collapse,Navbar,NavbarToggler,NavbarBrand,Nav,NavLink,NavItem,Container} from 'reactstrap';
state = {
isOpen: false
}
toggle = () => {
this.setState({
isOpen: !this.state.isOpen
})
}
render(){
return (
<Navbar color="dark" dark expand="sm" className="mb-5">
<Container>
<NavbarBrand href="/">ShoppingList</NavbarBrand>
<NavbarToggler onClick={this.toggle}></NavbarToggler>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="https://www.google.com">google</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
)
}
}
export default Appnavbar;
Related
I did the navbar offcanvas across all breakpoints using the attribute expand={false} like the image below.
However i want the navbar items to be like the normal navigation on (min-width: 992px) OR expand="lg" like the image below. Im using reactrouter v6 and react-bootstrap.
Below is my code and also here is the working sandbox code https://codesandbox.io/.
import React, { useState } from "react";
import { Container, Navbar, Nav, Offcanvas } from "react-bootstrap";
import { NavLink, Outlet } from "react-router-dom";
const NavbarContent = () => {
const [isOpen, setOpen] = useState(false);
return (
<>
<Navbar
expanded={isOpen}
expand={false}
bg="light"
fixed="top"
className="bg-white text-the-primary bg-gradient shadow py-3"
>
<Container>
<Navbar.Brand href="/">
<span className="d-block fs-1">Offcanvas</span>{" "}
</Navbar.Brand>
<Navbar.Toggle
aria-controls="offcanvasNavbar"
onClick={() => setOpen(isOpen ? false : "expanded")}
/>
<Navbar.Offcanvas
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
placement="end"
>
<Offcanvas.Header
closeButton
className="justify-content-end"
onClick={() => setOpen(false)}
></Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-0">
<NavLink to="/" onClick={() => setOpen(false)}>
Home
</NavLink>
<NavLink to="/About" onClick={() => setOpen(false)}>
About
</NavLink>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
<Outlet />
</>
);
};
export default NavbarContent;
I'm not sure if I missed something on useState and expand attribute of the navbar.
Set the expand break point to large using the command
<Navbar
expanded={isOpen}
expand='lg'
...
/>
Works for me
I want to simply highlight the tab selected from the NavBar. I had used the Navbar Component of React-bootstrap and used the state to change the bgColor and textColor of the selected tab. But it is still NOT working? Any corrections?
import React,{useState} from 'react';
import { Navbar,Container, Nav } from "react-bootstrap"
import { LogOut } from "./LogOut"
const NavbarComponent = () => {
const [bgcolor, setBgcolor] = useState('black');
const [textcolor, setTextcolor] = useState('white');
function handleHighlightTab() {
setBgcolor('white');
setTextcolor('black');
}
return (
<>
<Navbar bg="dark" variant="dark" fixed='top' className='nav-pills'>
<Container>
<Navbar.Brand href="/">Verticals</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="/grocery" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }} >Grocery</Nav.Link>
<Nav.Link href="/fashion" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }} >Fashion</Nav.Link>
<Nav.Link href="/footwear" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }}>Footwear</Nav.Link>
</Nav>
<LogOut />
</Container>
</Navbar>
</>
)
}
export default NavbarComponent;
could somone help i'm stuck in such problem with next.js here is my code
this is the error i get in the console
Error: Export encountered errors on following paths:
/admin
/user
in pages in folder named admin/index.js
import Layout from "../../components/Layout";
import Admin from "../../components/auth/Admin";
import Link from "next/link";
const AdminIndex = () => {
return (
<Layout>
<Admin>
<div className="container-fluid">
<div className="row">
<div className="col-md-12 pt-5 pb-5">
<h2>Admin Dashboard</h2>
</div>
<div className="col-md-4">
<ul class="list-group">
<li className="list-group-item">
<Link href="/admin/crud/project">
<a>Create Project</a>
</Link>
</li>
</ul>
</div>
<div className="col-md-8">right</div>
</div>
</div>
</Admin>
</Layout>
);
};
export default AdminIndex;
in folder pages/user/index.js
Error: Export encountered errors on following paths:
/admin
/user
import Layout from "../../components/Layout";
import Private from "../../components/auth/Private";
import Link from "next/link";
const UserIndex = () => {
return (
<Layout>
<Private>
<div className="container-fluid">
<h2>User Dashboard</h2>
</div>
</Private>
</Layout>
);
};
export default UserIndex;
and finally this is my header
import React, { useState } from "react";
import Link from "next/link";
import Router from "next/router";
import nProgress from "nprogress";
import { APP_NAME } from "../config";
import { signout, isAuth } from "../actions/auth";
import {
Collapse,
Navbar,
NavbarToggler,
Nav,
NavItem,
NavLink,
} from "reactstrap";
Router.onRouteChangeStart = (url) => nProgress.start();
Router.onRouteChangeComplete = (url) => nProgress.done();
Router.onRouteChangeError = (url) => nProgress.done();
//next.js giving us the option to use such option
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
return (
<div>
<Navbar color="light" light expand="md">
<Link href="/">
<NavLink className="font-weight-bold">{APP_NAME}</NavLink>
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
{!isAuth() && (
<React.Fragment>
<NavItem>
<Link href="/signin">
<NavLink>Signin</NavLink>
</Link>
</NavItem>
<NavItem>
<Link href="/signup">
<NavLink>Signup</NavLink>
</Link>
</NavItem>
</React.Fragment>
)}
{isAuth() && isAuth().role === 0 && (
<NavItem>
<Link href="/user">
<NavLink style={{ cursor: "pointer" }}>
{`${isAuth().name}'s Dashboard`}
</NavLink>
</Link>
</NavItem>
)}
{isAuth() && isAuth().role === 1 && (
<NavItem>
<Link href="/admin">
<NavLink style={{ cursor: "pointer" }}>{`${
isAuth().name
}'s Dashboard`}</NavLink>
</Link>
</NavItem>
)}
{isAuth() && (
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
onClick={() => signout(() => Router.replace(`/signin`))}
>
Signout
</NavLink>
</NavItem>
)}
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Header;
I'm working on a site I've build with Gatsby.js, and reactstrap for the ui components. But I have an problem with the collapsed navbar on smaller screens.
I need to collapse the navigation after each click to make it work with gatsby-link, but the collapse is not collapsed after a new page is loaded.
So I added a closeNavbar method to all links via onClick, but for whatever reasons this does not work.
Here is my navigation component:
import React from "react";
import Link from "gatsby-link";
import {
Collapse,
Container,
Navbar,
NavbarToggler,
Nav,
NavItem
} from "reactstrap";
export default class Navigation extends React.Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.closeNavbar = this.closeNavbar.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
closeNavbar() {
if (this.state.collapsed == true) {
this.toggleNavbar();
}
}
render() {
return (
<header>
<Navbar className="navigation__navbar" light expand="md">
<Container>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<Link className="nav-link navigation__navlinks" to="/">
Home
</Link>
</NavItem>
<NavItem>
<Link
onClick={this.closeNavbar}
className="nav-link navigation__navlinks"
to="/leistungen/"
>
Leistungen
</Link>
</NavItem>
<NavItem>
<Link
onClick={this.closeNavbar}
className="nav-link navigation__navlinks"
to="/kuechen/"
>
Küchen
</Link>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
</header>
);
}
}
I had an error in the closeNavbar method. I tried to toggle it, only when it was already collapsed. This is the correct code:
closeNavbar() {
if (this.state.collapsed !== true) {
this.toggleNavbar();
}
}
Is there any way to setState({collapse: true}) for mobile screens only? How can i toggle the this.state.collapse based on current window size?
import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
import $ from 'jquery';
import { Container, Row, Col, Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { css } from 'glamor';
import { ToastContainer } from 'react-toastify';
import toast from '../toast';
import { BarLoader } from 'react-spinners';
// ---------------- Custom components
import DashboardNavbar from '../DashboardPage/Dashboard/DashboardNavbar/DashboardNavbar';
import Footer from '../Footer/Footer';
import './VideoPage.css';
class VideoPage extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
collapsed: false
};
this.toggleLoader = this.toggleLoader.bind(this);
this.notifySuccess = this.notifySuccess.bind(this);
this.notifyError = this.notifyError.bind(this);
this.toggleNavbar = this.toggleNavbar.bind(this);
}
notifySuccess(msg) {
toast.success(msg);
}
notifyError(msg) {
toast.error(msg);
}
toggleLoader() {
this.setState({
loading: !this.state.loading
});
}
// isAuthenticated() {
// const token = localStorage.getItem('authToken');
// if (token) {
// return true;
// }
// }
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
const currentLocationPath = this.props.location.pathname;
const videoPage = currentLocationPath.includes('/video');
return (
<div className="VideoPage d-flex flex-column flex-grow">
<div className="VideoPageMain d-flex flex-grow">
<Container fluid>
<Row>
<DashboardNavbar videoPage={videoPage} />
</Row>
<Row>
<Col xs="12" sm="3">
<div className="sidebarMenu">
<Navbar dark>
<NavbarBrand className="mr-auto">Menu</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2 d-sm-none" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
</Col>
<Col xs="12" sm="9">.col</Col>
</Row>
</Container>
</div>
<Footer />
</div>
)
}
}
export default VideoPage;
basically i want the list to be hidden on mobile as there is button to toggle it which is hidden from tablet size and onwards.
It looks like there's a library for that: https://github.com/contra/react-responsive
Otherwise, you could add a listener to the resize event of window and fire that listener in the constructor to check the size.
You have 2 options:
1st option
Toggle classNames and let your CSS handles showing/hiding on different viewports
2nd option
use window.innerWidth in your isCollapsed
<Collapse isOpen={!this.state.collapsed && window.innerWidth < 768} navbar>
768 is just as an example