I am new to react, and I am working on my first project, following https://www.youtube.com/watch?v=qwM23_kF4v4.
At the very beginning, I followed all the steps and tries to set a sidebar on the left with "240px", the expected is as left, but what I made is as right.
The code is below. I only add the sidemenu part.
I have rechecked the code in the video many times, but it still shows as below. Furthermore, I expected the sidebar to be 50% of the screen, as shown in the video.
I have changed the sidemenu width as "100%", "40vmin", but nothing works.
What I have tried is as follows in App.css:
.sidemenu {
width: 1000px;
border:1px solid white;
}
My App.js code is as follows:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<aside className="sidemenua">
<h1>Aside</h1>
</aside>
<section>
</section>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Expected layout
My layout
please check your className is differ from css selector name it should be
sidemenu.
<aside className="sidemenu">
<h1>Aside</h1>
</aside>
Related
First question on StackOverflow.
So, I have a Next App and the Navbar is being imported in the _app.js.
import Navbar from "../Components/Navbar";
function MyApp({ Component, pageProps }) {
return (
<>
<Navbar />
<Component {...pageProps} />
</>
);
}
Color or Navbar links is grey so when it is rendered on the most of the pages it works fine, as the BG is of light color. However, in some pages when navigated the color is not visible.
So, I want to know if there is a way to change the color of the Navbar links only when we are on that page. Like, for example when we visit the page :: http://localhost:3000/model3 , the color of the Navbar links should be white.
I am using the module approach on the Navbar and using sass as the CSS compiler with a Navbar.module.scss
Model3.js
import React from "react";
import section from "../styles/section.module.css";
import S from "../styles/models.module.css";
import E from "../styles/model3.module.css";
import Link from "next/link";
import Head from "next/head";
import { Fade } from "react-reveal";
function model3() {
return (
<div>
<Head SameSite="None">
<title>Model 3 | Tesla</title>
<link
rel="icon"
href="https://www.tesla.com/themes/custom/tesla_frontend/assets/favicons/favicon.ico"
/>
</Head>
<div className={S.Wrapper}>
<div className={S.Maincontainer}>
<div className={S.Container}>
<div className={E.TopSection}>
<Fade bottom>
<div className={section.carname}>
<div className={section.title}>
<h2 style={{ color: "white" }}>Model 3</h2>
</div>
</div>
</Fade>
<Fade bottom>
<div className={E.Details}>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>3.1 s</h3>
</div>
<div className={S.DetailsData}>0-60 mph*</div>
</div>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>358 mi</h3>
</div>
<div className={S.DetailsData}>Range (EPA est.)</div>
</div>
<div className={S.DetailsContainer}>
<div className={S.DetailsHeading}>
<h3>AWD</h3>
</div>
<div className={S.DetailsData}>Dual Motor</div>
</div>
<div className={S.DetailsContainer}>
<Link href="">
<span>Order Now</span>
</Link>
</div>
</div>
</Fade>
</div>
</div>
</div>
</div>
</div>);}
export default model3;
If there is anything that I should include please let me know. Thank you.
Please check at the top, all the Navlinks in the Navbar are grey, I need to change all of them to white when this page is rendered so that they will be visible
The page looks like this
There are many ways to do that:
you can use your route hooks, React Router has useLocation(), you can verify the location and set a class to modify the behaviour based on the path.
you can send a props to your navbar
you can set a class to the body based on the route and then target your navabar with css .dark .navbar
The best method depends on the structure of your project
I'm trying to add a logo to a Header component in react, but it's not showing.
It's like it is transparent because if I justify items with flex and space between, it counts like an element. I don't know what I'm doing wrong.
import React from "react";
import "./Header.css";
const Header = () => {
return (
<div className="header">
<img src="../img/logo.png" alt="" />
<h1>ONE</h1>
<h1>TWO</h1>
</div>
);
};
export default Header;
import logo from '<PATH>';
return <img src={logo} alt="Logo" />;
I am trying to run basic assertions about the styling of my component. Right now I am running them on the default React app that the CRA template gives you:
App.js
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
App.test.js
test("computed styles", () => {
render(<App />);
const app = document.querySelector(".App");
const appStyles = window.getComputedStyle(app);
console.log(appStyles.width);
});
Nothing is logged to the console. I run the same code in the browser, and in the app itself, and it returns 1440px, the width of my screen. But in Jest, it returns nothing.
It's the first time I'm building a website with GatsbyJS and I'm trying to build some components to use all over the site.
One of these components is the footer. I wrote its structure but I want to change the color of a <div> that is part of the footer based on which page am I visiting. I don't want the whole footer to change color, only this div that is part of the footer.
To be more accurate: if I'm visiting the Homepage I want this div to have an orange Background whereas if I'm inside the contact page I want it to have a blue background.
Is it possible?
This is part of the code of my footer (that is the footer.js gatsby component that I import in my pages):
<footer className={footerStyle.footer}>
<div className={footerStyle.parteSopra}>
<div className={footerStyle.parteSopra}>
<div className={footerStyle.ottanta}>
<h3 className={footerStyle.rimaniamo+ ' '+footerStyle.dimTitoli}>rimaniamo<br />in contatto</h3>
</div>
<div className={footerStyle.venti}>
</div>
</div>
<div className={footerStyle.parteSotto}>
<div className={footerStyle.ottanta+ ' '+footerStyle.boxFrecciaBlu}>
<div className={footerStyle.contieniFrecciaBlu}>
<img className={footerStyle.frecciaBlu} src={frecciaBlu} alt="Freccia giù" />
</div>
</div>
<div className={footerStyle.venti+ ' '+footerStyle.boxFbEInstaBlu}>
<div className={footerStyle.contieniFbBlu}>
<a href="https://it-it.facebook.com/DiamanteCalzature" target="_blank" rel="noopener noreferrer">
<img className={footerStyle.fbBlu} src={iconaFbBlu} alt="Facebook" />
</a>
</div>
<div className={footerStyle.contieniInstaBlu}>
<a href="https://instagram.com/diamantecalzature?igshid=cta3uh8iob7a" target="_blank" rel="noopener noreferrer">
<img className={footerStyle.instaBlu} src={iconaInstaBlu} alt="Instagram" />
</a>
</div>
</div>
</div>
</div>
<div id="coloreFootSotto" className={footerStyle.parteSotto+ ' '+footerStyle.coloreFooterSotto}>
<div className={footerStyle.ottanta}>
</div>
<div className={footerStyle.venti+ ' '+footerStyle.boxTornaSu}>
</div>
</div>
</footer>
I import it in my pages writing <Footer /> and I thought I could add an attribute, a prop, or something inside that tag to realize what I want. I need the div with Id id="coloreFootSotto" to have a different background-color based on the page I am visiting. At the moment I'm just manipulating the DOM in some pages to change the background-color but I was wondering if it is possible to do it with props or something like that (maybe not).
Does anyone know it?
Thank you
Gatsby uses reach router so you can use useLocation in your component and do something with the location.pathname for specific routes.
// Footer.js
import React from 'react';
import { useLocation } from "#reach/router"
import Container from 'components/Container';
const Footer = () => {
const {pathname} = useLocation()
console.log(pathname)
return (
<footer style={pathname=== '/' ? {backgroundColor: 'blue'} : null} >
<Container>
<p>© {new Date().getFullYear()}, My Gatsby Site</p>
</Container>
</footer>
);
};
export default Footer;
It's also worth mentioning that you can get location data from a gatsby page via its location prop.
Depending on how your app is structured, you could also get this data from your page component, and pass the relevant data down via props down through your component tree.
eg IndexPage > Layout > Footer
For multiple pages, you could do something like this.
// Footer.js
import React from 'react';
import { useLocation } from "#reach/router"
import Container from 'components/Container';
const pagesWithColoredFooter = ['/', '/page-2', 'page-3'];
const Footer = () => {
const {pathname} = useLocation()
console.log(pathname)
return (
<footer style={pagesWithColoredFooter.includes(pathname) ? {backgroundColor: 'blue'} : null} >
<Container>
<p>© {new Date().getFullYear()}, My Gatsby Site</p>
</Container>
</footer>
);
};
export default Footer;
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: