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.
Related
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 working on some react projects and i've tried to orginize my code by moving some components to another files then import them but when i do that it just give me a blank page , when i write (import Header from "./Header") it starts to give blank page while it was working when i was putting all of the code in index.js only .
this is my main index code:
import Header from "./Header"
import Footer from "./Footer"
import Maincontent from "./Main"
function Page(){
return(
<div>
<Header />
<Maincontent/>
<Footer />
</div>
)
}
ReactDOM.render(<Page/>, document.getElementById("root"))
and this is my header code
export default function Header(){
return(
<header>
<nav className="nav">
<img src="./react-logo.png" className="img" />
<ul className="nav-items">
<li> Pricing </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</header>
)
}
You need to export Header. Try putting export default Header at the bottom of your Header component file.
I want to change the user value to true when a user clicks a login button in my login page. I'm a beginner level web dev student and I am still learning how to use useState in React. I am sorry for this dumb question but please help! Thank you so much!!!!
TopBar.jsx
import { Link } from 'react-router-dom';
import './topbar.css';
export default function topbar() {
const user = false;
return (
<div className='top'>
<div className='topLeft'>
<i className='topIcon fab fa-facebook-square'></i>
<i className='topIcon fab fa-twitter-square'></i>
<i className='topIcon fab fa-pinterest-square'></i>
<i className='topIcon fab fa-instagram-square'></i>
</div>
<div className='topCenter'>
<ul className='topList'>
<li className='topListItem'>
<Link className='link' to ='/'>HOME</Link>
</li>
<li className='topListItem'><Link className='link' to ='/'>ABOUT</Link></li>
<li className='topListItem'><Link className='link' to ='/'>CONTACT</Link></li>
<li className='topListItem'><Link className='link' to ='/write'>WRITE</Link></li>
<li className='topListItem'>{user && 'LOGOUT'}</li>
</ul>
</div>
<div className='topRight'>
{
user ? (
<Link className='link' to ='/settings'>
<img
className='topImg'
src="https://organicthemes.com/demo/profile/files/2018/05/profile-pic.jpg"
alt=""
/>
</Link>
) : (
<ul className='topList'>
<li className='topListItem'>
<Link className='link' to ='/login'>LOGIN</Link>
</li>
<li className='topListItem'>
<Link className='link' to ='/register'>REGISTER</Link>
</li>
</ul>
)
}
<i className='topSearchIcon fas fa-search'></i>
</div>
</div>
);
}
Login.jsx
import { Link } from 'react-router-dom';
import './login.css'
export default function Login() {
return (
<div className='login'>
<span className="LoginTitle">Login</span>
<form className="loginForm">
<label>Email</label>
<input type="text" className='loginInput' placeholder='Enter your email...' />
<label>Password</label>
<input type="password" className='loginInput' placeholder='Enter your password...' />
<button className="loginButton">Login</button>
</form>
<button className="loginRegisterButton">
<Link className='link' to='/register'>Register</Link>
</button>
</div>
);
}
Thank you for helping!
I have know idea why are you solving this way. But to be reactive you should store that user in state.
E.g
import {useState} from 'react';
const [user, setUser] = useState(false);
return (
<button onClick={() => setUser(true)}>Click me!</button>
)
Do you write your own server script? You need to send a HTTPS POST request to the server and validate the login data. Look into React-Router, Express, or Next.js to learn about server-side routing.
Here's a beginner friendly article about POST requests
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...
Been trying to convert several of our projects using materialize-css v1.0 using npm into react.js and having a heck of time doing so. I was wondering if anyone else has tried to tackle this as well and maybe came up with some solutions?
I am able to use the css portion just fine using the npm module and referencing it in the Index.js.
The problem I have is initializing the minified js with individual components but having no success. Here is the example one being the Index.js for css entry point and the sidebar component I am trying to get working using minified js. I also provided the App.js configuration in case anyone was curious. The plan was to break each part of this project into individual components but first just wanted to get the functionality of initializing the sidebar js first before doing so.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'materialize-css/dist/css/materialize.min.css';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
// import Header from './header/Header';
// import Footer from './Footer';
import Landing from './landing/Landing';
import About from './About';
import Projects from './Projects';
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<div>
{/*<Header />*/}
<Route exact path="/" component={Landing} />
<Route exact path="/about" component={About} />
<Route exact path="/projects" component={Projects} />
{/*<Footer /> */}
</div>
</BrowserRouter>
</div>
);
}
}
export default App;
Landing.js
import React, { Component } from 'react';
import M from 'materialize-css/dist/js/materialize.min.js';
// import { Link } from 'react-router-dom';
import './Landing.css';
class Landing extends Component {
componentDidMount() {
console.log(M);
const sideNav = document.querySelector('.button-collapse');
console.log(M.Sidenav.init(sideNav, {}));
M.Sidenav.init(sideNav, {});
}
render() {
return (
<div className="main-header">
<div className="primary-overlay">
<div className="navbar-fixed">
<nav className="transparent">
<div className="container">
<div className="nav-wrapper">
<a href="#home" className="brand-logo">
TEST
</a>
<a data-activates="side-nav" className="button-collapse">
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
Home
</li>
<li>
About
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
<li>
<a className="btn blue">Download</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
{/* Side Nav: fixed navbars must go right underneath main nav bar */}
<ul id="side-nav" className="side-nav">
<h4 className="blue-grey darken-4 center">TEST</h4>
<li>
<a className="divider" />
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Testimonials
</li>
<li>
Contact
</li>
</ul>
{/*-- Showcase */}
<div className="showcase container">
<div className="row">
<div className="col s12 main-text">
<h5>You found the...</h5>
<h1>Right Place To Start</h1>
<p className="flow-text">
To take your business to the next level with our services that
have taken companies to the fortune 500
</p>
<a href="#about" className="btn btn-large white black-text">
Learn More
</a>
<a href="#contact" className="white-text">
<i className="material-icons medium scroll-icon">
arrow_drop_down_circle
</i>
</a>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Landing;
Here are some screen shots I am getting with errors in my console as well regarding the anchor tags (not sure how I work around this if its needed in the side bar). I am getting access to the sidebar as per the console.logs shown below.
​Hope someone else has encountered this problem already and can help...
Cheers!
[![enter image description here][3]][3]
The trigger button markup is incorrect. It has to be data-target and it has to have the class sidenav-trigger. Also the side nav has to have the classname sidenav. side-nav with a hyphen will not work:
<a href="#" data-target="side-nav" className="sidenav-trigger button-collapse">
<i className="material-icons">menu</i>
</a>
Also you should always use refs instead of querying the DOM yourself when working with react. Apply a ref callback to the sidenav element and then use it to initialize:
class Landing extends Component {
onRef = nav => {
this.nav = nav;
M.Sidenav.init(nav);
};
render() {
return (
{/* ... */}
<ul ref={this.onRef} id="side-nav" className="sidenav">
<li><a className="divider" /></li>
{/* ... */}
</ul>
{/* ... */}
);
}
}
Working example with your corrected markup: